Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    91
    Answers
    6
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,422
    Answers
    3901
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
    Answers
    6
    Vote Rating
    0
      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);
                    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •