I created a tab panel with a few tabs and when I try to implement a gantt chart (required the dom to create) I keep seeing panel.body is undefined, even if I add something to the panel...

...},{
title: "Descriptions View",
id: 'dviewTab',
iconCls: 'icon-desc',
autoWidth: true,
forceLayout: true,
header: false,
xtype: 'panel',
items: [ {xtype: 'textfield', value: 'testing'} ] // so we have something in the 'body'
},{....}

Then after the panel has been created I do

    var uiPanel = Ext.getCmp('dviewTab');
    if (uiPanel.body)
    {
       // never gets here :(
    } // if
    else
    {
        this.logger("uiPanel.body is undefined.... WHY??");
    }

I can see the panel in firebug and looks as it should, but I don't see a body field, if this is relevant the 'elements' value of the panel is "body". I don't understand why it is undefined, please help.

I created a tab panel with a few tabs and when I try to implement a gantt chart (required the dom to create) I keep seeing panel.body is undefined, even if I add something to the panel...

...},{
title: "Descriptions View",
id: 'dviewTab',
iconCls: 'icon-desc',
autoWidth: true,
forceLayout: true,
header: false,
xtype: 'panel',
items: [ {xtype: 'textfield', value: 'testing'} ] // so we have something in the 'body'
},{....}

Then after the panel has been created I do

    var uiPanel = Ext.getCmp('dviewTab');
    if (uiPanel.body)
    {
       // never gets here :(
    } // if
    else
    {
        this.logger("uiPanel.body is undefined.... WHY??");
    }

I can see the panel in firebug and looks as it should, but I don't see a body field, if this is relevant the 'elements' value of the panel is "body". I don't understand why it is undefined, please help.

• javascript
• extjs
• panel
• undefined

2 Answers 2

You need to wait until after the Panel has been rendered.

var myPanel = new Ext.Panel({});
console.log("`myPanel.body` is "+myPanel.body); // "`myPanel.body` is undefined"

myPanel.on('render', function() {
    console.log("`myPanel.body` is "+myPanel.body); // "`myPanel.body` is [object Object]"
});

var container = Ext.getCmp("ext-p-123");
container.add(myPanel);
container.doLayout();

Without a plete running example (which I know might be hard to generate), and without knowing which version, my best guess is that you are trying to access body before the panel actually gets rendered. In the 3.x version we are using the following line within the ExtJS source code sets a panel's body:

this.body = cp.down('.'+this.bodyCls);

And this code es within the onRender method. Perhaps you are trying to access the panel's body from within constructor or initComponent, which would be too early. Try doing so inside afterRender instead (all of the above being predicated on the supposition that you are creating a custom widget)