How to manage compatibility with devices in mvc in sencha touch!!!

[arunc]

How to link multiple views in same component by managing view port using flex..
the flex component it only available in two levels of containers...
not more than two...
means if i have a vbox inside a panel and the panel is inside a tab panel.. then the height and width must be used inside the vbox elements other wise element is not displayed and by doing so the device compatibility is disturbed .....

so if there any solution for this.....

can we mention height and width in percentage rather than in pixels.....

[mitchellsimoens]

You should use flex... like this:

Ext.create('Ext.tab.Panel', {
    fullscreen : true,
    items      : [
        {
            title  : 'Tab One',
            layout : {
                type  : 'vbox',
                align : 'stretch'
            },
            items  : [
                {
                    flex : 2,
                    html : 'This panel takes up 2/3 of the height'
                },
                {
                    flex : 1,
                    html : 'This panel takes up 1/3 of the height'
                },
                {
                    height : 100,
                    html   : 'This panel takes up 100px'
                }
            ]
        }
    ]
});

You can mix and match using flex and width. What VBox does is gets the total height it has to work with, say 1000 pixels. It then takes all components that have height set, in this example the 3rd panel has a height of 100, and subtracts it from the total height so 1000 - 100 = 900. Now we have 900 pixels left. Now it adds all the leftover components and adds the flex properties together so that it can get the value of 1. So the first tab has a flex value of 2 and the second tab has a value of 1 so there is a total flex value of 3. It takes the leftover height of 900 and divides it by the total flex value of 3 which tells us that flex value of 1 equals to 300 pixels. So now the first tab has a flex value of 2 so the height should be 300 * 2 which is 600 pixels and the second tab's height should be 300 * 1 so 300 pixels.

So now the layout knows that the first tab should have a height of 600 pixels, the second tab should have 300 pixel height and the third tab has 100 pixel height to equal the 1000 pixels the layout had to work with.

*NOTE all this is done using CSS now so it's lightening fast since the browser does it natively.