View Full Version : [CLOSED] hbox, vbox layout not working, flex not working

27 Oct 2011, 7:32 AM
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 });

name: 'Test',
controllers: ['Main'],

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

views : [

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

init: function() {

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

27 Oct 2011, 11:01 AM
same thing here, is it a bug on ST2 ?

28 Oct 2011, 6:02 AM
I found the cause.

Seems I had forgotten to import the Sencha CSS file.

28 Oct 2011, 6:05 AM
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 !!!

28 Oct 2011, 6:22 AM
Yes, use this one: sencha-touch-2.0.0-pr1/resources/css-debug/sencha-touch.css

28 Oct 2011, 6:26 AM
oh yeah, thats what i was looking for... Thanks :)

28 Oct 2011, 7:12 AM

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.

28 Oct 2011, 7:20 AM
+ the list item disclosure doesn't work as well!
thnks for the update