Extjs中tree树结点拖动到grid显示数据

树结点的配置

                            items: [{
                                xtype: 'treepanel',
                                border: false,
                                title: '元素',
                                id: "subProcess_tree_" + currentTab.getIdIndex(),
                                useArrows: true,
                                rootVisible: false,
                                autoScroll: true,
                                enableDD: false,
                                viewConfig: {
                                    // 加入允许拖动功能
                                    plugins: [{
                                        ptype: 'treeviewdragdrop',
                                        // 元素节点的拖动
                                        ddGroup: 'elementDrag',
                                        // 设为false，不允许在中拖动
                                        enableDrop: false
                                    }]
                                },
                                // 不允许放
                                root: designMxgraph.updateTreeNode()
                            }]

grid的配置

    renderFun: function (me, eOpts) {
        var firstGridDropTarget = new Ext.dd.DropTarget(me.getEl().dom, {
            ddGroup: 'DDGroup',
            notifyOver: function (ddSource, e, data) {
                var nodes = data.records;
                var rtn = 'x-dd-drop-ok';
                var iconCls = nodes[0].get('iconCls')
                if (nodes[0].isLeaf() && (iconCls !== 'tr-node-rule-leaf')) {
                    return rtn;
                }
                return '';
            },
            notifyDrop: function (ddSource, e, data) {
                var nodes = data.records;
                var iconCls = nodes[0].get('iconCls')
                // 判断单过程指标是否从业务视图拖动进入列表grid
                if (nodes[0].isLeaf() && (iconCls !== 'tr-node-rule-leaf')) {
                    if (selTable.bizview && BizViewData.text !== selTable.bizview) {
                        Ext.MessageBox.show({
                            title: '提示',
                            msg: "引用无效，该子过程已经绑定（" + selTable.bizview + "），是否切换业务视图？",
                            buttons: Ext.MessageBox.YESNO,
                            icon: Ext.MessageBox.QUESTION,
                            fn: function (btn, text) {
                                if (btn === 'ok') {
                                    //打开业务视图成功
                                    function processData(data) {
                                        var leftbox = Ext.getCmp('leftBox');
                                        leftbox.loadData(data, myMask, win);
                                    }

                                    Ext.getCmp("leftTabPanel").getLayout().doResetActiveItem(0);
                                    Ext.Ajax.request({
                                        url: 'bizview/open',
                                        method: 'post',
                                        params: {
                                            name: encodeURIComponent(targetTable.bizview)
                                        },
                                        success: function (obj) {
                                            feedBackResult(obj.responseText, processData)
                                        },
                                        failure: function (obj) {
                                            // console.log(obj);
                                        }
                                    });
                                } else {
                                    if (myMask) myMask.hide();
                                    return false;
                                }
                            }
                        });
                        return;
                    }
                    if (selTable.type === ruleTableType.from_unknow) {
                        selTable.type = ruleTableType.from_bizview;//表类型初始化
                    }
                    var dropNodes = nodes;
                    for (var i = 0; i < dropNodes.length; i++) {
                        var dropNode = dropNodes[i];
                        var expr_Type = dropNode.data.EXPR_TYPE;
                        if (!dropNode.isLeaf() || expr_Type === ExprType.Filter || expr_Type === ExprType.DynamicParameter) return false;
                        var displayName = funCol.getNewGridName(dropNode.data.text);
                        var dataType = getIdxDataType(dropNode);
                        var expr = [{
                            type: exprTokenType.field,
                            eName: displayName,
                            cName: displayName,
                            expr: dropNode.data.EXPR_ID,
                            rtType: dataType
                        }];
                        var new_output = true;
                        if (selTable.isCollection) {
                            new_output = false;
                        }
                        var record = {
                            columnExpr: expr,
                            columnId: 'ti_' + cosmoUtils.getRandomId(10),
                            columnDisplayName: displayName,
                            // false没有选中,true:选中
                            columnPartition: false,
                            // 计算类型
                            columnSummaryType: '',
                            columnSortmode: 'nosort',
                            columnType: dataType,
                            columnLength: '',
                            columnOutPut: new_output//,输出:false没有选中,true:选中
                        }
                        var records = {
                            columnCheckbox: '',
                            columnId: record.columnId,
                            columnFieldsName: record.columnDisplayName,
                            columnType: record.columnType,//类型
                            columnLength: record.columnLength, //长度
                            columnDisplayName: record.columnDisplayName,
                            columnExpr: record.columnExpr
                        }
                    }
                    if (BizViewData.text) {
                        selTable.bizview = BizViewData.text;
                    }
                    return true;
                }
                return true;
            }
        });
    },

