1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    23
    Vote Rating
    1
    Tatonka is on a distinguished road

      0  

    Default Unanswered: Floating Panel, expands instead of floating ..

    Unanswered: Floating Panel, expands instead of floating ..


    Hi,

    I am trying to add a floating help section to the website I am working on right now. The idea was to use a floating panel, that would float in above the main content of the website, thus not disrupting the views.

    Now I have to problems with the implementation.
    1. I can't invoke the expand/collapse "manually", as in the user click the "open help" button. toggleCollapse or expand lead to a regular expand instead of a floating in ..
    2. and the other point is sort of related .. I want the remove the header bar when the panel is collapsed. As said, the user can use the help button, so there is no need for the header bar to take up space all the time.

    I made a little js fiddle illustrating the problem ..
    http://jsfiddle.net/rY33L/1/

    Any help is appreciated.

    Thanks
    T.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,545
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So the panel is collapsed by default then you want it to expand over but the body of the panel will float above the rest?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    23
    Vote Rating
    1
    Tatonka is on a distinguished road

      0  

    Default


    Sorry for the late reply .. it is my first day back on the project after the holidays.

    So what I am aiming for is the behaviour of the panel when you click the header bar (on the right side). Then the panel is rendered but floats "on top" of the main body. The whole thing should be triggered by clicking the button though.

    When clicking the button however, the panel is becoming part of the layout, pushing the main content aside.

    Thanks for your help.

    T.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,545
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It will have to be floating, otherwise the panel will always be within the parent panel and therefore will show "under"
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    23
    Vote Rating
    1
    Tatonka is on a distinguished road

      0  

    Default


    Thanks for the answer.

    So in the jsfiddle example the "help/float" panel is set to floatable true and that works well when opening it with a click on the header bar .. it is only when trying to open it using a method call (currently I used panel.expand, but that is obviously wrong) it behaves so differently.

    Is there an easy way to position a panel (outside the main layout) on the right edge of the screen and have it float in from there other than calculating the new position every time the browser window changes?

    Thanks again for taking the time.

    T.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Paris
    Posts
    111
    Vote Rating
    1
    Answers
    2
    Tchinkatchuk is on a distinguished road

      0  

    Default


    Hi !!
    I need to do exactly the same in the bottom of my app.
    I need a collapsible panel to expand on click but while floating.

    I've check your jsFiddle.

    Did you find the answer ?

    Thanks.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    23
    Vote Rating
    1
    Tatonka is on a distinguished road

      0  

    Default


    Nope, sorry never found a solution. We ended up not using a floating panel in the end.

    Given the experience now, I would certainly use a separate panel (not embedded in the viewport) and position it manually via a controller. Then opening and closing it while floating should be rather straight forward. So pretty much what Mitchell suggested in the first place :-)

    Best
    T.