1. #1
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default Ext.ux.FlexAccord - resizable accordion panels with drag/drop

    Ext.ux.FlexAccord - resizable accordion panels with drag/drop


    With Ext 3.0 final coming up, conjoon 0.1RC1 is raring to go. Along with new features there was also an improvement regarding the "quick panels" - panels that contain widgets to access often needed functionality.
    Using the usual AccordionLayout, I faced the problem that I wanted to keep more than one panel expanded at a time - and even drag/drop panels to re-order their positions. This is why I worked on Ext.ux.FlexAccord, which gives the following features:

    • LayoutManager for holding collapsible panels with either fixed or flexible heights
    • Functionality for expanding more than one panel at a time
    • SplitBars for resizing panels vertically
    • Drag/Drop for re-ordering panels or changing panel-positions within containers that use the same LayoutManager



    The following screenshot shows Ext.ux.FlexAccord in conjoon - the left/right panel both use Ext.ux.FlexAccord as the LayoutManager:



    The project home can be found at http://code.google.com/p/ext-ux-flexaccord/.

    An example implementation can be viewed at http://www.siteartwork.de/flexaccord.../twopanel.html

    P.S.:
    The code is currently in Beta state and needs some cleanup.

  2. #2
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default


    Nice - is this Ext 3 only, or does it work with 2.2.1, too?

  3. #3
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Quote Originally Posted by temporary View Post
    Nice - is this Ext 3 only, or does it work with 2.2.1, too?
    I have started to work on this extension with Ext 2.2.1, but moved to 3.0 once it was available. There's nothing fancy going on so it _might_ still work with 2.*, but no guarantee on that. The example uses Ext3.0RC2 btw.

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Stellar!! That's awesome Thorsten!

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    321
    Vote Rating
    3
    Scorpie is on a distinguished road

      0  

    Default


    Very nice!
    I`m from Holland!

  6. #6
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Thanks for the feedback so far. I have just commited a new version which solves a few sizing issues, mainly when it comes to panels within a FlexAccord-Container that are using toolbars. See the changeset for details.

  7. #7
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default V0.1 released

    V0.1 released


    I have just tagged V0.1 of Ext.ux.FlexAccord - for a complete list of changes see http://code.google.com/p/ext-ux-flexaccord/source/list

    There have been made a number of optimizations regarding drag/drop functionality and calculation of sizings.

  8. #8
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Vote Rating
    10
    bt_bruno will become famous soon enough

      0  

    Thumbs up


    Very impressive dude! Thanks for sharing.

  9. #9
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,406
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    Very nice indeed!

    One request that I wish was fixed in the Ext accordion: When expanding/collapsing a panel, it animates, then the other panel jerks to take up the space. Try this example:

    http://jqueryui.com/demos/accordion/mouseover.html

    Here, one panel gets bigger while the other shrinks in unison. A lot smoother than the Ext way.

  10. #10
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default Ext.ux.FlexAccord V0.1.1 released

    Ext.ux.FlexAccord V0.1.1 released


    Just commited 0.1.1 to the repository - this is a maintanance released which solves a few issues - see http://code.google.com/p/ext-ux-flex...rce/detail?r=9 for all teh changes that made it into this release.



    Quote Originally Posted by stever View Post
    Very nice indeed!

    One request that I wish was fixed in the Ext accordion: When expanding/collapsing a panel, it animates, then the other panel jerks to take up the space. Try this example:

    http://jqueryui.com/demos/accordion/mouseover.html

    Here, one panel gets bigger while the other shrinks in unison. A lot smoother than the Ext way.
    Well, this is rather complicated since this is something the layout manager in the Ext library handles - one had to inspect the css for those panels to see how they handle sizings, which might differ from the way Ext JS does it. The only way I could think of right now would be to attach two simultaneously animation effects (one for collapsing, one for expanding), which might look jerky as well.