Sencha Touch 2 panel not stretching to full height

Question

I have made this application in sencha touch 2

Ext.application({
    name: "SOMENAME",
    launch: function () {
        //Ext.Viewport.setLayout({type:'fit',align:'stretch'});
        var mainPanel = Ext.create('Ext.Container', {
            layout: 'vbox',
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'card',
                        animation: 'slide'
                    },
                    height: 300,
                    id: 'nooPanel',
                    items: [
                        {
                            html: 'Page 1'
                        },
                        {
                            html: 'Page 2 asdasdasd'
                        },
                        {
                            html: 'Page 3 asdq323434'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Next',
                    handler: function (button, e, eOpts) {
                        var panel = Ext.getCmp('nooPanel');
                        var totalItems = panel.getInnerItems().length;
                        var index = panel.getInnerItems().indexOf(panel.getActiveItem());
                        panel.setActiveItem((index + 1) % totalItems);


                    }
                }
            ]
        });
        Ext.Viewport.add(mainPanel);
        mainPanel.down('panel').setActiveItem(0);
    },
    init: function () {
    }
})

but the problem is that if i dont put the height to 300 on the panel of which the layout is card its height becomes 0 and nothing is displayed
even after setting layout to fit on the viewport what should i do?

Answer 1

When you put items into a container with layout: 'vbox', Sencha Touch 2 needs to know what is the height ratio between these child items.

If you want to has a full-height items inside a vbox, add this config to that item, instead of height: 300, use flex:1

Answer 2

well digging into the configs i found out flex as a part of config..
through this property i can define the ratios of all the elements inside a container having vbox layout
so if i set the flex to 3 different items as 10,1,1 then the first one will take up (10/(10+1+1))*100 % of the space..
kind of worked for me..
but still looking for the final ans

Answer 3

You can only have one item in a container when you use 'fit'. I added a couple of 'flex:' values to give what I think you want. Here is the code and it's on SenchaFiddle for testing.

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

Ext.application({
    name: "SOMENAME",
    launch: function () {
        //Ext.Viewport.setLayout({type:'fit',align:'stretch'});
        var mainPanel = Ext.create('Ext.Container', {
            layout: 'vbox',
            items: [
                {
                    xtype: 'panel',
                    flex: 20,
                    layout: {
                        type: 'card',
                        animation: 'slide'
                    },
                    //height:300,
                    id: 'nooPanel',
                    items: [
                        {
                            html: 'Page 1',
                            flex:1
                        },
                        {
                            html: 'Page 2 asdasdasd'
                        },
                        {
                            html: 'Page 3 asdq323434'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Next',
                    flex: 1,
                    handler: function (button, e, eOpts) {
                        var panel = Ext.getCmp('nooPanel');
                        var totalItems = panel.getInnerItems().length;
                        var index = panel.getInnerItems().indexOf(panel.getActiveItem());
                        panel.setActiveItem((index + 1) % totalItems);


                    }
                }
            ]
        });
        Ext.Viewport.add(mainPanel);
        mainPanel.down('panel').setActiveItem(0);
    },
    init: function () {
    }
})