1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    29
    Answers
    1
    Vote Rating
    0
    arunc is on a distinguished road

      0  

    Question Unanswered: How to manage compatibility with devices in mvc in sencha touch!!!

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


    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.....

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,328
    Answers
    3540
    Vote Rating
    849
    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


    You should use flex... like this:

    Code:
    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.
    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