Code:
// Adapted from http://dev.sencha.com/deploy/ext-3.4.0/examples/dd/field-to-grid-dd.js
Ext.namespace('Ext.ux.dd');
/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
// A DropZone which allows things to be dropped onto a grid.
// This is not necessary by itself, bu serves as a base for
// CellDropZone and ColumnDropZone.
Ext.ux.dd.ColumnDropZone = Ext.extend(Ext.dd.DropZone, {
constructor : function(config) {
if (config)
Ext.apply(this, config);
},
// Call the DropZone constructor using the grid's element
// only after the grid has been rendered.
init: function(grid) {
if (grid.rendered) {
this.grid = grid;
this.view = grid.getView();
this.store = grid.getStore();
this.ddGroup = this.ddGroup || grid.ddGroup || 'GridDD';
Ext.ux.dd.ColumnDropZone.superclass.constructor.call(this, this.grid.getEl());
} else {
grid.on('render', this.init, this);
}
},
// Scroll the main configured Element when we drag close to the edge
containerScroll: true,
// Whether or not to highlight the target if it is invalid.
showActiveOnInvalid: false,
getTargetFromEvent: function(e) {
// Ascertain whether the mousemove is within a grid cell
var cell = e.getTarget(this.view.cellSelector);
if (cell) {
// We *are* within a grid cell/header, 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 columnIndex = this.view.findCellIndex(cell);
if (columnIndex !== false) {
return {
node: cell,
columnIndex: columnIndex,
column: this.grid.getColumnModel().getColumnAt(columnIndex)
};
}
}
},
// On Node enter, see if it is valid for us to drop the field on that type of column.
onNodeEnter: function(target, dd, e, dragData) {
this.dropOK = false;
if (!target) {
return;
}
if (this.dropIsValid) {
this.dropOK = this.dropIsValid(target, dd, e, dragData);
} else {
this.dropOK = true;
}
if (this.dropOK || this.showActiveOnInvalid) {
this.grid.getEl().select(String.format('.x-grid3-td-{0}', target.column.id)).each(function(el) {
el.addClass('x-drop-target-active');
});
}
},
// Unhighlight the target node.
onNodeOut: function(target, dd, e, dragData) {
this.grid.getEl().select(String.format('.x-grid3-td-{0}', target.column.id)).each(function(el) {
el.removeClass('x-drop-target-active');
});
},
// Process the drop event.
// This should be overriden by the instance.
onNodeDrop: function(target, dd, e, dragData) {
}
});
Code:
// Adapted from http://dev.sencha.com/deploy/ext-3.4.0/examples/dd/field-to-grid-dd.js
Ext.namespace('Ext.ux.dd');
/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
// A DropZone which allows things to be dropped onto a grid.
// This is not necessary by itself, bu serves as a base for
// CellDropZone and ColumnDropZone.
Ext.ux.dd.ColumnDropZone = Ext.extend(Ext.dd.DropZone, {
constructor : function(config) {
if (config)
Ext.apply(this, config);
},
// Call the DropZone constructor using the grid's element
// only after the grid has been rendered.
init: function(grid) {
if (grid.rendered) {
this.grid = grid;
this.view = grid.getView();
this.store = grid.getStore();
this.ddGroup = this.ddGroup || grid.ddGroup || 'GridDD';
Ext.ux.dd.ColumnDropZone.superclass.constructor.call(this, this.grid.getEl());
} else {
grid.on('render', this.init, this);
}
},
// Scroll the main configured Element when we drag close to the edge
containerScroll: true,
// Whether or not to highlight the target if it is invalid.
showActiveOnInvalid: false,
getTargetFromEvent: function(e) {
// Ascertain whether the mousemove is within a grid cell
var cell = e.getTarget(this.view.cellSelector);
if (cell) {
// We *are* within a grid cell/header, 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 columnIndex = this.view.findCellIndex(cell);
if (columnIndex !== false) {
return {
node: cell,
columnIndex: columnIndex,
column: this.grid.getColumnModel().getColumnAt(columnIndex)
};
}
}
},
// On Node enter, see if it is valid for us to drop the field on that type of column.
onNodeEnter: function(target, dd, e, dragData) {
this.dropOK = false;
if (!target) {
return;
}
if (this.dropIsValid) {
this.dropOK = this.dropIsValid(target, dd, e, dragData);
} else {
this.dropOK = true;
}
if (this.dropOK || this.showActiveOnInvalid) {
this.grid.getEl().select(String.format('.x-grid3-td-{0}', target.column.id)).each(function(el) {
el.addClass('x-drop-target-active');
});
}
},
// Unhighlight the target node.
onNodeOut: function(target, dd, e, dragData) {
this.grid.getEl().select(String.format('.x-grid3-td-{0}', target.column.id)).each(function(el) {
el.removeClass('x-drop-target-active');
});
},
// Process the drop event.
// This should be overriden by the instance.
onNodeDrop: function(target, dd, e, dragData) {
}
});
var items_grid = new Ext.grid.GridPanel({
renderTo: 'items_grid',
height: 400,
width: 300,
viewConfig: {
forceFit: true
},
enableDragDrop: true,
ddGroup: 'items_grid',
store: {
xtype: 'jsonstore',
root: 'items',
fields: ['id', 'name'],
data: {
items: [
{id: 1, name: 'orange'},
{id: 2, name: 'milk'},
{id: 3, name: 'eggs'},
{id: 4, name: 'cheese'},
{id: 5, name: 'beef'},
{id: 6, name: 'apple'},
{id: 7, name: 'candy'},
{id: 8, name: 'bread'},
{id: 8, name: 'butter'}
]
}
},
columns: [
{
header: 'ID',
dataIndex: 'id'
},
{
header: 'Name',
dataIndex: 'name'
}
]
});
var categories_grid = new Ext.grid.GridPanel({
renderTo: 'categories_grid',
height: 400,
width: 710,
enableHdMenu: false,
columnLines: true,
ddGroup: 'items_grid',
plugins: new Ext.ux.dd.ColumnDropZone({
ddGroup: 'items_grid',
onNodeDrop: function(target, dd, e, dragData) {
if (!this.dropOK) return;
msg = String.format('You dropped {0} into {1}', dragData.selections[0].data.name, target.)
console.log(msg);
},
dropIsValid: function(target, dd, e, dragData) {
return target.column.dataIndex != 'id';
}
}),
store: {
xtype: 'jsonstore',
root: 'items',
fields: ['id', 'cereal', 'dairy', 'protein', 'fruit', 'vegetable', 'junk'],
data: {
items: [
{id: 1, cereal: 1, dairy: 2, protein: 3, fruit: 4, vegetable: 5, junk: 6}
]
}
},
columns: [
{
header: 'ID',
dataIndex: 'id'
},
{
header: 'Ceareal',
dataIndex: 'cereal'
},
{
header: 'Dairy',
dataIndex: 'dairy'
},
{
header: 'Protein',
dataIndex: 'protein'
},
{
header: 'Fruit',
dataIndex: 'fruit'
},
{
header: 'Vegetable',
dataIndex: 'vegetable'
},
{
header: 'Junk',
dataIndex: 'junk'
}
]
});
Drag and drop rows to column
Reply With Quote