extjs grid 拖拽

功能需求:grid 拖拽
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 ....
}
}
},
......
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值