PDA

View Full Version : Panel Resizing based on Windows Resize



rajuarien
16 Sep 2013, 11:10 AM
Currently we are having a have three panels (West, Center, South Panel) which is on a Border Layout.+ Menu Header on the top which is DIV Container. Based on the contents of the Header on a
Windows Resize I want to resize the West / Center Panels height.

Ext.EventManager.onWindowResize(function () {

var headerClientHeight = document.getElementById('header').clientHeight; //Menu Content Height
var westPanelHeight = westPanel.getBox().height;
var westPanelWidth = westPanel.getBox().width;
var offset = headerClientHeight - 26; //Remove the hardcoding --26 is fixed Div Height
if (typeof console != "undefined") {
console.log('---------------------------------------------');
console.log('headerClientHeight > ' + headerClientHeight);
console.log('westPanelHeight > ' + westPanelHeight);
console.log('westPanelWidth > ' + westPanelWidth);
console.log('offset > ' + offset);
console.log('post offset > ' + (westPanelHeight - offset));
}
try {
westPanel.setSize(westPanelWidth, westPanelHeight - offset); //adjusting westPanel Height Only
westPanel.doLayout();
} catch (err) {
console.log('error ' + err);
}
....
}
I see the westPanelHeight - offset being changed but the West Panel height is not being changed. 8-|

rajuarien
16 Sep 2013, 11:35 AM
Even setHeight doesnt work

var westPanel = Ext.getCmp('west_panel');
if (westPanel != null) {
var headerClientHeight = document.getElementById('header').clientHeight;
var westPanelHeight = westPanel.getBox().height;
var westPanelWidth = westPanel.getBox().width;
var offset = headerClientHeight - 26; //Remove the hardcoding
if (typeof console != "undefined") {
console.log('---------------------------------------------');
console.log('headerClientHeight > ' + headerClientHeight);
console.log('westPanelHeight > ' + westPanelHeight);
console.log('westPanelWidth > ' + westPanelWidth);
console.log('offset > ' + offset);
console.log('post offset > ' + (westPanelHeight - offset));
}
try {
//westPanel.setHeight(westPanelHeight - offset);
westPanel.setSize(westPanelWidth, westPanelHeight - offset); //adjusting westPanel Height Only
westPanel.doLayout();
westPanel.doComponentLayout();
} catch (err) {
console.log('error ' + err);
}
}

slemmon
18 Sep 2013, 1:29 PM
Are the different regions/panels within a viewport that has a border layout? If not, what is the container that has the border layout that these panels are child items of?

rajuarien
19 Sep 2013, 1:42 PM
Issue resolved

Ext.EventManager.onWindowResize(function () {
var northPanel = Ext.getCmp('north_panel');
if (northPanel != null) {
if (document.getElementById('header') != null) {
var headerScrollHeight = document.getElementById('header').scrollHeight;//Menu Container
try {
northPanel.expand(false);
northPanel.setHeight(headerScrollHeight);
//northPanel.findParentByType("viewport").syncSize();
northPanel.findParentByType("viewport").doLayout();
} catch(err) {
//console.log('error ' + err);
}
}
}
});