1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    22
    Vote Rating
    0
    shekhar.kotekar is on a distinguished road

      0  

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

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


    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


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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Regards,
    Scott.

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by shekhar.kotekar View Post
    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


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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi