Extjs3.x 为GridPanel 排序 行拖拽 行数据上移 行数据下移
需要实现gridPanel行数据排序,思路是:删除选中行的数据,在移动行插入新数据,形成移动的假象。
[javascript]
var Menu = new Ext.menu.Menu({
items: [{
text: '上移',
iconCls: 'arrow-upon-icon',
handler: function(){
if(rowIndex == 0) {
return;
}
var data = grid.store.data.items[rowIndex].data;
var record = new Ext.data.Record({
Id:data.Id,
name: data.name,
type: data.type,
remarks:data.remarks
});
grid.getStore().removeAt(rowIndex);
grid.getStore().insert(rowIndex - 1, record);
grid.getSelectionModel().selectRow(rowIndex - 1);
grid.getView().refresh();
},
scope: this
},
{
text: '下移',
iconCls: 'arrow-downward-icon',
handler: function(){
if(rowIndex < grid.getStore().getCount() - 1){
var data = grid.store.data.items[rowIndex].data;
var record = new Ext.data.Record({
Id:data.Id,
name: data.name,
type: data.type,
remarks:data.remarks
});
grid.getStore().removeAt(rowIndex);
grid.getStore().insert(rowIndex + 1, record);
grid.getSelectionModel().selectRow(rowIndex + 1);
grid.getView().refresh();
}
},
scope: this
}]
});
var grid = new Ext.grid.GridPanel({
autoScroll: true,
border: false,
loadMask: true,
enableDragDrop:true,//激活行拖动
ddGroup: 'gridDD',
dropConfig: {appendOnly:false},
store: {},
columns: [
new Ext.grid.RowNumberer(),
{ header: '编号', dataIndex: 'Id', width: 200,hidden:true},
{ header: '名称', dataIndex: 'name', width: 200, sortable: true},
{ header: '类型', dataIndex: 'type', width: 100},
{ header: '备注', dataIndex: 'remarks', width: 300}
],
listeners: {
rowdblclick: function(grid, rowIndex, event) {
},
contextmenu:function(e){
var target = e.getTarget();
e.stopEvent() ;
Menu.showAt(e.getXY());
var view = grid.getView();
&n
补充:web前端 , JavaScript ,