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

When you en error in core ExtJs code like this usually you should be able to see stack at least and know what line of _your_ code was executed last. — sha, May 06 '12 at 18:36
@sha, thanks for your comment but I dont know where I can get stack trace. Can you please tell how to view the stack trace in firefox? — Shekhar, May 06 '12 at 18:59
I don't use FF much - but in Chrome it you should have red triangle at the left side of the exception message. — sha, May 06 '12 at 19:02
@sha, thanks.. in chrome I am getting 'Uncaught TypeError: Cannot read property 'dom' of null' error. any idea about this? This error is on following line : var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', customChartEl, { — Shekhar, May 06 '12 at 19:05
@sha, my basic problem is... I dont have clear idea about how to implement drag and drop feature. Example which has been given in SDK documentation is about drag-n-drop areas (car and truck dnd example) but there's no documentation for drag-n-drop between components like treepanel to text. I have just copy pasted code from existing example which came with ExtJS SDK. — Shekhar, May 06 '12 at 19:08

score 3 · Accepted Answer · answered May 07 '12 at 10:06

3

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.

answered May 07 '12 at 10:06

Jom

1,877
5
29
46

I found answer to my question. I just created listener for 'render' event of an target 'form panel' in controller and now its working. – Shekhar May 07 '12 at 11:31

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

1 Answers1