drag-and-drop - 在 ExtJS 4 的树面板中创建拖放功能时，“this.el 为 null”

Question

我正在尝试在 treepanel 中实现拖放功能ExtJS 4. 基本上我想将一些节点从 treepanel 拖到一个文本框中。我对在 ExtJS 4 中实现拖放的方式很困惑，但我也尝试编写一些代码。我不确定它是否正确。

我的代码如下:
CustomChart.js文件内容

Ext.define('dd.view.CustomChart', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.customChart',
    layout : {
        type : 'vbox',
        align : 'stretch'
    },

    initComponent : function() {
        this.items = [
            {
                xtype : 'textfield',
                name : 'values',
                fieldLabel : 'Drop values here'
            }
        ];
        this.callParent(arguments);
    }
});

我正在使用这个 CustomChart面板内 AttritionViewer文件如下:

Ext.define('dd.view.AttritionViewer', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.attritionViewer',
    title : 'View attrition by dimensions',

    layout : 'border',

    initComponent : function() {
        this.items = [
            {
                xtype : 'treepanel',
                title : 'Select dimensions',
                store : 'Dimensions',
                rootVisible : false,
                region : 'west',
                height : '100%',
                width : '20%',
                viewConfig : {
                    plugins : {
                        ptype : 'treeviewdragdrop',
                        ddGroup: 'GridExample'
                    }
                }
            },
            {
                xtype : 'panel',
                region : 'center',
                    layout : {
                    type : 'vbox',
                    align : 'stretch'
                },
                items : [
                    {
                        xtype : 'customChart',
                        flex : 1
                    }
                ]
            }
        ];
        this.callParent(arguments);
    }
});

正如你在上面的代码中看到的，我设置了 ViewConfig和 ddGroup用于树面板。现在我不知道把下面的代码放在哪里，所以我把它放在 init() Controller 的方法。 init()我的 Controller 的方法如下所示:

var customChartEl =  Ext.widget('customChart');

var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', customChartEl, {
    ddGroup: 'GridExample',

    notifyEnter: function(ddSource, e, data) {
        console.log('inside notifyEnter() method');
        //Add some flare to invite drop.
    /*    formPanel.body.stopAnimation();
        formPanel.body.highlight(); */
    },
    notifyDrop  : function(ddSource, e, data){
        console.log('inside notifyDrop() method');
        return true;
    }        
});

在此代码之后，我得到 this.el is null ext-debug.js (line 7859) 处的错误.我不知道接下来要做什么。

请指导我如何从文本字段内的树面板拖动节点。

提前致谢 !!!

Answer 1

检查这个链接，
http://examples.extjs.eu/?ex=tree2divdrag
我也在尝试一项类似的任务。如果我得到一些输出，我可以帮助你。
如果您解决了您的问题，请在此处记下笔记，这对我也有帮助。

检查此示例的来源。 http://docs.sencha.com/ext-js/4-0/#!/example/dd/dragdropzones.html .

最好的祝愿。