grid节点配置

    QuerySetInZbTab.querySetGrid = Ext.create('GRE.view.commonJs.rule.GridPanel', {
        reference: 'querySettingGrid',
        bind: {
            store: '{querySetGridStore}'
        },
        tbar: QuerySetInZbTab.zbSettingToolBar(),
        region: 'center',
        enableDragDrop: true,
        border: false,
        stripeRows: true,
        columns: [
            {
                xtype: 'actioncolumn',
                flex: 1,
                align: "center",
                menuDisabled: true,
                items: [{
                    iconCls: 'zb_col_icon_div'
                }]
            },
            {
                header: '名称',
                dataIndex: 'columnDisplayName',
                flex: 2,
                editor: new Ext.form.TextField({}),
                renderer: function (value, metadata, record, rowIndex) {
                    debugger
                    return record.data.columnDisplayName;
                }
            },
            {
                header: "排序",
                align: "center",
                flex: 1,
                dataIndex: 'columnSortmode',
                renderer: function (value, metadata, record, rowIndex) {
                    var data = record.data;
                    var css = "adhoc_sort";
                    if (data.columnSortmode != "nosort")
                        css += "_" + data.columnSortmode;
                    return '<div row=' + rowIndex + ' order=' + data.columnSortmode + ' onclick="QuerySetInZbTab.setOrder(this)" class=' + css + '></div>';//gridTabs.setOrder(this)
                }
            }, {
                xtype: 'checkcolumn',
                header: "输出",
                flex: 1,
                dataIndex: 'columnOutPut'
            },
            {
                header: "计算",
                flex: 1,
                stopSelection: true,
                dataIndex: 'columnSummaryType',
                editor: {
                    xtype: 'combo',
                    store: new Ext.data.Store({
                        fields: ["value", "text"],
                        data: [["", "无"], ["SUM", "合计"], ["COUNT", "计数"], ["AVG", "平均"],
                            ["MAX", "最大值"], ["MIN", "最小值"]]
                    }),
                    displayField: 'text',
                    valueField: 'value',
                    editable: false,
                    listeners: {
                        focus: function (me, event) {
                            me.expand();
                        },
                        change: function (me, val) {
                            me.blur();
                        }
                    }
                },
                renderer: function (value, metadata, record, rowIndex) {
                    var str = '无';
                    switch (record.data.columnSummaryType) {
                        case'SUM':
                            str = '合计';
                            break;
                        case'COUNT':
                            str = '计数';
                            break;
                        case 'AVG':
                            str = '平均';
                            break;
                        case'MAX':
                            str = '最大值';
                            break;
                        case'MIN':
                            str = '最小值';
                            break;
                        default:
                            break;
                    }
                    return str;
                }
            }, {
                xtype: 'actioncolumn',
                align: "center",
                fixed: true,
                 30,
                items: [{
                    iconCls: 'expr-edit-icon',
                    handler: function (view, rowIndex, colIndex, item, e, record) {
                        updateRuleTable()
                        // editExpression(record);
                        var querySetInZbTab = Ext.getCmp("querySetInZbTab_" + currentTab.getIdIndex());
                        editColumnId = record.data.columnId;
                        var ctr = querySetInZbTab.getController();
                        var grid = ctr.lookupReference("querySettingGrid");
                        grid.getSelectionModel().select(record);
                        ctr.editExpression(record);
                    }
                }]
            },
            {
                header: "类型",
                flex: 1,
                dataIndex: 'columnType',
                renderer: function (value, metadata, record, rowIndex) {
                    //getIdxDataName(value)
                    //保险做法     估计是没用的  即使显示正确了 但存xml可能是错的
                    var showVal = "";
                    switch (value) {
                        case 'string':
                            showVal = "字符串";
                            break;
                        case 'num':
                            showVal = "数字";
                            break;
                        case 'date':
                            showVal = "日期";
                            break;
                        case 'none':
                            showVal = "计算列";
                            break;
                        case 'undefined':
                            showVal = "计算列";
                            break;
                    }
                    //修改 查询定义的类型
                    switch (value) {
                        case 'VARCHAR2':
                            showVal = "字符串";
                            break;
                        case 'NUMBER':
                            showVal = "数字";
                            break;
                        case 'DATE':
                            showVal = "日期";
                            break;
                        case 'CLOB':
                            showVal = "CLOB";
                            break;
                        default:
                            showVal = "计算列";
                            break;
                    }
                    return showVal;
                }
            }, {
                xtype: 'actioncolumn',
                flex: 1,
                align: "center",
                header: "删除",
                dataIndex: 'columnDel',
                items: [{
                    iconCls: 'adhoc_expr_del',
                    handler: 'deleteParamExpression'
                }]
            }, {
                xtype: 'actioncolumn',
                flex: 1,
                menuDisabled: true,
                sortable: false,
                header: "筛选",
                items: [{
                    iconCls: 'icon_add_filter',
                    handler: function (view, rowIndex, colIndex, item, e, record) {
                        var id = record.data.columnId;
                        var name = record.data.columnDisplayName;
                        var type = "field";
                        mxExprEdit.addQueryColToFilter(id, name, type, null, true)
                    }
                }]
            }
        ],
        listeners: {
            itemclick: function (me, record, item, index, e, eOpts) {
                gridRecordIndex = index;
            },
            render: 'renderFun'
        }
    });

