PDA

View Full Version : How do I switch panels in a layout?



michael.prichard
1 May 2007, 1:03 PM
I set up a BorderLayout with a few ContentPanels. Basically, one of the panels is a simple search box with a button. I will have a link that says "Advanced Search" and I want that to switch out this content panel with the advanced search div. How do I do this?

Here is the layout code:


var layout = new Ext.BorderLayout(document.body, {
north: {
initialSize: 75,
autoScroll:false,
split:true
},
center: {
autoScroll:false,
split:true
},
south: {
split:true,
initialSize: 300,
minSize: 20,
autoScroll:true,
collapsed:true,
collapsible:true,
titlebar: true
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('simple', {title: 'Search', fitToFrame:true }));
layout.add('center', new Ext.ContentPanel('list', {title: 'List', fitToFrame:true }));
layout.add('south', new Ext.ContentPanel('preview', {title: 'Preview' }));
layout.endUpdate();


Here is the html code:



<div id="container">

<div id="simple">
stuff <br />
<div id="myButton" ></div>
</div>

<div id="advanced" class="x-layout-inactive-content" >
advanced search form
</div>

<div id="list" class="x-layout-inactive-content" >
list stuff
</div>

<div id="preview" class="x-layout-inactive-content" >
preview pane
</div>

</div>


I guess I need to figure out what the handler function would need to do to switch panels. Or should I do this with tabs?

Thanks,
Michael

tryanDLS
1 May 2007, 1:20 PM
You could build both and just hide/show the appropriate one. Or, you might consider just building one panel with 2 divs and just one based on search type.

michael.prichard
2 May 2007, 8:17 AM
what do you mean by building both and hiding one or the other? Can you give a quick example?

Thanks!

tryanDLS
2 May 2007, 8:26 AM
All the panels in a region don't necessarily have be visible. See the layoutRegion doc for showpanel and hidepanel.

michael.prichard
2 May 2007, 10:26 AM
so i can add more than one panel to a region? how do i access those with a call?

thanks,
Michael

TopKatz
2 May 2007, 10:40 AM
layout.getRegion('your-region').showPanel('your-div');

michael.prichard
2 May 2007, 12:16 PM
awesome!

how do i get the "layout" object in my function call?

tryanDLS
2 May 2007, 2:07 PM
I would suggest you review the new layout tutorial (http://extjs.com/tutorial/using-layouts-ext-part-1) and also the complex layout example which will probably answer a lot of your questions.

michael.prichard
4 May 2007, 10:51 AM
Tim, Thanks! The tutorial helped a great deal.

The question I have now is, say I create my layout manager and want to reference it with say a link or another function. How do I get it? i.e.

var layout = Ext.get('myLayout')???

then I can call methods on that object again....

tryanDLS
4 May 2007, 11:09 AM
Usually you save that as var when you construct the layout, so you can get back to it. Doing an Ext.get on the id is just going to get you a wrapper around the div, not an actual Layout object.

michael.prichard
4 May 2007, 11:41 AM
ok got it....

BUT now that I do this to change it, it does not remove the previous div.



layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('advanced', {title: 'Search', fitToFrame:true }));
layyout.endUpdate();


it just show me two tabs....

I tried this with no luck...



layout.beginUpdate();
layout.remove('north');
layout.add('north', new Ext.ContentPanel('advanced', {title: 'Search', fitToFrame:true }));
layyout.endUpdate();


Ideas?

tryanDLS
4 May 2007, 11:53 AM
Adding multiple panels to a region turns them into tabpanels - it doesn't overwrite existing ones. The remove method removes a panel by id/name etc) - you are passing a region name. I would suggest you review the doc for the layout and panel methods.