Extjs中grid行的上移和下移

时间:2022-04-05 18:38:56

一、将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移

 var up = new Ext.Action({
text : 'Up',
icon : 'up.png',//或者添加样式iconCls
disabled : true,
handler : function() {
var record = grid.getSelectionModel().getSelected();
if (record) {
var index = grid.store.indexOf(record);
if (index > 0) {
grid.store.removeAt(index);
grid.store.insert(index - 1, record);
grid.getView().refresh(); // refesh the row number
grid.getSelectionModel().selectRow(index - 1);
}
} else {
Ext.Msg.alert('Warning', 'Please select one item!');
}
}
}); var down = new Ext.Action({
text : 'Down',
icon : 'down.png',//或者添加样式iconCls
disabled : true,
handler : function() {
var record = grid.getSelectionModel().getSelected();
if (record) {
var index = grid.store.indexOf(record);
if (index < grid.store.getCount() - 1) {
grid.store.removeAt(index);
grid.store.insert(index + 1, record);
grid.getView().refresh(); // refesh the row number
grid.getSelectionModel().selectRow(index + 1);
}
} else {
Ext.Msg.alert('Warning', 'Please select one item!');
}
}
});

二、grid行的拖动实现上移和下移

 var grid = new Ext.grid.GridPanel({
layout : 'fit',
loadMask : true,
enableDragDrop : true,
ddGroup: "GridDD",
viewConfig : {
forceFit : true,
enableRowBody : true,
showPreview : true,
cls:"x-grid-empty",
emptyText: _('ID_NO_RECORDS_FOUND')
},
listeners : {
'afterrender' : function() {
var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'GridDD',
copy : false,
notifyDrop : function(dd, e, data) {
var rows = data.selections;
var index = dd.getDragData(e).rowIndex;
if(typeof(index) == "undefined") return;
for(i = 0; i < rows.length; i++) {
if(!this.copy) {
grid.getStore().remove(rows[i]);
grid.getStore().insert(index, rows[i]);
grid.view.refresh();
}
}
}
});
}
}
});