1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    91
    Vote Rating
    0
    Answers
    6
    alex9311 is on a distinguished road

      0  

    Default Answered: Changing layout accoring to viewport dimensions (responsive design?)

    Answered: Changing layout accoring to viewport dimensions (responsive design?)


    Hey all,

    I'm working with two panels which are side by side (using the column layout). I'm interested in having the panels switch to being one on top of the other when the viewport width (fills the browser window and resizes with it) gets to a certain value.

    So far I have a listener for the viewport resize event which can check the new dimensions and execute code accordingly. My idea was to create two different views and swap them out on the panel in the if statements that check for width. Is there an easier, more efficient way to do this? I couldnt really find a way to change the layout on an existing panel once it has been created.

    Any general advice on this would be much appreciated, I'm working in MVC

    Here is my code for the viewport resize listener, so far I'm only trying to hide the two column panel if the width gets less than 500 and have it reappear if the width is greater than 500. I'm unsure of how I would bring in a new panel.

    Code:
            listeners: {
                    resize: function(panel, w, h) {
                            var viewport = panel.up(viewport);
                            var detailpanel = panel.down('#detailpanel');
                            var gridpanel = panel.down('#gridPanel');
                            gridpanel.setHeight(h-70);
                            detailpanel.setHeight(h-70);
                            if (w<500){
                                    panel.hide();
                            }
                            else{
                                    panel.setVisible('true');
                            }
                    }
            },

  2. Thanks for the tip. I ended up doing that with the card layout. I'm wondering if there would be a more efficient way of doing this.

    Basically I have 3 different views. Two of them use my maildetailmasterone container and just change the width of one of the columns if it the total width gets too small. If the total width gets to be less than 400 though, it switches to the maildetailmastertwo container, which stacks the two columns on top of each other with the border layout.

    Here's my function:

    Code:
          responsive:function(panel, w, h){
                    var mailpanelone = panel.down('maildetailmasterone');
                    var mailpaneltwo = panel.down('maildetailmastertwo');
                    var detailpanelone = mailpanelone.down('#detailpanel');
                    var gridpanelone = mailpanelone.down('#gridPanel');
                    var detailpaneltwo = mailpaneltwo.down('#detailpanel');
                    var gridpaneltwo = mailpaneltwo.down('#gridPanel');
                    if (w<400){
                            panel.getLayout().setActiveItem('Two');
                            gridpaneltwo.setHeight(h*.4);
                            detailpaneltwo.setHeight(h*.6);
                    }
                    else if (w>=400&w<675){
                            panel.getLayout().setActiveItem('One');
                            gridpanelone.setWidth
                            gridpanelone.setHeight(h-70);
                            detailpanelone.setHeight(h-70);
                            gridpanelone.setWidth(200);
                    }
                    else{
                            panel.getLayout().setActiveItem('One');
                            gridpanelone.setHeight(h-70);
                            gridpanelone.setWidth(370);
                            detailpanelone.setHeight(h-70);
                    }

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

      1  

    Default


    I would add/remove components. I personally would have a container for when width is over 500px and one that is less than 500px. Then when a switch is needed, get the items from the current container, remove them all without destroying them and create the new container giving them the items you removed from the last.
    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.

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    91
    Vote Rating
    0
    Answers
    6
    alex9311 is on a distinguished road

      0  

    Default


    Thanks for the tip. I ended up doing that with the card layout. I'm wondering if there would be a more efficient way of doing this.

    Basically I have 3 different views. Two of them use my maildetailmasterone container and just change the width of one of the columns if it the total width gets too small. If the total width gets to be less than 400 though, it switches to the maildetailmastertwo container, which stacks the two columns on top of each other with the border layout.

    Here's my function:

    Code:
          responsive:function(panel, w, h){
                    var mailpanelone = panel.down('maildetailmasterone');
                    var mailpaneltwo = panel.down('maildetailmastertwo');
                    var detailpanelone = mailpanelone.down('#detailpanel');
                    var gridpanelone = mailpanelone.down('#gridPanel');
                    var detailpaneltwo = mailpaneltwo.down('#detailpanel');
                    var gridpaneltwo = mailpaneltwo.down('#gridPanel');
                    if (w<400){
                            panel.getLayout().setActiveItem('Two');
                            gridpaneltwo.setHeight(h*.4);
                            detailpaneltwo.setHeight(h*.6);
                    }
                    else if (w>=400&w<675){
                            panel.getLayout().setActiveItem('One');
                            gridpanelone.setWidth
                            gridpanelone.setHeight(h-70);
                            detailpanelone.setHeight(h-70);
                            gridpanelone.setWidth(200);
                    }
                    else{
                            panel.getLayout().setActiveItem('One');
                            gridpanelone.setHeight(h-70);
                            gridpanelone.setWidth(370);
                            detailpanelone.setHeight(h-70);
                    }

Thread Participants: 1

Tags for this Thread