ExtJS add panel to panel

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'
    },
}); 


ANSWERS:


try that:

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

remove layout confing from variablesAttributesPanel and locationDatePanel.



 MORE:


 ? ExtJS Add panel above already added panel
 ? c# duplicate panels dynamically
 ? Ext JS - create a tool with dynamic tooltip on a panel
 ? Dynamically add Text Fields to a Panel in extjs
 ? find dynamic added panel
 ? Dynamically add to the first collection in a nested collection VBA
 ? Add buttons Dynamically at Runtime
 ? Add buttons Dynamically at Runtime
 ? Add buttons Dynamically at Runtime
 ? Position HTML button dynamically in C#