拓展使用

    var expr_Form = new Ext.panel.Panel({
        labelWidth: 50,
        // frame: true,
        cursorPos: 0,
        height: 607,
        border: false,
        // id: 'new_expr_edit_panel',
        items: [operators,
            {
                xtype: 'panel',
                border: false,
                bodyStyle: "background:#dfe9f6",
                cls: 'operatorPanel',
                html: '<div style="margin-top:10px;"><label style="float:left;">明细筛选:</label><div class="tag_edit" id="tag_edit_detail_main_' + currentTab.getIdIndex() + '" style="height:150px;398px;border:1px solid #b5b8c8;margin-left:55px;margin-bottom:10px;background-color:white;" > <div class="tag_kong"><b><i></i></b></div><div class="tag_end"><span><b>...</b></span></div></div></div>' +
                    '<div><label style="float:left;">统计筛选:</label><div class="tag_edit" id="tag_edit_summary_main_' + currentTab.getIdIndex() + '" style="height:80px;398px;border:1px solid #b5b8c8;margin-left:55px;margin-bottom:10px;background-color:white;" > <div class="tag_kong"><b><i></i></b></div><div class="tag_end"><span><b>...</b></span></div></div>',
                listeners: {
                    afterrender: 'operatorsRenderFun'
                }
            }]
    });

控制器里面

    operatorsRenderFun: function () {
        new Ext.dd.DropTarget("tag_edit_detail_main_" + currentTab.getIdIndex(), {
            ddGroup: 'elementDrag',
            notifyOver: function (ddSource, e, data) {
                rtn = 'x-dd-drop-ok';
            },
            notifyDrop: function (ddSource, e, data) {
                var isAdd = validDrag(ddSource, data);
                var selTable = currentTab.currentZhiBiao.selTable;

                return true;
            }
        });
    },

tree里配置

{
      xtype: 'treepanel',
      border: false,
      title: '元素',
      id: "subProcess_tree_" + currentTab.getIdIndex(),
      useArrows: true,
      ootVisible: false,
      autoScroll: true,
      enableDD: false,
      viewConfig: {
      // 加入允许拖动功能
      plugins: [{
      ptype: 'treeviewdragdrop',
      // 元素节点的拖动
      ddGroup: 'elementDrag',
      // 设为false，不允许在中拖动
      enableDrop: false
    }]
   },
 // 不允许放
 root: designMxgraph.updateTreeNode()
}