Changing layout accoring to viewport dimensions (responsive design?)

[alex9311]

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.



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');
}
}
},

[mitchellsimoens]

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.

[alex9311]

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:


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);
}