// 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.
// 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) {
constructor: function(){},
// Call the DropZone constructor using the View's scrolling element
// only after the grid has been rendered.
init: function(grid) {
- 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
+ });
// 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.
// 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)) {
- 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
onNodeOut: function(target, dd, e, dragData) {
onNodeOut: function(target, dd, e, dragData) {
-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.
constructor: function(){},
// Call the DRagZone's constructor. The Panel must have been rendered.
if (Ext.isOpera) {
Ext.fly(t).on('mousemove', function(e1){
t.style.visibility = 'hidden';
if (Ext.isOpera) {
Ext.fly(t).on('mousemove', function(e1){
t.style.visibility = 'hidden';
var d = document.createElement('div');
d.className = 'x-form-text';
d.appendChild(document.createTextNode(t.value));
var d = document.createElement('div');
d.className = 'x-form-text';
d.appendChild(document.createTextNode(t.value));
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{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'}
],
{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'}
],