PDA

View Full Version : Change panel configuration options runtime



a.maffei
2 Feb 2010, 12:54 AM
Hi,

I'm developing a layout for an administrative area.
I use a Border Layout with three panels: header (north region), menu (ovest region) and main (center region).
I want the user to be able to expand the main panel (center region) hiding the header panel and the menu panel (function "expand()" at the end of the code) and changing the main panel margins to fit the layout. I'm able to hide the header and the menu but I'm not able to change the main panel margins runtime.

Below the code:





// DEFAULT LAYOUT
layout = function() {

var cookieProvider;
var headerLogo, headerUser, header;
var menuHeaderLeft, menuHeaderCenter, menuHeaderRight, menuHeader, menuBodyLeft, menuBodyCenter, menuBodyRight, menuBody, menuFooterLeft, menuFooterCenter, menuFooterRight, menuFooter, menu;
var mainHeaderLeft, mainHeaderCenter, mainHeaderRight, mainHeader, mainBodyLeft, mainBodyCenterNavigationTopLeft, mainBodyCenterNavigationTopRight, mainBodyCenterNavigationTop, mainBodyCenterButtonsTopLeft, mainBodyCenterButtonsTopRight, mainBodyCenterButtonsTop, mainBodyCenterContentTop, mainBodyCenterNavigationBottomLeft, mainBodyCenterNavigationBottomRight, mainBodyCenterNavigationBottom, mainBodyCenterContentBottom, mainBodyCenterFiltersLeft, mainBodyCenterFiltersRight, mainBodyCenterFilters, mainBodyCenterButtonsBottomLeft, mainBodyCenterButtonsBottomRight, mainBodyCenterButtonsBottom, mainBodyCenter, mainBodyRight, mainBody, mainFooterLeft, mainFooterCenter, mainFooterRight, mainFooter, main;
var viewport;

return {

init : function() {

/* COOKIES */

cookieProvider = new Ext.state.CookieProvider({
expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 30))
});

/* HEADER > LOGO */

headerLogo = new Ext.Panel({
flex: 0,
width: 190,
baseCls: 'header-logo'
});

/* HEADER > USER */

headerUser = new Ext.Panel({
flex: 10,
margins: '0 15 0 0',
baseCls: 'header-user',
contentEl: 'user'
});

/* HEADER */

header = new Ext.Panel({
region: 'north',
height: 50,
baseCls: 'header',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [headerLogo, headerUser]
});

/* MENU > HEADER > LEFT */

menuHeaderLeft = new Ext.Panel({
region: 'west',
width: 7,
baseCls: 'menu-header-left'
});

/* MENU > HEADER > CENTER */

menuHeaderCenter = new Ext.Panel({
region: 'center',
baseCls: 'menu-header-center',
html: 'Menu principale'
});

/* MENU > HEADER > RIGHT */

menuHeaderRight = new Ext.Panel({
region: 'east',
width: 11,
baseCls: 'menu-header-right'
});

/* MENU > HEADER */

menuHeader = new Ext.Panel({
region: 'north',
height: 25,
baseCls: 'menu-header',
layout: 'border',
items: [menuHeaderLeft, menuHeaderCenter, menuHeaderRight]
});

/* MENU > BODY > LEFT */

menuBodyLeft = new Ext.Panel({
region: 'west',
width: 2,
baseCls: 'menu-body-left'
});

/* MENU > BODY > CENTER */

menuBodyCenter = new Ext.Panel({
region: 'center',
margins: '5 5 0 5',
autoScroll: true,
baseCls: 'menu-body-center',
contentEl: 'menu'
});

/* MENU > BODY > RIGHT */

menuBodyRight = new Ext.Panel({
region: 'east',
width: 6,
baseCls: 'menu-body-right'
});

/* MENU > BODY */

menuBody = new Ext.Panel({
region: 'center',
baseCls: 'menu-body',
layout: 'border',
items: [menuBodyLeft, menuBodyCenter, menuBodyRight]
});

/* MENU > FOOTER > LEFT */

menuFooterLeft = new Ext.Panel({
region: 'west',
width: 7,
baseCls: 'menu-footer-left'
});

/* MENU > FOOTER > CENTER */

menuFooterCenter = new Ext.Panel({
region: 'center',
baseCls: 'menu-footer-center'
});

/* MENU > FOOTER > RIGHT */

menuFooterRight = new Ext.Panel({
region: 'east',
width: 11,
baseCls: 'menu-footer-right'
});

/* MENU > FOOTER */

menuFooter = new Ext.Panel({
region: 'south',
height: 20,
baseCls: 'menu-footer',
layout: 'border',
items: [menuFooterLeft, menuFooterCenter, menuFooterRight]
});

/* MENU */

menu = new Ext.Panel({
region: 'west',
margins: document.getElementById('user') ? '0 0 0 13' : '15 0 0 13',
width: parseInt(cookieProvider.get('sitemanager.menu.width', '200')),
split: true,
minSize: 100,
maxSize: 300,
baseCls: 'menu',
layout: 'border',
listeners: {
resize: {
fn: function(el) {
cookieProvider.set('sitemanager.menu.width', el.getWidth());
}
}
},
items: [menuHeader, menuBody, menuFooter]
});

/* MAIN > HEADER > LEFT */

mainHeaderLeft = new Ext.Panel({
region: 'west',
width: 7,
baseCls: 'main-header-left'
});

/* MAIN > HEADER > CENTER */

mainHeaderCenter = new Ext.Panel({
region: 'center',
baseCls: 'main-header-center',
contentEl: 'title'
});

/* MAIN > HEADER > RIGHT */

mainHeaderRight = new Ext.Panel({
region: 'east',
width: 11,
baseCls: 'main-header-right'
});

/* MAIN > HEADER */

mainHeader = new Ext.Panel({
region: 'north',
height: 25,
baseCls: 'main-header',
layout: 'border',
items: [mainHeaderLeft, mainHeaderCenter, mainHeaderRight]
});

/* MAIN > BODY > LEFT */

mainBodyLeft = new Ext.Panel({
region: 'west',
width: 2,
baseCls: 'main-body-left'
});

/* MAIN > BODY > CENTER > TOP NAVIGATION > LEFT */

mainBodyCenterNavigationTopLeft = new Ext.Panel({
flex: document.getElementById('navigation-top-right') ? 0 : 10,
baseCls: 'main-body-center-navigation-left',
contentEl: 'navigation-top-left'
});

/* MAIN > BODY > CENTER > TOP NAVIGATION > RIGHT */

mainBodyCenterNavigationTopRight = new Ext.Panel({
flex: 10,
baseCls: 'main-body-center-navigation-right',
contentEl: 'navigation-top-right'
});

/* MAIN > BODY > CENTER > TOP NAVIGATION */

var mainBodyCenterNavigationTopItems = new Array();
if(document.getElementById('navigation-top-left')) {
mainBodyCenterNavigationTopItems.push(mainBodyCenterNavigationTopLeft);
}
if(document.getElementById('navigation-top-right')) {
mainBodyCenterNavigationTopItems.push(mainBodyCenterNavigationTopRight);
}

mainBodyCenterNavigationTop = new Ext.Panel({
flex: 0,
height: 30,
margins: '5 0 0 0',
baseCls: 'main-body-center-navigation',
layout: {
type: 'hbox',
align: 'stretch'
},
items: mainBodyCenterNavigationTopItems
});

/* MAIN > BODY > CENTER > TOP BUTTONS > LEFT */

mainBodyCenterButtonsTopLeft = new Ext.Panel({
flex: document.getElementById('buttons-top-right') ? 0 : 10,
baseCls: 'main-body-center-buttons-left',
contentEl: 'buttons-top-left'
});

/* MAIN > BODY > CENTER > TOP BUTTONS > RIGHT */

mainBodyCenterButtonsTopRight = new Ext.Panel({
flex: 10,
baseCls: 'main-body-center-buttons-right',
contentEl: 'buttons-top-right'
});

/* MAIN > BODY > CENTER > TOP BUTTONS */

var mainBodyCenterButtonsTopItems = new Array();
if(document.getElementById('buttons-top-left')) {
mainBodyCenterButtonsTopItems.push(mainBodyCenterButtonsTopLeft);
}
if(document.getElementById('buttons-top-right')) {
mainBodyCenterButtonsTopItems.push(mainBodyCenterButtonsTopRight);
}

mainBodyCenterButtonsTop = new Ext.Panel({
flex: 0,
height: 25,
margins: '5 0 0 0',
baseCls: 'main-body-center-buttons',
layout: {
type: 'hbox',
align: 'stretch'
},
items: mainBodyCenterButtonsTopItems
});

/* MAIN > BODY > CENTER > TOP CONTENT */

mainBodyCenterContentTop = new Ext.Panel({
flex: 10,
margins: '5 0 0 0',
autoScroll: true,
baseCls: 'main-body-center-content',
contentEl: 'content-top'
});

/* MAIN > BODY > CENTER > BOTTOM NAVIGATION > LEFT */

mainBodyCenterNavigationBottomLeft = new Ext.Panel({
flex: document.getElementById('navigation-bottom-right') ? 0 : 10,
baseCls: 'main-body-center-navigation-left',
contentEl: 'navigation-bottom-left'
});

/* MAIN > BODY > CENTER > BOTTOM NAVIGATION > RIGHT */

mainBodyCenterNavigationBottomRight = new Ext.Panel({
flex: 10,
baseCls: 'main-body-center-navigation-right',
contentEl: 'navigation-bottom-right'
});

/* MAIN > BODY > CENTER > BOTTOM NAVIGATION */

var mainBodyCenterNavigationBottomItems = new Array();
if(document.getElementById('navigation-bottom-left')) {
mainBodyCenterNavigationBottomItems.push(mainBodyCenterNavigationBottomLeft);
}
if(document.getElementById('navigation-bottom-right')) {
mainBodyCenterNavigationBottomItems.push(mainBodyCenterNavigationBottomRight);
}

mainBodyCenterNavigationBottom = new Ext.Panel({
flex: 0,
height: 30,
margins: '5 0 0 0',
baseCls: 'main-body-center-navigation',
layout: {
type: 'hbox',
align: 'stretch'
},
items: mainBodyCenterNavigationBottomItems
});

/* MAIN > BODY > CENTER > BOTTOM CONTENT */

mainBodyCenterContentBottom = new Ext.Panel({
flex: 10,
margins: '5 0 0 0',
autoScroll: true,
baseCls: 'main-body-center-content',
contentEl: 'content-bottom'
});

/* MAIN > BODY > CENTER > FILTERS > LEFT */

mainBodyCenterFiltersLeft = new Ext.Panel({
flex: document.getElementById('filters-right') ? 0 : 10,
baseCls: 'main-body-center-filters-left',
contentEl: 'filters-left'
});

/* MAIN > BODY > CENTER > FILTERS > RIGHT */

mainBodyCenterFiltersRight = new Ext.Panel({
flex: 10,
baseCls: 'main-body-center-filters-right',
contentEl: 'filters-right'
});

/* MAIN > BODY > CENTER > FILTERS */

var mainBodyCenterFiltersItems = new Array();
if(document.getElementById('filters-left')) {
mainBodyCenterFiltersItems.push(mainBodyCenterFiltersLeft);
}
if(document.getElementById('filters-right')) {
mainBodyCenterFiltersItems.push(mainBodyCenterFiltersRight);
}

mainBodyCenterFilters = new Ext.Panel({
flex: 0,
height: 30,
margins: '5 0 0 0',
baseCls: 'main-body-center-filters',
layout: {
type: 'hbox',
align: 'stretch'
},
items: mainBodyCenterFiltersItems
});

/* MAIN > BODY > CENTER > BOTTOM BUTTONS > LEFT */

mainBodyCenterButtonsBottomLeft = new Ext.Panel({
flex: document.getElementById('buttons-bottom-right') ? 0 : 10,
baseCls: 'main-body-center-buttons-left',
contentEl: 'buttons-bottom-left'
});

/* MAIN > BODY > CENTER > BOTTOM BUTTONS > RIGHT */

mainBodyCenterButtonsBottomRight = new Ext.Panel({
flex: 10,
baseCls: 'main-body-center-buttons-right',
contentEl: 'buttons-bottom-right'
});

/* MAIN > BODY > CENTER > BOTTOM BUTTONS */

var mainBodyCenterButtonsBottomItems = new Array();
if(document.getElementById('buttons-bottom-left')) {
mainBodyCenterButtonsBottomItems.push(mainBodyCenterButtonsBottomLeft);
}
if(document.getElementById('buttons-bottom-right')) {
mainBodyCenterButtonsBottomItems.push(mainBodyCenterButtonsBottomRight);
}

mainBodyCenterButtonsBottom = new Ext.Panel({
flex: 0,
height: 25,
margins: '5 0 0 0',
baseCls: 'main-body-center-buttons',
layout: {
type: 'hbox',
align: 'stretch'
},
items: mainBodyCenterButtonsBottomItems
});

/* MAIN > BODY > CENTER */

var mainBodyCenterItems = new Array();
if(mainBodyCenterNavigationTopItems.length > 0) {
mainBodyCenterItems.push(mainBodyCenterNavigationTop);
}
if(mainBodyCenterButtonsTopItems.length > 0) {
mainBodyCenterItems.push(mainBodyCenterButtonsTop);
}
mainBodyCenterItems.push(mainBodyCenterContentTop);
if(document.getElementById('content-bottom')) {
if(mainBodyCenterNavigationBottomItems.length > 0) {
mainBodyCenterItems.push(mainBodyCenterNavigationBottom);
}
mainBodyCenterItems.push(mainBodyCenterContentBottom);
}
if(mainBodyCenterFiltersItems.length > 0) {
mainBodyCenterItems.push(mainBodyCenterFilters);
}
if(mainBodyCenterButtonsBottomItems.length > 0) {
mainBodyCenterItems.push(mainBodyCenterButtonsBottom);
}

mainBodyCenter = new Ext.Panel({
region: 'center',
margins: '0 5 0 5',
baseCls: 'main-body-center',
layout: {
type: 'vbox',
align: 'stretch'
},
items: mainBodyCenterItems
});

/* MAIN > BODY > RIGHT */

mainBodyRight = new Ext.Panel({
region: 'east',
width: 6,
baseCls: 'main-body-right'
});

/* MAIN > BODY */

mainBody = new Ext.Panel({
region: 'center',
baseCls: 'main-body',
layout: 'border',
items: [mainBodyLeft, mainBodyCenter, mainBodyRight]
});

/* MAIN > FOOTER > LEFT */

mainFooterLeft = new Ext.Panel({
region: 'west',
width: 7,
baseCls: 'main-footer-left'
});

/* MAIN > FOOTER > CENTER */

mainFooterCenter = new Ext.Panel({
region: 'center',
baseCls: 'main-footer-center'
});

/* MAIN > FOOTER > RIGHT */

mainFooterRight = new Ext.Panel({
region: 'east',
width: 11,
baseCls: 'main-footer-right'
});

/* MAIN > FOOTER */

mainFooter = new Ext.Panel({
region: 'south',
height: 20,
baseCls: 'main-footer',
layout: 'border',
items: [mainFooterLeft, mainFooterCenter, mainFooterRight]
});

/* MAIN */

main = new Ext.Panel({
region: 'center',
margins: document.getElementById('user') ? ('0 9 0 ' + (document.getElementById('menu') ? '7' : '13')) : ('15 9 0 ' + (document.getElementById('menu') ? '7' : '13')),
baseCls: 'main',
layout: 'border',
items: [mainHeader, mainBody, mainFooter]
});

/* VIEWPORT */

var viewportItems = new Array();
if(document.getElementById('user')) {
viewportItems.push(header);
}
if(document.getElementById('menu')) {
viewportItems.push(menu);
}
viewportItems.push(main);

viewport = new Ext.Viewport({
layout: 'border',
cls: 'container',
items: viewportItems
});

},

expand: function() {
header.hide();
menu.hide();
main.margins = '15 9 0 13';
viewport.doLayout();
}

};

}();
Ext.EventManager.onDocumentReady(layout.init, layout, true);