PDA

View Full Version : How to dynamically change region of border layout?



petersun
31 Jul 2012, 7:54 AM
I searched but didn't get proper solution. Sorry for my English.

I can dynamically change the region, but the splitter is not showing properly.

We have a border layout which has a grid and a panel which contains a map. The user is supposed to be able to dynamically change the region of the map panel, and we don't want to lose the zoom level of the map. For example, when user zoom to a specific zoom level and then click to change the region, we don't want the map reset to the initial zoom level.



var mappanel = Ext.create('Ext.Panel',
{
region: 'north',
id: 'mappanel',
split: true,
html: '<iframe scrolling="no" src=".../OpenLayerMaps.aspx id="nmapframe" name="nmapframe" ' + mapStyle + '></iframe>'
}
);

var viewport = Ext.create('Ext.Viewport',
{
layout: 'border',
border: false,
items: [mappanel, tabs]
}
);

function readingPaneChange(cycle, activeItem) {
switch (activeItem.text) {
case 'Top':
mappanel.region = "north";
mappanel.isHorz = false;
mappanel.isVert = true;
mappanel.setHeight(window.screen.height / 2);
viewport.doLayout();
break;
case 'Bottom':
mappanel.region = "south";
mappanel.isHorz = true;
mappanel.isVert = false;
mappanel.setHeight(window.screen.height / 2);
viewport.doLayout();
break;
case 'Right':
mappanel.region = "east";
mappanel.isHorz = false;
mappanel.isVert = true;
mappanel.setWidth(window.screen.width / 2);
viewport.doLayout();
break;
}
}


By doing this, I can dynamically change the region and keep the map's zooming level, but the splitter is not changed accordingly. So how to let splitter render too?

I also tried to remove and add (insert) the mappanel from viewport, by doing this, splitter and region was good, but the zooming level was reset.

mankz
31 Jul 2012, 10:43 AM
I doubt this is supported, but perhaps one of the devs can confirm this?

petersun
1 Aug 2012, 5:25 AM
Thanks, I really need the help.

garraS
24 Sep 2013, 6:57 AM
+1

I'm trying to move the south region to east to create the classic view and "MacMail" view (three columns). I saw the setRegion (http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.dom.Element-method-setRegion) method but seems not working.

Any ideas of how to do it?

ettavolt
24 Sep 2013, 11:51 AM
I believe it is hardly possible to implement without looking into source code of border layout.