Question

I want to place two labels, a textfield and a button in vertical layout.
But the two labels are placed horizontally while textfield and button are placed vertically.

label1 | label 2 | textfield/button

I tried various layout options but non helped. Is there a fundamental error in my layout?
Any suggestions?

Code for Panel:

Ext.define('MyApp.view.Demoview', {
extend: 'Ext.Panel',
xtype: 'demoview',
fullscreen : false,
config: {
    items : [ {
        docked : 'top',
        xtype : 'toolbar',
        title : 'A title'
    }, {
        xtype : 'panel',
        layout : {
            type : 'vbox',
            pack : 'center',
            align : 'center'
        },
        defaults : {
            margin : 5
        },
        items : [ {
            xtype : 'label',
            styleHtmlContent: true,
            height:'100px',
            html : 'label 1'
        }, {
            xtype: 'label',
            styleHtmlContent: true,
            height: '100px',
            html: 'label 2'
        }, {
            xtype : 'textfield',
            label: 'Name',
            required: true
        }, {
            xtype : 'button',
            itemId : 'demoButton',
            text : 'Button',
            ui : 'round'
        }]
    } ]
}});

They are nested inside a container with card layout:

Ext.define('MyApp.view.Main', {
extend : 'Ext.Container',
requires : [ 'MyApp.view.Someview', 'MyApp.view.Demoview'],
config : {
    fullscreen : false,
    layout : 'card',
    activeItem : 0,
    items : [ {
        layout : 'fit',
        xtype : 'somview'
    }{
        layout : 'fit',
        xtype : 'demoview'
    } 
]
}});

Answer 1

Updating to Sencha Touch 2 Developer Preview 3 fixed my problem.