hbox, vbox layout not working, flex not working

[Marc-QNX]

I took the example from the layout docs (http://docs.sencha.com/touch/2-0/#!/guide/layouts) and tried implementing it in MVC but they do not seem to work. Card layout works but the rest seem to have some issues. The following code basically behaves as if there is no layout element and each item is just displayed as a single narrow line.

Am I doing something wrong or is this broken? I have tried this with vbox, hbox, with and without align: stretch/middle. Everything is always laid out as if I have nothing in the layout attribute.


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

Ext.application({
name: 'Test',
controllers: ['Main'],
});





Ext.define('Test.controller.Main', {
extend: 'Ext.app.Controller',


views : [
'Home',
],


refs: [ {
ref : 'index',
selector: 'homeView',
}],

init: function() {
this.getHomeView().create();
},
});





Ext.define('Test.view.Home', {
extend: 'Ext.Container',

config: {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
},
});

[Bassem]

same thing here, is it a bug on ST2 ?

[Marc-QNX]

I found the cause.

Seems I had forgotten to import the Sencha CSS file.

[Bassem]

for my case, i just used a float left and right for each panel of my hbox and it works, but regarding the sencha touch 2 css file is there a formatted version, aptana is not able to format since his not able to recognise a lot of points !!!

[Marc-QNX]

Yes, use this one: sencha-touch-2.0.0-pr1/resources/css-debug/sencha-touch.css

[Bassem]

oh yeah, thats what i was looking for... Thanks :)

[Marc-QNX]

Update:

looks like the debug css (css-debug/sencha-touch.css) has issues and does not do the hbox layout.

Use css/sencha-touch.css instead.

[Bassem]

+ the list item disclosure doesn't work as well!
thnks for the update