Dynamically Change Layout

[DBaker]

Has anyone tried to dynamically change the layout based on an item is clicked on the navigation tree?

I modified the default layout to have a north region, but I also need to add an east region for one of the links in my navigation tree.

When my app initially loads, I'm overriding the default layout using this code to create a north region (portions of this code was borrowed from galdaka's site http://www.jadacosta.es/):


Ext.override(Ext.nd.DominoUI, {
createDominoUI:function(){
this.viewport=new Ext.Viewport({
layout:'border',
id:'extnd-viewport',
items:[{
region:'north',
height:106,
border:false,
items:[{
border:true,
height:83,
cls:'header'
},
new Ext.Toolbar({
items:[
' ',
'Welcome ',
{
text:'<b>' + document.forms[0].username.value + '</b>'
},
new Date().format("\\T\\o\\d\\a\\y \\i\\s l F d, Y"),
'->',
' ',
'',
'->',
'-',
' ',' '
] // end toolbar items
}) // end toolbar
] // end north panel items
},{
xtype:'panel',
layout:'fit',
region:'west',
collapsible:true,
id:'xnd-outline-panel',
title:Ext.nd.Session.currentDatabase.title,
split:true,
width:200
},{
xtype:'tabpanel',
region:'center',
id:'xnd-center-panel',
enableTabScroll:true,
activeTab:0,
items:[{
id:'xnd-grid-panel',
layout:'fit',
title:'Loading view...'
}]
}] // end all items
}); // end Viewport
this.outlinePanel=Ext.getCmp('xnd-outline-panel');
this.viewContainer=Ext.getCmp('xnd-grid-panel');
this.tabPanel=Ext.getCmp('xnd-center-panel');
this.tabPanel.on('beforeremove',this.fixIFrame,this);
} // end createDominoUI function
} // end Ext.nd.DominoUI
) // end Ext.overrideThen when I click on a link in my tree navigation, I'm trying to add an east region by opening a form with this code in the JS Header. The code in red is from the complex layout example http://www.extjs.com/deploy/dev/examples/layout/complex.html, it creates the new east region. The code in blue is where I'm trying to change the layout when the form renders.

But when the layout never changes to show the east region.

Any ideas?
Thanks.


Ext.override(Ext.nd.DominoUI, {
createDominoUI:function(){
this.viewport=new Ext.Viewport({
layout:'border',
id:'extnd-viewport',
items:[{
region:'north',
height:106,
border:false,
items:[{
border:true,
height:83,
cls:'header'
},
new Ext.Toolbar({
items:[
' ',
'Welcome ',
{
text:'<b>' + document.forms[0].username.value + '</b>'
},
new Date().format("\\T\\o\\d\\a\\y \\i\\s l F d, Y"),
'->',
' ',
'',
'->',
'-',
' ',' '
] // end toolbar items
}) // end toolbar
] // end north panel items
},{
xtype:'panel',
layout:'fit',
region:'east',
collapsible:true,
id:'xnd-east-panel',
title:'Test Title',
split:true,
width:200,
items:[{
html:'<p>Place Table/Grid Here</p>',
title: 'Allocated Amounts',
autoScroll:true
}]

},{
xtype:'panel',
layout:'fit',
region:'west',
collapsible:true,
id:'xnd-outline-panel',
title:Ext.nd.Session.currentDatabase.title,
split:true,
width:200
},{
xtype:'tabpanel',
region:'center',
id:'xnd-center-panel',
enableTabScroll:true,
activeTab:0,
items:[{
id:'xnd-grid-panel',
layout:'fit',
title:'Loading view...'
}]
}] // end all items
}); // end Viewport
this.outlinePanel=Ext.getCmp('xnd-outline-panel');
this.viewContainer=Ext.getCmp('xnd-grid-panel');
this.tabPanel=Ext.getCmp('xnd-center-panel');
this.tabPanel.on('beforeremove',this.fixIFrame,this);
} // end createDominoUI function
} // end Ext.nd.DominoUI
) // end Ext.override


var myApp = function(){
var showBtn, dialog;
return {
init : function() {
var empID = Ext.get( "CurrentEmpNo" );

var view3 = new Ext.nd.UIView({
viewName : 'YourOrgBonus',
showSingleCategory : document.forms[0].CurrentEmpNo.value,
showCategoryComboBox: false,
gridConfig: {
renderTo : 'yourorg',
width:800,
height:400
}
});

this.ui = new Ext.nd.DominoUI({
uiOutline : {outlineName: 'mainOL', useOutlineIcons: true},
uiView : {viewName: 'Home Page', viewTitle: 'Home', showSearch: true}
});

var view2 = new Ext.nd.UIView({
viewName : 'YourOrgBonusAdmin',
showSingleCategory : document.forms[0].CurrentEmpNo.value,
gridConfig: {
renderTo : 'yourorgadmin',
width:800,
height:400
}
});

} // end init
}; // end 'return'
}();

Ext.onReady(myApp.init, myApp, true);

Ext.onReady(function() {
var frm = new Ext.nd.Form();
frm.render();
});