Question

I’m having a problem with Sencha Touch 2 and vbox flexing. Here is my code for the Panel (modified for simplicity, real Panel is much more intricate but this is what it boils down to):

Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',


config: {
    title: 'Test',
    iconCls: 'home',

    items: [
        {
            xtype: 'container',
            layout: 'vbox',
            items: [
                {
                    xtype: 'container',
                    flex: 2,
                    style: 'background-color: #f90;'
                },
                {
                    xtype: 'container',
                    flex: 1,
                    style: 'background-color: #9f0;'
                },
                {
                    xtype: 'container',
                    flex: 1,
                    style: 'background-color: #0f9;'
                },
                {
                    xtype: 'container',
                    flex: 2,
                    style: 'background-color: #90f;'
                }
            ]
        }
    ]
}

})

And here is my Main.js:

Ext.define("risbergska2.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
    'Ext.TitleBar',
    'Ext.Video'
],
config: {
    tabBarPosition: 'bottom',

    items: [
        {
            xtype: 'homeloggedinview'
        },
        {
            xtype: 'myview'
        },
        {
            xtype: 'programview'
        },
        {
            xtype: 'socialview'
        },
        {
            xtype: 'aboutview'
        },
        {
            xtype: 'test'
        }
    ]
}

});

My app.js:

Ext.application({
name: 'risbergska2',

requires: [
    'Ext.MessageBox'
],

views: ['Main', 'HomeLoggedIn', 'My', 'Program', 'Social', 'About', 'Test'],

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('risbergska2.view.Main'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}

});

If I run this code and go to the Test-panel, nothing is showing. I want it to show (in the test case) four different containers with four different colors in them, the top one and the bottom one being twice the vertical size of the middle ones.

Is this not the way to get that result? Where have I gone wrong?

Thanks!

Answer 1

Set layout : ‘fit’ for risbergska2.view.Test

Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',


config: {
    title: 'Test',
    iconCls: 'home',
    layout : 'fit',
    items: [
        {
            xtype: 'container',
            layout: 'vbox',
            items: [