ExtJS5 - 用鼠标拖拽Grid行进行排序及选择

对Grid中的数据进行手动排序，以及在多个Grid之间相互移动行数据是比较常见的业务逻辑。利用Ext.grid.plugin.DragDrop类，可方便地实现这两个效果。

1、实现Grid行的上下移动

Ext.onReady(function() {
var proStore = Ext.create("Ext.data.Store", {
fields: ["code", "name", "num"],
data: [
["#001", "iPhone6", 100],
["#002", "iPhone6 Plus", 80],
["#003", "Mi Note4", 99],
["#004", "Galaxy S6", 75],
["#005", "Smartisan T2", 68]
]
});

Ext.create("Ext.grid.Panel", {
title: "可用鼠标拖拽行数据的Grid",
width: 400,
margin: 10,
border: true,
store: proStore,
columns: [{
text: "产品编号",
dataIndex: "code",
flex: 1
}, {
text: "产品名称",
dataIndex: "name",
flex: 1
}, {
text: "产品数量",
dataIndex: "num",
flex: 1
}],
viewConfig: {
plugins: {
ptype: "gridviewdragdrop",
dragText: "可用鼠标拖拽进行上下排序"
}
},
renderTo: Ext.getBody()
});
});

代码运行效果：



2、实现多个Grid之间的相互移动

要让行数据可在多个Grid之间相互移动，只需在Grid引用Ext.grid.plugin.DragDrop插件时，为其指定同一个组名，表明它们属于同一组，可相互移动。

当然，前提是这些Grid使用的Model类应该一致，即表格字段应该一致。

viewConfig: {
plugins: {
ptype: "gridviewdragdrop",
ddGroup: "DrapDropGroup"
}
}

代码运行效果如下：