1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    21
    Vote Rating
    1
    Shadin_a is on a distinguished road

      0  

    Default Two hidden panels at the same place


    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

  2. #2
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    747
    Vote Rating
    70
    Zdeno is just really nice Zdeno is just really nice Zdeno is just really nice Zdeno is just really nice

      1  

    Default

    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

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    21
    Vote Rating
    1
    Shadin_a is on a distinguished road

      0  

    Default

    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 ?

  4. #4
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    747
    Vote Rating
    70
    Zdeno is just really nice Zdeno is just really nice Zdeno is just really nice Zdeno is just really nice

      1  

    Default

    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.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    21
    Vote Rating
    1
    Shadin_a is on a distinguished road

      0  

    Default

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

  6. #6
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    747
    Vote Rating
    70
    Zdeno is just really nice Zdeno is just really nice Zdeno is just really nice Zdeno is just really nice

      1  

    Default

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

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    21
    Vote Rating
    1
    Shadin_a is on a distinguished road

      0  

    Default

    Quote Originally Posted by Zdeno View Post
    test if panel already exists.
    using isHidden() right ?

  8. #8
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    747
    Vote Rating
    70
    Zdeno is just really nice Zdeno is just really nice Zdeno is just really nice Zdeno is just really nice

      1  

    Default

    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).

  9. #9
    Sencha User
    Join Date
    Sep 2012
    Posts
    21
    Vote Rating
    1
    Shadin_a is on a distinguished road

      0  

    Default

    Thanks!! it works great!

  10. #10
    Sencha User
    Join Date
    Aug 2012
    Posts
    34
    Vote Rating
    0
    nagalla038 is on a distinguished road

      0  

    Default

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

Thread Participants: 2

Tags for this Thread