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

Question

我正在尝试在 ExtJS 4 的 treepanel 中实现拖放功能。基本上我想将一些节点从 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);
    }
});

我在 AttritionViewer 文件中使用这个 CustomChart 面板，如下所示:

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。现在我不确定将以下代码放在哪里，因此我将其放在 Controller 的 init() 方法中。我的 Controller 的 init() 方法如下所示:

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

在此代码之后，我在 ext-debug.js(第 7859 行)处收到 this.el is null 错误。我不知道下一步该做什么。

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

提前致谢!!!

Answer 1

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

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

最美好的祝愿。