功能需求:grid 拖拽
google了几篇,发现没有合适的资料,而且发现很多都是乱转载的,坑死人呀,还是决定自己研究下,去官网api搜索到 Ext.grid.plugin.DragDrop ptype:gridviewdragdrop ,没错这就是官方提供的grid插件。
猛读了一阵会发现2个单词比较显眼 drag 和 drop, 个人理解为:drag -- 托,drop -- 放,因为发现2个配置项enableDrag : Boolean , enableDrop : Boolean,当设置 enableDrag : false 则只允许接收被拖放对象不允许自身的拖动,其它情况没有测试,这2个词搞清楚那么这个插件也就很容易理解啦,使用实例如下。
google了几篇,发现没有合适的资料,而且发现很多都是乱转载的,坑死人呀,还是决定自己研究下,去官网api搜索到 Ext.grid.plugin.DragDrop ptype:gridviewdragdrop ,没错这就是官方提供的grid插件。
猛读了一阵会发现2个单词比较显眼 drag 和 drop, 个人理解为:drag -- 托,drop -- 放,因为发现2个配置项enableDrag : Boolean , enableDrop : Boolean,当设置 enableDrag : false 则只允许接收被拖放对象不允许自身的拖动,其它情况没有测试,这2个词搞清楚那么这个插件也就很容易理解啦,使用实例如下。
//grid 配置
Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
ddGroup: 'DragDropGroup'//此处代表拖动的组 拖动组件与放置组件要同属一组才能实现相互拖放
}
},
......
});
Ext.create('Ext.tree.Panel', {
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: 'DragDropGroup',
enableDrag : false //配置tree不允许拖动
},
listeners: {
beforedrop: function(node, data, overModel, dropPosition, dropHandlers) {//注:此处事件是gridviewdragdrop 的放置监听事件
dropHandlers.wait = true;
Ext.MessageBox.confirm('Drop', 'Are you sure', function(btn){
if (btn === 'yes') {
dropHandlers.processDrop();
} else {
dropHandlers.cancelDrop();
}
});
},
drop: function( node, data, overModel, dropPosition, eOpts) {
//data.records[0].get('name') grid中的拖动行的name列数据值
//overModel.get('id') tree中被拖放到的节点的id值
alert(data.records[0].get('id') + overModel.get('id'));
//todo ....
}
}
},
......
});