Question

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.

Answer 1

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-comp-123");
container.add(myPanel);
container.doLayout();