1. #1
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    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 Ext.layout.AccordionLayout

    Ext.layout.AccordionLayout


    Messing with creating custom layouts and why not use CSS3, I have stumbled accross a demo of an accordion style menu (http://www.paulrhayes.com/experiments/accordion/) and Bucs in the forum has been waiting for Sencha to create it but it peaked my interest also. So here it is!

    GitHub - https://github.com/mitchellsimoens/E...ccordionLayout
    Demo - http://www.simoens.org/Sencha-Projects/demos/

    Let me know what you think!
    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.

  2. #2
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Really cool. I am sure I will find a use for it in the future.

    What about adding some rotating "arrow" indicators like in this control:

    http://www.winktoolkit.org/documenta...accordion.html
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    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


    Shouldn't be a problem! I will be visiting Sencha next couple days so hopefully this weekend I can get to it or when I am at the hotel/airport/plane I can get to it
    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.

  4. #4
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Hi

    @mitchel This will be very useful for many . In Additional to arrow, could you provide a background gradient to distinguish each headers.

    @Simon, hope you had seen more features and components in wink. The do got many cool components.
    What do you think ?

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    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


    Quote Originally Posted by tomalex0 View Post
    @mitchel This will be very useful for many . In Additional to arrow, could you provide a background gradient to distinguish each headers.
    I will have a default one but will also add a CSS class to the header.
    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.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    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


    Quote Originally Posted by SimonFlack View Post
    What about adding some rotating "arrow" indicators like in this control:
    Done!

    Quote Originally Posted by tomalex0 View Post
    @mitchel This will be very useful for many . In Additional to arrow, could you provide a background gradient to distinguish each headers.
    Done!

    Github and online demo is updated
    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.

  7. #7
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    This might be a bug: You cant open and close the same panel twice in a row. I.E You first need to open another panel.

    Reproduce: Open "Two", close "Two", open "Two" again.

    Looks great by the way!
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    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


    Quote Originally Posted by SimonFlack View Post
    This might be a bug: You cant open and close the same panel twice in a row. I.E You first need to open another panel.

    Reproduce: Open "Two", close "Two", open "Two" again.

    Looks great by the way!
    Was just told about this. I think it is because I have made the panels now collapsible to which I am going to add this as a config to allow all panels to be collapsible at the same time.
    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.

  9. #9
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Mitchell, so sorry I haven't responded earlier to this, been under more tight deadlines. This is a great start on a sorely needed accordion and I definitely appreciate you efforts on this.

    I haven't have time to play with this other than poking on the demo for a few minutes. Seems like you can only open a panel level one time. In other words, you cannot open, close, then open the same panel again, not sure if that is a bug or by design.

    The reason this control is so valuable on the mobile is because navigating a lot of vertical content can get very cluttered, very quickly...especially when you need to present a lot of options. The ability to collapse this info down until needed really makes the usability of vertical content much more pleasurable for the the user.

    Again, I haven't looked at the config options yet, but hopefully the control does not need to have a predefined height, or require a 'fit' layout. Reason is that most pages will need to have page footers or other content below the accordion that will need to get pushed down with the accordion opens. Not sure if the control has to be defined in a panel of a certain height and then it slides open to fit that predefined height or what.

    Also, can you config the panel sections from a store or programmatically by chance?

    Anyway, very good start and thanks for your effort on this! Hope to get into this soon as I really need this functionality in a lot of projects

  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    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


    No problem Bucs!

    I did some work this morning...
    • There is a config option ("allowCollapse") that if set to true will allow all items to be collapsed. If false, one item will always be expanded.
    • Bug fix that wouldn't allow an item to be clicked on multiple times!
    • Did a bug fix to calculate the size of each item when expanded. This was bugging me and turned out to be a simple fix.
    • Also have 4 events to be more like other layouts: beforeactivate, activate, beforedeactivate, deactivate. Pretty self explanatory

    **NOTE** Since you can collapse all items, they may stack up and go off screen. If you make the parent Panel vertically scrollable, it will scroll to the others as expected. Will scroll when one is expanded too. There is a minHeight config that defaults to 150px.

    What else you guys want? Working pretty good for my quick tests.

    Demo and GitHub have been updated.
    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.

Similar Threads

  1. Ext AccordionLayout
    By yogeshmsharma in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 8 Feb 2010, 1:34 AM
  2. AccordionLayout bug?
    By timefortea in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 13 Dec 2008, 12:09 PM
  3. AccordionLayout bug
    By timefortea in forum Ext GWT: Bugs (1.x)
    Replies: 0
    Last Post: 19 Nov 2008, 9:27 AM
  4. AccordionLayout
    By jamestasc in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 7 May 2008, 8:41 AM

Thread Participants: 11