PDA

View Full Version : How to re-order rows in a Ext-JS grid?



emmy mathew
7 Jul 2010, 9:24 PM
How to use the following code to implement row swapping in Ext-JS dataGrid?
Is it possible to re-order rows in the basic grid example given in http://extjs.com/deploy/dev/examples...rray-grid.html (http://extjs.com/deploy/dev/examples/grid/array-grid.html) using the plugin GridReorderDropTarget ??

Ext.namespace('Ext.ux.dd');

Ext.ux.dd.GridReorderDropTarget = function(grid, config) {
this.target = new Ext.dd.DropTarget(grid.getEl(), {
ddGroup: grid.ddGroup || 'GridDD'
,grid: grid
,gridDropTarget: this
,notifyDrop: function(dd, e, data){
// determine the row
var t = Ext.lib.Event.getTarget(e);
var rindex = this.grid.getView().findRowIndex(t);
if (rindex === false) return false;
if (rindex == data.rowIndex) return false;

// fire the before move/copy event
if (this.gridDropTarget.fireEvent(this.copy?'beforerowcopy':'beforerowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections) === false) return false;

// update the store
var ds = this.grid.getStore();
if (!this.copy) {
for(i = 0; i < data.selections.length; i++) {
ds.remove(ds.getById(data.selections[i].id));
}
}
ds.insert(rindex,data.selections);

// re-select the row(s)
var sm = this.grid.getSelectionModel();
if (sm) sm.selectRecords(data.selections);

// fire the after move/copy event
this.gridDropTarget.fireEvent(this.copy?'afterrowcopy':'afterrowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections);

return true;
}
,notifyOver: function(dd, e, data) {
var t = Ext.lib.Event.getTarget(e);
var rindex = this.grid.getView().findRowIndex(t);
if (rindex == data.rowIndex) rindex = false;

return (rindex === false)? this.dropNotAllowed : this.dropAllowed;
}
});
if (config) {
Ext.apply(this.target, config);
if (config.listeners) Ext.apply(this,{listeners: config.listeners});
}

this.addEvents({
"beforerowmove": true
,"afterrowmove": true
,"beforerowcopy": true
,"afterrowcopy": true
});

Ext.ux.dd.GridReorderDropTarget.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.dd.GridReorderDropTarget, Ext.util.Observable, {
getTarget: function() {
return this.target;
}
,getGrid: function() {
return this.target.grid;
}
,getCopy: function() {
return this.target.copy?true:false;
}
,setCopy: function(b) {
this.target.copy = b?true:false;
}
});

10 Jul 2010, 9:30 AM
I don't use the plugin, but I can tell you that drag and drop can be implemented very easily once you get the core understanding of drag and drop.

I explain this in my book. You can use this example: http://examples.extjsinaction.com/chapter14/dnd_grid_to_grid.html

9 Mar 2011, 3:12 AM
hi .. I was also looking for some reorder examples and I've tried your example (http://examples.extjsinaction.com/chapter14/dnd_grid_to_grid.html)

But your json store has a PHP error :( ... can you fix this?

brittongr
9 Mar 2011, 11:15 PM
I don't use the plugin, but I can tell you that drag and drop can be implemented very easily once you get the core understanding of drag and drop.

I explain this in my book. You can use this example: http://examples.extjsinaction.com/chapter14/dnd_grid_to_grid.html

Not working...