How to put a list next to a panel horzontally?

[ninjasenses]

I have been trying to put a list next to a panel using an hbox container but I have had no luck, everything i have tried causes the list to come up blank. the store has items in it, but there is just a white area whenever it loads. The panel next to it loads fine though. The weird thing that is that when I run my test app in sencha fiddle it shows up how it should, yet locally it does not show correctly. Anyone know whats up? I am using sencha 2 locally.

http://www.senchafiddle.com/#xTZZg#yXGJ4

Ext.Loader.setConfig({
    enabled: true
});


Ext.application({
    name: 'SenchaFiddle',
    
    launch: function() {
        Ext.Viewport.add(contain2);
    }
});
var testData = [];
for (var i = 0; i < 40; i++)
{ testData.push({ txt: "test" }); }


var storesdasd = Ext.create('Ext.data.Store', {
    data: testData
});


var contain2 = Ext.create('Ext.Container', {
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    title: 'Schedules',
    iconCls: 'time',
    
    items: [{
        xtype: 'list',
        itemTpl: '{txt}',
        store: storesdasd,
        flex: 3
    }
            
            , {
                html: 'message preview',
                style: 'background-color: #759E60;',
                flex: 1
            }],
    config: {
        title: 'Schedules',
        iconCls: 'time'
    }
});

[mitchellsimoens]

Create your components within the launch method.

[ninjasenses]

Create your components within the launch method.

Is there a way to do this outside of the launch method? I was only using this example as a small scale test, A more complete example can be found here: http://stackoverflow.com/questions/1...-an-hbox-panel