对EXTJS的控件之间DD的相关总结(一)

最新推荐文章于 2025-06-19 17:49:09 发布

原创最新推荐文章于 2025-06-19 17:49:09 发布 · 4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #tree #function #ext #null

【2】java技术专栏同时被 3 个专栏收录

19 篇文章

订阅专栏

【6】开源天空

13 篇文章

订阅专栏

【3】AJAX专题

6 篇文章

订阅专栏

本文总结了EXTJS中Tree和Grid控件之间的拖放（DD）操作，包括从Tree到Grid和从Grid到Tree的实现。通过设置enableDD属性为true启用Tree的拖放功能，并详细解释了dropZone配置、onNodeOver和onNodeDrop方法的用法，以及处理grid到tree拖放的beforenodedrop事件和自定义函数ddFn。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近来由于项目用到EXT，觉得里面的DD用起来很有意思，研究了一段时间源码，也总结了一些常用控件之间的用法，这方面网上的资料比较少，当时自己也走了一些弯路，现在暂时总结一下

ext提供的Tree和Grid本身就有拖拽的功能，使用过TreePanel或者GridPanel的人都知道，对于要想让tree可以拖拽，那么必须为tree的enableDD属性设置为true。

1，tree到grid

panel.dropZone = new Ext.dd.DropZone(panel.getEl(), {ddGroup:"SendTreeDDGroup", dropNotAllowed:"x-dd-drop-delete", getTargetFromEvent:function (e) {
return e.getTarget("");
}, onNodeOver:function (nodedate, dragsource, e, data) {
if (!data.node) {
  if (data.personData.name) {
       // 显示"nodrop"图标
   return "x-dd-drop-nodrop";
  } else {
   if (data.personData.html) {
       // 显示删除图标
   }
  }
  return this.dropNotAllowed;
}
if (data.node.attributes.leaf && SendGrid.store.findBy(function (record, id) {
  return id == data.node.id;
}) == -1) {
  return "x-dd-drop-ok-add";
} else {
  return "x-dd-drop-nodrop";
}
return this.dropNotAllowed;
}, onNodeDrop:function (nodedate, dragsource, e, data) {
if (data.node.attributes.leaf == true) {
  SendGrid.store.add(new Ext.data.Record({dept:data.node.attributes.dept, faxnum:data.node.attributes.faxnum, faxtype:data.node.parentNode.attributes.dept, faxtel:data.node.attributes.faxnum}, data.node.id));
}
return false;
}});

2，grid到tree的例子
beforenodedrop: function(dropEvent) {
            var node = dropEvent.target;    // 目标结点
            var data = dropEvent.data;      // 拖拽的数据
            var point = dropEvent.point;    // 拖拽到目标结点的位置
            // 如果data.node为空，则不是tree本身的拖拽，而是从grid到tree的拖拽，需要处理
            if(!data.node) {
                switch(point) {
                    case 'append':
                        // 添加时，目标结点为node，子结点设为空
                        ddFn(node, null, data.selections);
                        break;
                    case 'above':
                        // 插入到node之上，目标结点为node的parentNode，子结点为node
                        ddFn(node.parentNode, node, data.selections);
                        break;
                    case 'below':
                        // 插入到node之下，目标结点为node的parentNode，子结点为node的nextSibling
                        ddFn(node.parentNode, node.nextSibling, data.selections);
                        break;
                }
            }
其中ddFn方法如下
var ddFn= function(node, refNode, selections) {
    for(var i = 0; i < selections.length; i ++) {
        var record = selections[i];
        node.insertBefore(new Tree.TreeNode({
            text: record.get('text'),
            id: record.get('id'),
            leaf: record.get('leaf'),
            cls: record.get('cls')
        }), refNode);
    }
}