1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    6
    Vote Rating
    0
    prasanthsd is on a distinguished road

      0  

    Default hbox vbox layout issue

    hbox vbox layout issue


    Hi guys,

    Im trying to build something like this. There is a window inside that a tab panel and on the first tab, I have a border layout. The center region has a few charts and the south region has some data view. Here the vbox containers don't show up unless I give a width to the vboxes. Below is the code

    Code:
    var win = new Ext.Window({
        title: 'Window',
        width: 1024,
        height: 600,
        layout: 'fit',
        items:[{
            xtype: 'tabpanel',
            deferRender: false,
            activeTab: 0,
            items: [{
                title: 'First tab',
                layout: 'border',
                items:[{
                    xtype: 'container',
                    region: 'center',
                    layout: 'hbox',
                    layoutConfig: {
                        align: 'stretch',
                        pack: 'center'
                    },
                    items: [{
                        xtype: 'container',
                        layout: 'vbox',
                        flex: 1,
                        layoutConfig: {
                            align: 'stretch',
                            padding: '5'
                        },
                        items: [{
                            xtype: 'linechart'
                        },{
                            xtype: 'label',
                            height: 10,
                            text: 'Chart 1'
                        }]
                    },{
                        xtype: 'container',
                        layout: 'vbox',
                        flex: 1,
                        layoutConfig: {
                            align: 'stretch',
                            padding: '5'
                        },
                        items: [{
                            xtype: 'linechart'
                        },{
                            xtype: 'label',
                            height: 10,
                            text: 'Chart 2'
                        }]
                    }]
                },{
                    xtype: 'container',
                    region: 'south',
                    height: 225,
                    layout: 'border',
                    items: [{
                        //some things that work fine
                    }]
                }]
            }, {
                title: 'Some other tab'
            }]
        }]
    });
    Any help would be appreciated

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    vbox and hbox do no support auto sizing so you either have to give them fixed height/width or use the flex configs.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread