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

[shekhar.kotekar]

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 !!!

[scottmartin]

Have you reviewed the grid to form example:
../extjs4/examples/dd/dnd_grid_to_formpanel.html

Regards,
Scott.

[jay@moduscreate.com]

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 !!!

Please post formatted code! What you posted is unreadable!