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 ....
          }
      }
  },
  ......  
});

你可能感兴趣的:(ExtJs,extjs grid,grid drag,grid to,grid drop)