Results 1 to 7 of 7

Thread: Floating Panel, expands instead of floating ..

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    23
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    23
    Vote Rating
    1
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    23
    Vote Rating
    1
      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 Premium Member
    Join Date
    Feb 2012
    Location
    Paris
    Posts
    122
    Answers
    2
    Vote Rating
    67
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •