mscifo
10-24-2006, 07:48 PM
I'm playing around with example 6 of the BorderLayout code. I've setup my center layout to have 2 possible nested layouts that I wish to be able to switch dynamically between (defaultLayout and wideLayout). Before I show a specific layout, I need to remove the others to ensure that only the selected one shows. When I goto remove the layout...
// remove all layouts before displaying the selected layout
try { this.layout.remove('center', 'defaultcontent'); } catch(e) { alert(e); }
try { this.layout.remove('center', 'widecontent'); } catch(e) {alert(e);}
I get an error "TypeError: panel.el() is not a function". I believe the problem is because the remove is trying to recursively remove any existing nested panels from the removed panel as well. It appears that the remove() allows the panelId or the panel object as an argument. It is currently using the panelId, which is causing the panel.el() error.
Any suggestions howto fix this or maybe another way of going about this task?
Thanks
-Matt
init : fuction(){
this.layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
autoScroll: true,
collapsible: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
south: {
split:true,
initialSize: 25,
collapsible: true
},
center: {
autoScroll:true
},
});
this.layout.beginUpdate();
this.layout.add('north', new YAHOO.ext.ContentPanel('north'));
this.layout.add('south', new YAHOO.ext.ContentPanel('south'));
this.layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
this.layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
this.layout.add('east', new YAHOO.ext.GridPanel(this.propsGrid, {title: 'Properties', closable: true}));
this.layout.getRegion('east').collapse();
this.layout.endUpdate();
this.defaultLayout = new YAHOO.ext.BorderLayout('defaultcontent', {
south: {
split:true,
initialSize: 250,
minSize: 100,
maxSize: 500,
autoScroll:true,
titlebar: true
},
center: {
}
});
this.defaultLayout.beginUpdate();
this.defaultLayout.add('center', new YAHOO.ext.GridPanel(this.grid1));
this.defaultLayout.add('south', new YAHOO.ext.ContentPanel('post-body', {title: 'Main', closable: false}));
this.defaultLayout.add('south', new YAHOO.ext.ContentPanel('center1', {title: '', closable: true}));
this.defaultLayout.getRegion('south').showPanel('post-body');
this.defaultLayout.endUpdate();
this.wideLayout = new YAHOO.ext.BorderLayout('widecontent', {
east: {
split:true,
initialSize: 250,
minSize: 100,
maxSize: 500,
autoScroll:true,
titlebar: true
},
center: {
}
});
this.wideLayout.beginUpdate();
this.wideLayout.add('center', new YAHOO.ext.GridPanel(this.grid2));
this.wideLayout.add('east', new YAHOO.ext.ContentPanel('post-body', {title: 'Main', closable: false}));
this.wideLayout.add('east', new YAHOO.ext.ContentPanel('center1', {title: '', closable: true}));
this.wideLayout.getRegion('east').showPanel('post-body');
this.wideLayout.endUpdate();
this.showLayout('default');
},
showLayout : function(layout){
this.layout.beginUpdate();
// remove all layouts before displaying the selected layout
try { this.layout.remove('center', 'defaultcontent'); } catch(e) { alert(e); }
try { this.layout.remove('center', 'widecontent'); } catch(e) {alert(e);}
switch (layout) {
case 'wide':
this.layout.add('center', new YAHOO.ext.NestedLayoutPanel(this.wideLayout));
this.currentLayout = this.wideLayout;
this.currentLayoutRegion = 'east';
break;
case 'default':
default:
this.layout.add('center', new YAHOO.ext.NestedLayoutPanel(this.defaultLayout));
this.currentLayout = this.defaultLayout;
this.currentLayoutRegion = 'south';
break;
}
this.layout.endUpdate();
},
[/code]
// remove all layouts before displaying the selected layout
try { this.layout.remove('center', 'defaultcontent'); } catch(e) { alert(e); }
try { this.layout.remove('center', 'widecontent'); } catch(e) {alert(e);}
I get an error "TypeError: panel.el() is not a function". I believe the problem is because the remove is trying to recursively remove any existing nested panels from the removed panel as well. It appears that the remove() allows the panelId or the panel object as an argument. It is currently using the panelId, which is causing the panel.el() error.
Any suggestions howto fix this or maybe another way of going about this task?
Thanks
-Matt
init : fuction(){
this.layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
autoScroll: true,
collapsible: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
south: {
split:true,
initialSize: 25,
collapsible: true
},
center: {
autoScroll:true
},
});
this.layout.beginUpdate();
this.layout.add('north', new YAHOO.ext.ContentPanel('north'));
this.layout.add('south', new YAHOO.ext.ContentPanel('south'));
this.layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
this.layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
this.layout.add('east', new YAHOO.ext.GridPanel(this.propsGrid, {title: 'Properties', closable: true}));
this.layout.getRegion('east').collapse();
this.layout.endUpdate();
this.defaultLayout = new YAHOO.ext.BorderLayout('defaultcontent', {
south: {
split:true,
initialSize: 250,
minSize: 100,
maxSize: 500,
autoScroll:true,
titlebar: true
},
center: {
}
});
this.defaultLayout.beginUpdate();
this.defaultLayout.add('center', new YAHOO.ext.GridPanel(this.grid1));
this.defaultLayout.add('south', new YAHOO.ext.ContentPanel('post-body', {title: 'Main', closable: false}));
this.defaultLayout.add('south', new YAHOO.ext.ContentPanel('center1', {title: '', closable: true}));
this.defaultLayout.getRegion('south').showPanel('post-body');
this.defaultLayout.endUpdate();
this.wideLayout = new YAHOO.ext.BorderLayout('widecontent', {
east: {
split:true,
initialSize: 250,
minSize: 100,
maxSize: 500,
autoScroll:true,
titlebar: true
},
center: {
}
});
this.wideLayout.beginUpdate();
this.wideLayout.add('center', new YAHOO.ext.GridPanel(this.grid2));
this.wideLayout.add('east', new YAHOO.ext.ContentPanel('post-body', {title: 'Main', closable: false}));
this.wideLayout.add('east', new YAHOO.ext.ContentPanel('center1', {title: '', closable: true}));
this.wideLayout.getRegion('east').showPanel('post-body');
this.wideLayout.endUpdate();
this.showLayout('default');
},
showLayout : function(layout){
this.layout.beginUpdate();
// remove all layouts before displaying the selected layout
try { this.layout.remove('center', 'defaultcontent'); } catch(e) { alert(e); }
try { this.layout.remove('center', 'widecontent'); } catch(e) {alert(e);}
switch (layout) {
case 'wide':
this.layout.add('center', new YAHOO.ext.NestedLayoutPanel(this.wideLayout));
this.currentLayout = this.wideLayout;
this.currentLayoutRegion = 'east';
break;
case 'default':
default:
this.layout.add('center', new YAHOO.ext.NestedLayoutPanel(this.defaultLayout));
this.currentLayout = this.defaultLayout;
this.currentLayoutRegion = 'south';
break;
}
this.layout.endUpdate();
},
[/code]