'this.el is null' while creating drag-drop feature in treepanel of ExtJS 4

Question

I am trying to implement drag-n-drop feature in treepanel of ExtJS 4. Basically I want to drag some nodes from treepanel into an text box. I am pretty confused with the way drag-n-drop is implemented in ExtJS 4 but then also I have tried to write some code. I am not sure whether its correct or not.

My code is as follows :

CustomChart.js file contents

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

I am using this CustomChart panel inside AttritionViewer file as follows :

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

As you can see in code above, I have set ViewConfig and ddGroup for treepanel. Now I am not sure where to put following code so I have put it in init() method of controller. init() method of my controller looks as follows :

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

After this code, I am getting this.el is null error at ext-debug.js (line 7859). I dont know what to do next.

Please guide me on how to drag an node from treepanel inside text field.

Thanks in advance !!!

Answer 1

check this link, http://examples.extjs.eu/?ex=tree2divdrag i am also trying one similar task. i can help you if i get some output. if you solve your problem, just make a note here, that will help me too.

check the source of this sample too. http://docs.sencha.com/ext-js/4-0/#!/example/dd/dragdropzones.html.

Best wishes.