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

来源：互联网发布：淘宝全球购标准编辑：程序博客网时间：2024/06/04 18:53

对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"}}

代码运行效果如下：

1 0