ExtJS add panel to panel

Question

I am trying to add 2 panels to an already created panel (layout: stretch, type: hbox). I get no errors in firebug, but nothing seems to happen on my screen.

Here is the code that adds the 2 panels to the already defined panel.

var variablesAttributesPanel = new Ext.Panel({
    id: 'variablesAttributesPanel',
    title: 'variablesAttributesPanel',
    autoScroll: true, 
    html: 'yeah1',
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    flex: 1
});
var locationDatePanel = new Ext.Panel({
    id: 'locationDatePanel',
    autoScroll: true, 
    title: 'locationDatePanel',
    html: 'yeah2',
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    flex: 1
});
Ext.getCmp('datasetInfoPanel').add(variablesAttributesPanel);
Ext.getCmp('datasetInfoPanel').add(locationDatePanel);
Ext.getCmp('datasetInfoPanel').update();
Ext.getCmp('datasetInfoPanel').doLayout();

Any ideas on what I am doing wrong?

Edit

var datasetInfoPanel = new Ext.Panel({
    id: 'datasetInfoPanel',
    title: "Dataset Information", 
    region: "center", 
    autoScroll: true, 
    layout: {
        align: 'stretch',
        type: 'hbox'
    },
});

can you show the code where you config datasetInfoPanel, the problem seems to be that you are not giving the panels dimensions. — nscrob
and another thing. i don;t know what version of extjs you are using, but update method is not for refreshing the view is for giving a panel a new html or data content. see docs, so basicly you rewrite the panels view with an empty html. — nscrob
@nscrob I created an edit that shows the datasetInfoPanel config. I also used the update, just to clear the current html from the panel before adding panels to it. — gberg927
my concern is still that the update is after adding the two panels, therefor clearing the html after adding the 2 panels. remove the update() and if you still don't see the 2 panels, check the source of the page and see if they are rendered with no dimensions. — nscrob

TheHorse TheHorse · Accepted Answer · 2011-11-28T16:06:00

try that:

datasetInfoPanel.add(variablesAttributesPanel);
datasetInfoPanel.add(locationDatePanel);

remove layout confing from variablesAttributesPanel and locationDatePanel.

ExtJS add panel to panel

1 Answers