X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/dd/field-to-grid-dd.js diff --git a/examples/dd/field-to-grid-dd.js b/examples/dd/field-to-grid-dd.js index 0a830dad..970d44a0 100644 --- a/examples/dd/field-to-grid-dd.js +++ b/examples/dd/field-to-grid-dd.js @@ -1,25 +1,29 @@ -/*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.com/license - */ +Ext.require(['*']); + // A DropZone which cooperates with DragZones whose dragData contains // a "field" property representing a form Field. Fields may be dropped onto // grid data cells containing a matching data type. -Ext.ux.CellFieldDropZone = Ext.extend(Ext.dd.DropZone, { +Ext.define('Ext.ux.CellFieldDropZone', { + extend: 'Ext.dd.DropZone', + constructor: function(){}, // Call the DropZone constructor using the View's scrolling element // only after the grid has been rendered. init: function(grid) { + var me = this; + if (grid.rendered) { - this.grid = grid; - this.view = grid.getView(); - this.store = grid.getStore(); - Ext.ux.CellFieldDropZone.superclass.constructor.call(this, this.view.scroller); + me.grid = grid; + grid.getView().on({ + render: function(v) { + me.view = v; + Ext.ux.CellFieldDropZone.superclass.constructor.call(me, me.view.el); + }, + single: true + }); } else { - grid.on('render', this.init, this); + grid.on('render', me.init, me, {single: true}); } }, @@ -27,22 +31,26 @@ Ext.ux.CellFieldDropZone = Ext.extend(Ext.dd.DropZone, { containerScroll: true, getTargetFromEvent: function(e) { + var me = this, + v = me.view; + // Ascertain whether the mousemove is within a grid cell - var t = e.getTarget(this.view.cellSelector); - if (t) { + var cell = e.getTarget(v.cellSelector); + if (cell) { // We *are* within a grid cell, so ask the View exactly which one, // Extract data from the Model to create a target object for // processing in subsequent onNodeXXXX methods. Note that the target does // not have to be a DOM element. It can be whatever the noNodeXXX methods are // programmed to expect. - var rowIndex = this.view.findRowIndex(t); - var columnIndex = this.view.findCellIndex(t); - if ((rowIndex !== false) && (columnIndex !== false)) { + var row = v.findItemByChild(cell), + columnIndex = cell.cellIndex; + + if (row && Ext.isDefined(columnIndex)) { return { - node: t, - record: this.store.getAt(rowIndex), - fieldName: this.grid.getColumnModel().getDataIndex(columnIndex) + node: cell, + record: v.getRecord(row), + fieldName: me.grid.columns[columnIndex].dataIndex }; } } @@ -83,7 +91,7 @@ Ext.ux.CellFieldDropZone = Ext.extend(Ext.dd.DropZone, { } } this.dropOK = true; - Ext.fly(target.node).addClass('x-drop-target-active'); + Ext.fly(target.node).addCls('x-drop-target-active'); }, // Return the class name to add to the drag proxy. This provides a visual indication @@ -92,9 +100,9 @@ Ext.ux.CellFieldDropZone = Ext.extend(Ext.dd.DropZone, { return this.dropOK ? this.dropAllowed : this.dropNotAllowed; }, -// nhighlight the target node. +// highlight the target node. onNodeOut: function(target, dd, e, dragData) { - Ext.fly(target.node).removeClass('x-drop-target-active'); + Ext.fly(target.node).removeCls('x-drop-target-active'); }, // Process the drop event if we have previously ascertained that a drop is OK. @@ -107,9 +115,12 @@ Ext.ux.CellFieldDropZone = Ext.extend(Ext.dd.DropZone, { }); // A class which makes Fields within a Panel draggable. -// the dragData delivered to a coooperating DropZone's methods contains +// the dragData delivered to a cooperating DropZone's methods contains // the dragged Field in the property "field". -Ext.ux.PanelFieldDragZone = Ext.extend(Ext.dd.DragZone, { +Ext.define('Ext.ux.PanelFieldDragZone', { + + extend: 'Ext.dd.DragZone', + constructor: function(){}, // Call the DRagZone's constructor. The Panel must have been rendered. @@ -144,15 +155,15 @@ Ext.ux.PanelFieldDragZone = Ext.extend(Ext.dd.DragZone, { if (Ext.isOpera) { Ext.fly(t).on('mousemove', function(e1){ t.style.visibility = 'hidden'; - (function(){ + Ext.defer(function(){ t.style.visibility = ''; - }).defer(1); + }, 1); }, null, {single:true}); } // Get the data we are dragging: the Field // create a ddel for the drag proxy to display - var f = Ext.getCmp(t.id); + var f = Ext.ComponentQuery.query('field[inputEl]{inputEl.id=="' + t.id + '"}')[0]; var d = document.createElement('div'); d.className = 'x-form-text'; d.appendChild(document.createTextNode(t.value)); @@ -225,34 +236,34 @@ Ext.onReady(function(){ } // create the data store - var store = new Ext.data.ArrayStore({ + var store = Ext.create('Ext.data.ArrayStore', { fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} - ] + ], + data: myData }); - store.loadData(myData); - - var helpWindow = new Ext.Window({ + + var helpWindow = Ext.create('Ext.Window', { title: 'Source code', width: 920, height: 500, closeAction: 'hide', - bodyCfg: {tag: 'textarea', readonly: true}, - bodyStyle: { - backgroundColor: 'white', - margin: '0px', - border: '0px none' + layout: 'fit', + items: { + hideLabel: true, + xtype: 'textarea', + readOnly: true }, listeners: { render: function(w) { Ext.Ajax.request({ url: 'field-to-grid-dd.js', success: function(r) { - w.body.dom.value = r.responseText; + w.items.first().setValue(r.responseText); } }); } @@ -260,7 +271,7 @@ Ext.onReady(function(){ }); // create the Grid - var grid = new Ext.grid.GridPanel({ + var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'}, @@ -269,35 +280,30 @@ Ext.onReady(function(){ {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], - plugins: new Ext.ux.CellFieldDropZone(), + plugins: Ext.create('Ext.ux.CellFieldDropZone'), stripeRows: true, autoExpandColumn: 'company', height:350, width:600, title:'Array Grid', - bbar: new Ext.PagingToolbar({ - buttons: [{ + dockedItems: [{ + dock: 'bottom', + xtype: 'toolbar', + items: { text: 'View Source', handler: function() { helpWindow.show(); } - }], - store: store, - pageSize: 25 - }) + } + }] }); grid.render('grid-example'); - grid.getSelectionModel().selectFirstRow(); - var f = new Ext.Panel({ + var f = Ext.create('Ext.Panel', { frame: true, - layout: 'form', width: 600, - plugins: new Ext.ux.PanelFieldDragZone(), - style: { - 'margin-top': '10px' - }, + plugins: Ext.create('Ext.ux.PanelFieldDragZone'), labelWidth: 150, items: [{ xtype: 'textfield', @@ -314,4 +320,4 @@ Ext.onReady(function(){ }], renderTo: Ext.getBody() }); -}); \ No newline at end of file +});