Two hidden panels at the same place

[Shadin_a]

Hi all

Would you take a look at this :
http://dev.sencha.com/deploy/ext-4.0...rum/forum.html

As you can see, when you click on 'Preview Pane' button, the hidden panel will be shown at bottom of the panel.
I need to do something like that but with 2 buttons and 2 hidden panels at the same place (bottom).

It would be something like :


border_1.pngborder_2_.pngborder_3_.png


The bottom panels must be hidden at the beginning, and shown depending on buttons clicks.

Before I start, I need to know your opinions on best technique to accomplish that.
Note. I am using Extjs 4 with Sencha Architect 2


Thanks

[Zdeno]

I think there is many correct ways how to solve your problem. E.g. you can create:

1) South panel {split: true, region: 'south', height: 100, itemId: 'xx', layout: 'fit', items: []}
2) Add two panels to this south panel (2nd will be hidden)
3) Add event - when you click button 1 you will show panel1, hide panel2 and backwards when you click 2nd button

[Shadin_a]

Thank you so much Zdeno
What if I need this south panel to be hidden initially ? and shown up with right inner panel depending on buttons clicks ?

[Zdeno]

Nothing difficult. Just show/hide south panel when you need it. You have two choices:
a) create hidden south panel
b) add panel when you need it and then test if panel already exists.

[Shadin_a]

So this south panel must be card layout right? in order to switch between two inner panels

[Zdeno]

Nah just two panels. Imagine two divs on same location with same dimensions. You will hide/show that panels like tab panel.

[Shadin_a]

test if panel already exists.

using isHidden() right ?

[Zdeno]

Nope in second case you will create new panel. You need test if this panel already exists or not. For you will be the best first case - just create south panels with two panels inside (2nd will be hidden).

[Shadin_a]

Thanks!! it works great!

[nagalla038]

If possible can you please share a sample code for this?