PDA

View Full Version : Ext.layout.AccordionLayout



mitchellsimoens
20 Feb 2011, 11:29 AM
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/Ext.layout.AccordionLayout
Demo - http://www.simoens.org/Sencha-Projects/demos/

Let me know what you think!

SimonFlack
22 Feb 2011, 6:36 AM
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/documentation/wink/ui/layout/accordion/test/test_accordion.html

mitchellsimoens
22 Feb 2011, 7:05 AM
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 ;)

tomalex0
22 Feb 2011, 8:50 PM
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 ?

mitchellsimoens
23 Feb 2011, 12:16 PM
@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.

mitchellsimoens
23 Feb 2011, 4:43 PM
What about adding some rotating "arrow" indicators like in this control:

Done!


@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

SimonFlack
24 Feb 2011, 2:04 AM
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!

mitchellsimoens
25 Feb 2011, 9:13 AM
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.

Bucs
26 Feb 2011, 4:50 AM
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 :)

mitchellsimoens
26 Feb 2011, 6:41 AM
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 :D



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

Bucs
26 Feb 2011, 7:02 AM
Awesome Mitchell! I think the use case for this will more likely require a vertical page scroll than not, so I don't think you note is a problem.

And since you're asking what else :)

First, it would be cool to config this from an JSON object array or store. Again, haven't looked at the control yet, so this may already be possible. If you are manually required to configure the panels, no problem...I could wrap your control and push() items from a passed in object into the control.

Second, and this may be way more than others are wanting, but I think the ability to use the accordion in conjunction with the List or Nested List would be unreal. That would give you the ability to drill into a list and then when you get to say a leaf node, a click would open the accordion within the List and show sub options in some fashion. I know, that is a big request...but it is the "pie in the sky" that i am after. Might be good enough to simply slide in a new card with your accordion styled to look like your nested list. That would probably suffice, but you couldn't do "intra-list" at that point.

Lastly, is there a cls type property on the control to style the panel header look? That would be ideal. It would be optimal if you could set the height of these headers as well...as in my above scenario I may have a list that I am trying to mimic which may have slimmed down headers.

Thanks again for your efforts! I'll let you know when I start using this :)

mitchellsimoens
26 Feb 2011, 7:18 AM
First, it would be cool to config this from an JSON object array or store. Again, haven't looked at the control yet, so this may already be possible. If you are manually required to configure the panels, no problem...I could wrap your control and push() items from a passed in object into the control.

If you are familiar with a TabPanel, this will be very similar. As a test, I have 6 Panels in the items array each having a title property. The layout takes that title property and makes the header out of that.


Second, and this may be way more than others are wanting, but I think the ability to use the accordion in conjunction with the List or Nested List would be unreal. That would give you the ability to drill into a list and then when you get to say a leaf node, a click would open the accordion within the List and show sub options in some fashion. I know, that is a big request...but it is the "pie in the sky" that i am after. Might be good enough to simply slide in a new card with your accordion styled to look like your nested list. That would probably suffice, but you couldn't do "intra-list" at that point.

Haven't tried but will have to test this out to see if I can get it to work properly. May need to manage height/width sort of like FitLayout or AnchorLayout.


Lastly, is there a cls type property on the control to style the panel header look? That would be ideal. It would be optimal if you could set the height of these headers as well...as in my above scenario I may have a list that I am trying to mimic which may have slimmed down headers.

In the header, there is the class "x-accordion-item-header-wrap" that wraps the whole thing. The text is held in a h3 tag under this.

SimonFlack
26 Feb 2011, 7:20 AM
I second the list idea. I was just about to start looking into that myself after being inspired by your accordion. Being able to expand a list item would really be useful.

mitchellsimoens
26 Feb 2011, 7:21 AM
I second the list idea. I was just about to start looking into that myself after being inspired by your accordion. Being able to expand a list item would really be useful.

Seems it's not so I'm looking into it! :)

mitchellsimoens
26 Feb 2011, 3:24 PM
Check out Git and demo now! Total rewrite!

SimonFlack
27 Feb 2011, 2:52 AM
I cant close a panel after opening it. Otherwise it looks good. I have not looked at the source yet.

Bucs
27 Feb 2011, 8:18 AM
I want to check this out but looks like you demo site is down :(

mitchellsimoens
27 Feb 2011, 8:24 AM
I cant close a panel after opening it. Otherwise it looks good. I have not looked at the source yet.

The option to have it all collapsible is still there but have it off on the demo. Demo is just as basic as it can be. I will create a more in depth demo of it shortly!


I want to check this out but looks like you demo site is down :(

Tried it once I got email of your post so I went to my desktop computer and tried it and it works.


Side note... Would you guys like an option to "lock" the collapsibility of an item? Also to toggle to allow all collapse or require one? Just thinking of some other useful functions that someone may need in the future. I can see some application logic that could use these but what else?

mitchellsimoens
27 Feb 2011, 8:26 AM
With the rewrite, I also went from having several click handlers (one for each header) to just one. I had several just to get it working and finally got around to improving that yesterday.

Bucs
27 Feb 2011, 8:41 AM
Side note... Would you guys like an option to "lock" the collapsibility of an item? Also to toggle to allow all collapse or require one? Just thinking of some other useful functions that someone may need in the future. I can see some application logic that could use these but what else?


I like both of those, though I think it will start out fully collapsed in most cases.

One thing I noticed is the animation seems to get lost on the first and second items, the list panel and the one above it. Not sure what's up with that.

I think I can use this on a project I am starting next week and if so, I will have a lot of time to pound on it and offer suggestion and give feedback.

mitchellsimoens
28 Feb 2011, 5:17 AM
I like both of those, though I think it will start out fully collapsed in most cases.

OK, I will get that sometime this week!


One thing I noticed is the animation seems to get lost on the first and second items, the list panel and the one above it. Not sure what's up with that.

Really? I just tried again and everything is smooth.


I think I can use this on a project I am starting next week and if so, I will have a lot of time to pound on it and offer suggestion and give feedback.

Awesome! Do you have a GitHub account? If so, I can add you as a collaborator.

Bucs
28 Feb 2011, 7:51 AM
Cool...ok, I setup a feee (opensource) GitHub account as I didn't have one. My account is same as forum username, Bucs. What else do I need to do?

mitchellsimoens
28 Feb 2011, 7:55 AM
Cool...ok, I setup a feee (opensource) GitHub account as I didn't have one. My account is same as forum username, Bucs. What else do I need to do?

I have added you as a collaborator! Have you used Git or SVN before? Basically you can checkout my repository, make changes, commit and push your changes. To always have the updated code in case I change things also, do a pull before you start developing otherwise we can have collisions. There is tons of help for using Git but the main ones you need are:

git init
git checkout
git pull
git add
git commit
git push

Bucs
28 Feb 2011, 8:02 AM
Is Git SVN based? I use VisualSVN plug-in for my Visual Studio environment and currently setup and use cloud SVN server repos all the. Can I just point to the server repo address and pull down the solution, or web site? I'm used to working in Visual Studio so will need to see how the project is setup I guess.

mitchellsimoens
28 Feb 2011, 8:04 AM
No, but if you use SVN then Git is similar. Git has a good enough GUI for Windows if you want it.

Bucs
22 Mar 2011, 1:47 PM
Mitchell, the time has come where I need this so i am going to start reviewing it now and hopefully get it implemented. Two quicks things I'm looking for, hopefully you already have this:

1 - Ability to completely style list headers, button, and content
2 - Does the list have to always take up the full screen or container? I'd like the be able to start the list off in collapsed mode, and when it opens, just push down the content below it.

Thanks Mitchell, looking forward to using this.

mitchellsimoens
23 Mar 2011, 4:22 AM
1 - Ability to completely style list headers, button, and content

I have put CSS rules on almost everything. For instance, the header is basically a H3 and has it's own CSS. The button is also controlled by CSS. In fact, right now it is being displayed via CSS.


2 - Does the list have to always take up the full screen or container? I'd like the be able to start the list off in collapsed mode, and when it opens, just push down the content below it.

If you specify allowCollapse to true in the layout config, it will allow all items to be collapsed. It's false by default to require one be shown but that can be turned off.

Bucs
23 Mar 2011, 4:34 AM
Didn't get much of a chance to look into it last night, going to today but already I see it as being a great start. Two quick things I notice

1) I see that you are creating an H3 tab for the Header, and giving it a class of the itemCls name + 'header-wrap', but then are adding your own style to the class in the JS. How do we pass out own class to completely style the header? What property are we to use in the config? I tried to add a class for 'x-accordion-item-header-wrap' since that is the default, but the style you apply in the JS overwrites it.

2) The animation in the phone is not very good unfortunately...I have iPhone 4 with latest iOS. I may have to play around with the animDuration and easing and see if that helps.

But again, this is a great start...I think it'll definitely work for this project. Thanks again!

mitchellsimoens
23 Mar 2011, 5:02 AM
1) I see that you are creating an H3 tab for the Header, and giving it a class of the itemCls name + 'header-wrap', but then are adding your own style to the class in the JS. How do we pass out own class to completely style the header? What property are we to use in the config? I tried to add a class for 'x-accordion-item-header-wrap' since that is the default, but the style you apply in the JS overwrites it.

You are right. I just pushed changes to GitHub that strips that out to the CSS file. Also did a few code syntax changes. Just spacing colons and qual sign to be the same, nothing big there.


2) The animation in the phone is not very good unfortunately...I have iPhone 4 with latest iOS. I may have to play around with the animDuration and easing and see if that helps.

I did some testing on the iPad and it was just as good as my desktop. Are you testing it in my demo site? I can see that being slow. I will do some testing on my iPod to see how it is.

Bucs
23 Mar 2011, 3:50 PM
Mitchell, all is working pretty good...still not the best animation on the phone, even after taking animDuration down to 100 or so. But this is not a deal breaker. Not sure if it's a function of what I have going on graphically or listener wise on the page or what. When I push it up to an accessible site, I'll give you a link to check it out and see what you think.

The ability to inject components into the accordion sections is very powerful stuff, and using a layout to accomplish the accordion feel was brilliant imo.

Some other items that might be useful I think:

1) Maybe add some specific config properties for headerCls and panelCls to more intuitively identify what exactly is being styled. Took me a sec to figure out what itemCls pertained to, and even then, I still think it maybe a little confusing.

2) I have the need to style the first and last headers in the accordion, to give them a rounded look with the CSS border-radius property. This is pretty easy to achieve with a list using CSS and :last-child...but this didn't seem to work when applied to .x-layout-accordion:last-child h3 {...any ideas? I got around it by adding my own wrapper container, but not ideal.

3) Also think we may need a way to set the height of individual sections, and in a best case scenario, maybe have them size to the panel item's content or height if one is set.

Again, this is a fantastic start on an accordion control...EXTREMELY useful. Don't think I have even scratched the surface of what we can do with this control :)

mitchellsimoens
24 Mar 2011, 4:13 AM
itemCls is a class name that gets used in many places. Say for the header, it takes itemCls and appends "-header-wrap" so you get the same CSS structure but appends more details about it. If you do not like this approach, I can make the headerCls etc properties and use them instead. This way you can apply styles with .x-accordion-item .x-accordion-header {} I will make this change, it's needed :)

About the performance, we need to remember we are on mobile devices and DOM will take the biggest hit on performance. If we have 10 actual components rendered, the DOM will be expensive. The demo has only 1 component rendered. I don't count the Panels with just HTML as they are probably the minimal amount of DOM you will see in this. Thinking of a CardLayout approach, I render components on the activate event and destroy components on the deactivate event, wonder if we can take the same approach for this. Right now, It all renders and then when you click on a header, it show/hides components and sets the height to both (which is animated by the CSS3 transition setup at layout creation). This will take some thinking...

I will look into the getting of first/last items. May just be simple enough to add a class name to them.

Right now it will try to expand to take up the entire screen but also has a minimum height config. If the minimum height causes the headers to overflow the screen, if you have scroll set on the parent container, you can scroll to see the rest. I just have to get the height before the animation can take place. If the component is already rendered (thinking of the 2nd note here) then I can get the height of it. But if it's not rendered, I guess I will have to render the component and then get the height.

What are your thoughts?

mitchellsimoens
24 Mar 2011, 4:21 AM
itemCls is a class name that gets used in many places. Say for the header, it takes itemCls and appends "-header-wrap" so you get the same CSS structure but appends more details about it. If you do not like this approach, I can make the headerCls etc properties and use them instead. This way you can apply styles with .x-accordion-item .x-accordion-header {} I will make this change, it's needed :)

This has been pushed. Added headerCls which defaults to "x-accordion-header" and arrowCls which defaults to "x-accordion-arrow". I have kept itemCls as the components are items of the parent container.

Bucs
24 Mar 2011, 4:42 AM
This has been pushed. Added headerCls which defaults to "x-accordion-header" and arrowCls which defaults to "x-accordion-arrow". I have kept itemCls as the components are items of the parent container.


Cool, I'll check this out. I think it'll make it a little more intuitive in the way of styling the layout.



Right now it will try to expand to take up the entire screen but also has a minimum height config. If the minimum height causes the headers to overflow the screen, if you have scroll set on the parent container, you can scroll to see the rest. I just have to get the height before the animation can take place. If the component is already rendered (thinking of the 2nd note here) then I can get the height of it. But if it's not rendered, I guess I will have to render the component and then get the height.


Yes, I am already setting scroll on the panel items and that works great to scroll content within an open accordion panel. However, I am thinking of instance where I may have a long description in the first panel and maybe want to open that to say 150 px to see at least a paragraph or two at a time. But then the second panel I may want to display a carousel where the graphic heights are 100 px. If all panels open to a predefined height, then that would leave a lot of dead space below the carousel. Maybe we could check the item during the wrapping for a given height and use that to setup the wrapper? This would allow us to set heights at the item level.

mitchellsimoens
24 Mar 2011, 4:47 AM
Yes, I am already setting scroll on the panel items and that works great to scroll content within an open accordion panel. However, I am thinking of instance where I may have a long description in the first panel and maybe want to open that to say 150 px to see at least a paragraph or two at a time. But then the second panel I may want to display a carousel where the graphic heights are 100 px. If all panels open to a predefined height, then that would leave a lot of dead space below the carousel. Maybe we could check the item during the wrapping for a given height and use that to setup the wrapper? This would allow us to set heights at the item level.

Here is a proposal. By default, it will get the height of each item just before expand. But, to be inline with ExtJS3&4, they have a fill config option that will fill the screen, which is what it attempts now (unless minHeight is used). I will test this way out but tell me what you think. Teamwork on the forums :)

Bucs
24 Mar 2011, 5:01 AM
Hmmm, not familiar with the fill config and filling the screen is not always going to be the best case. In fact, when you are talking about the mobile web, I think you will rarely want to do this. In my opinion, the value of this accordion is that it becomes a tremendous vertical space saver/manager by allowing you to hide content on the page and only open/view when desired. But when it is opened, it will need to push down everything else below it...something I was able to achieve by making the container component an actual 'container' xtype rather than a panel. In any event, filling the screen is not a desirable effect in my use case, it just needs to be more of a "content manger" if you will, at the point in which it is inserted in the page. And when opened, it needs to push everything below it down.

So, while I can definitely see use cases for a screen fill, right now I see a lot more cases for it to not fill the screen, and simply force content below the according downwards on a scrolling page when opened. And allowing for the setting of individual heights can then accommodate specifically designed components in those panels.

Hope this all makes sense :)

mitchellsimoens
24 Mar 2011, 5:03 AM
It definitely does. Since the functionality is already there, it's just a matter of checking to see which height it should use. Working on the "dynamic" heights based on the item's height. Adding a maxHeight config because the list is almost 7,000 pixels long :-)

Bucs
24 Mar 2011, 5:11 AM
Totally, that is a great idea. Although....;)...it would be nice to have the maxHeight nullable so that the panel will open to the content size if no maxHeight is specified. But you probably already have that in mind :)

mitchellsimoens
24 Mar 2011, 5:12 AM
Totally, that is a great idea :) Although....;)...it would be nice to have the maxHeight nullable so that the panel will open to the content size if no maxHeight is specified. But you probably already have that in mind :)

Yup :-)

mitchellsimoens
24 Mar 2011, 5:31 AM
I just pushed some changes to GitHub. This includes the new maxHeight and fill config options. This also includes, what I am calling it, dynamic height. This is where it will expand to only the item's height.

By default, maxHeight and minHeight are undefined and fill is false. So if you expand an item, it will go to the item's height no matter how small or how big.

Bucs
24 Mar 2011, 5:35 AM
That sounds perfect, I'll give this a look in a couple.

Bucs
24 Mar 2011, 6:30 AM
Ok, the styling works perfect, much cleaner imo.

On the height stuff, I see two issues. Say we have the following scenario:



{
itemId: 'accordionProductDetail',
xtype: 'container',
fullscreen: false,
layout: {
type: 'accordion',
allowCollapse: true,
headerCls: 'accordion_header',
itemCls: 'accordion-item',
arrowCls: 'accordion-arrow',
maxHeight: 200
},
items: [
{ xtype: "panel", title: "Product Description", scroll: 'vertical', html: this.product.data.Description, style: "text-align: justify" },
{ xtype: "panel", title: "Section 2", html: "section 2 data..."},
{ xtype: "panel", title: "Section 3", html: "section 3 data..." }
]
}


1) The expansion of the first panel is working as expected, opens to the height of the content or if larger than the content, opens to the maxHeight. Perfect so far. But when the expansion caps the content that is larger than the maxHeight, the scroll: 'vertical' on the panel no longer works, you get the snap back effect, probably because the item's height is set to the maxHeight property right?

2) In most cases, when you use maxHeight, you will also want to use scroll attribute to account for larger content. And the opposite is true, if you are expecting large content that could potentially open larger than the screen height, you will not want to set the scroll attribute to vertical b/c you would never be able to scroll to content below the accordion. The problem comes when you do not set a maxHeight, and also do not allow scrolling (which is possibly the best use case as far as usability) if I scroll all the way down to the end of the item (which is say 2000 px), and click the next header, it collapses the large first header and the whole page disappears up above, and does not allow the page to be scrolled back up. So, wonder if we need to either scroll the page to the currently active index header (not ideal), or maybe add a property for allowAutoCollapse...which you can set to false so that multiple items can be open at the same time. Make sense? Too much?

mitchellsimoens
24 Mar 2011, 6:39 AM
The scrolling issue is a big deal. How can this be fixed and still allow the child item to be scrollable. Scrollbars are helpful :D

The only thing I can think of is set the max height dynamically based on the screen size to make sure the max height is not larger than the screen.

Bucs
24 Mar 2011, 6:46 AM
What about inserting a container object dynamically to contain the accordion item, and set the container's height to the maxHeight or content height? If the content height is greater than the maxHeight, dynamically add a scroll: 'vertical' to the container. This helps with the first issue, but not the second.

The only thing I see as mitigating the 2nd issue is that allowAutoCollapse property, and setting it to false. That way, the first panel would not collapse when the 2nd is clicked, causing the whole page to scroll up out of view.

mitchellsimoens
24 Mar 2011, 6:47 AM
There is a config option called allowCollapse that if set to true will allow all items to be collapsed at the same time.

Bucs
24 Mar 2011, 6:57 AM
Understood, but not really talking about the same things here. allowCollapse let's you collapse the whole accordion, which is needed for the initial state of the accordion...but the allowAutoCollapse is what happens to the other panels when you open one. To get around the second issue I mentioned, you would not want the first panel to collapse when the second one was opened if possible.

Right now, the is scrolling is an issue to the point that I might have to back down to the previous version.

Bucs
24 Mar 2011, 7:20 AM
This almost works:



forceAutoCollapse: true,
/**
* @cfg {String} easing
* Easing that animations will have.
* Default: 'ease-in'
*/




handleOwnerClick: function (e, t) {
e.stopEvent();
var me = this,
el = Ext.get(t),
itemEl = el.next().first(),
item = me.parseActiveItem(itemEl.id);

if (item === me.activeItem && me.allowCollapse) {
me.collapseItem(item);
} else {
if (me.forceAutoCollapse) {
me.collapseItem(me.activeItem);
}
me.expandItem(item);
}
},


However, didn't spend much time on this...gotta get some other stuff done today. But the problem with the above is that it will try to collapse the activeItem rather than the one that was clicked. So if you are clicking an open item that is not the activeItem, you have to click it twice, once to make it the active item, the second to allow the collapse to happen. We should be able to adjust this code to work though...but this essentially fixes the 2nd issue I mentioned. Need to figure out something for the first.

But I like the ability to have multiple items opened at the same time!

mitchellsimoens
24 Mar 2011, 10:27 AM
I added the config for allowAutoCollapse. If set to false, it will not collapse the previously expanded item when another item is expanded. If the flag is changed, the next time an item is expanded, all items will be collapsed.

Also made a change that if allowCollapse is set to false (default is false) and there is no activeItem specified, it will default to zero and expand the first item. This is because due to that allowCollapse requires an item be expanded at all times.

Next to figure out scrolling. Still not sure what I am going to do there.

Bucs
4 Apr 2011, 3:09 PM
Hey Mitchell, getting back to looking at this...it's working quite well when I need to add dynamic text to panels by setting the Html property. However, I now need to create a form and load into a collapsed panel. Think this is possible? I put together quick test and it's not working, not rendering much of anything, though it look like it's trying to render the container panel. Any ideas?

Bucs
4 Apr 2011, 4:19 PM
Simply trying to do this, and can't seem to make the form display the fields. When walking through the code, the form and the fields are there in the components...but I think there is an issue with rendering child components of the outer container. Here is a basic version of the code I am using:



items.push(
{ xtype: "panel", title: "Product Description", html: this.product.data.Description, style: "text-align: justify" },
{
xtype: "form",
title: 'Test Form',
height: 100,
defaults: {
labelWidth: '35%'
},
items: [
{
xtype: 'textfield',
label: 'Test1',
value: '1'
},
{
xtype: 'textfield',
label: 'Test2'
}
]
}
);

this.productDetailAccordion = new Ext.Container({
items: {
itemId: 'accordionProductDetail',
xtype: 'container',
fullscreen: false,
layout: {
type: 'accordion',
allowCollapse: true,
headerCls: 'accordion_header',
itemCls: 'accordion-item',
arrowCls: 'accordion-arrow',
forceAutoCollapse: false
},
items: items
},
//baseCls: 'productDetail_Form',
renderTo: this.el.down('.productDetailAccordionArea')
});


I am getting the dark gray border of the form, with like 8 or so pixels of padding, but not fields. After looking at the Elements, it's not rendering anything inside the of the <form> tag...but I do get that tag.

Is this problem with the renderItem method or the wrapItem? Since you were able to get the List to work inside a panel, that is much more complication that this simple form...so I'm sure this is doable.

Thanks for any ideas on this!

Bucs
12 Apr 2011, 11:26 AM
Bump :)

Hey Mitchell, any ideas on the above issue regarding getting a form to display in the accordion? Check out the new app I just posted on the Examples forum for Markertek (gave credit to you:)) and use Shop by Catgory, Accoustic Materials, Accoustic Blade Tiles, then the first item, part #BT2. Scroll down and you'll see the accordion in use for the Descriptions and special message. Side note...those performance issues I had mentioned before do not seem to be there now, so that is great. But look below the accordion to the Variations form...I'd like to get that form in an accordion tab...but I can't get even the simplest form to display in the accordion....looking for any ideas you may have.

Thanks again...I am getting ready to dig into this further but was hoping you know right off hand what the issue is. If not, and I find something, I'll post back. Thanks again for your work here...greatly appreciated!

mitchellsimoens
12 Apr 2011, 12:15 PM
Looks like when the form is added, it is reporting a small height. In my case it is a height of 36 pixels. Will have to investigate this more

Bucs
12 Apr 2011, 12:27 PM
I think the small height is related to the fact that it actual IS only that tall because it's not rendering any of the child items of the form, only the form tag itself. If you use the code from my previous post and look at the elements generated in the accordion, none of the form fields get rendered, only the form container.

Thanks for looking at this...also saw the new Infinite Carousel, pretty sweet...wil definitely be looking into that.

Bucs
19 Apr 2011, 6:51 AM
Mitchell, are you still open to some discussions on the Accordion? I am having a few problems with it, may be related to some small changes I made, not sure. Right now, it takes two clicks on the header to open it up. The first click fires everything, including the arrow rotation, but nothing opens because the height of the item associated with the header reports as 0 from the getHeight() call. Is this b/c it's hidden? I know before, you had it opening to a specific height, either a minHeight or one that was set on the item. Then after my request, you went back and adjusted to open to the height of the contained item. I think the issue I am experiencing with the heights now is also related to the above form issue.

Basically, if the control renders in collapsed mode, and I click the first item, at what point does the control know the height to expand the clicked item? Are you assigning these heights during the renderItem call? I think the problem is that this is reporting 0 heights for all items since we added the change to allow all items to be collapsed.

Would really love to get this component more robust as it is highly useful. I see that you are now working with Sencha, congrats...that's awesome! Any chance this layout can get some more attention as a result? :)

mitchellsimoens
19 Apr 2011, 6:58 AM
Components need to be rendered hidden or else they will show no matter if they are "collapsed" or not. Some "way out there" thinking I have now is that render the Component under the headers and then move that Component to be aligned to the bottom of the header. This way the Component can be rendered without being hidden and then we would get the correct height. Shouldn't be too hard I wouldn't think, just getting the bottom x,y coords of the header and move the Component. Would need to test in different layouts to make sure it will work as expected.

Thanks! Right now all devs are working on ExtJS 4 and once the final is released they are going to take a short vacation (well needed) and then work on Sencha Touch 2.0 to bring it inline with ExtJS 4 way of things. I will be voicing some suggestions as what I would like to see when they start on that. This layout and my gridpanel will be high up on my list of wants :D

Bucs
19 Apr 2011, 7:36 AM
Thanks Mitchell, and hate to look a gift horse in the mouth, but are you planning on looking at that any time soon? I have a project right now that is in dire need of a "menu" accordion, and is a deal breaker if they don't get it. That's what happens when creative delivers the look and feel on a PDF regardless of whether we have the controls they are drawing on the page :)

What I am thinking here is that we may want to do away with the ActiveItem concept and move towards an OpenItems array property on the layout container. If you click a header, it would check the OpenItems array to see if the item is already there, if so, it collapses it, if not, it opens it. This would allow multiple items to remain in an open state which is very useful when considering the vertical design and scrolling of mobile apps. I know others might prefer the control as you have it, where the control is deigned to expand/collapse its child panels only within the constraints of a parent container, but I would much prefer the former...not sure if it is possible to do both. It would take more work.

Also, along these line, embedding lists into the accordion are going to be MUCH more functional when the list itself is not scrollable. The reason being, if I have a panel that open up and display a list that expands below the bottom of the device, it's going to be very awkward to try to scroll the container page down to get to headers that are below the one that just opened up. So, in a best case scenario, the panel would open up to accommodate the number of items in the list. I am doing this now with the Nested list by overriding the beforecardswitch, counting the number of items in the list, and multiplying by the height of one item and then setting the control height, and turning off scrolling on the card lists. This way, the whole page scrolls yet allow for the nested lists to grow or shrink in size.

If we could get the accordion to handle list controls in this fashion, that would be unreal. Do you think your concept of rendering components behind the header and then moving would work for dynamically sizing the expanded panels to accommodate the height of list components? We would obviously have to get the list data first, maybe in the "expand" event.

Hope I am making sense here...

nabulaer
4 May 2011, 1:10 AM
Hi,
I am looking to see if any progress is being made as to use a JSON data list to dynamic create the accordion layout as suggested prev on this thread ...

I am looking for a list that uses collapsable grouping headers.

Bucs
4 May 2011, 6:21 AM
This can be done, I just did it on a staging site...not sure how long I can leave this link up but here (http://livingspaces.staging.madmobile.com) is what it looks like. You can return your JSON however you like, but I bring it back in a hierarchical fashion almost like what I would do for a TreeView though it's not necessary. You just need a object array to hold the header info where each object has a sub property to hold the submenu items.

I pass this whole data structure into a method that I use to draw the accordion layout and then render the whole structure to a predefined div with a class in the page layout.

Here is my code to do build @Mitchell's accordion layout as a drill down menu (all props go to him). GIve it a peak and see if it will help you ge the job done or let me know if you run into problems. I need to get with Mitchell when he has the time and figure out why there is a little delay on the sub item click. I have also tweaked his source slightly that I can post if you cannot get things to work with his codebase. The trick I found (mentioned above I think) is to render the layout behind everything so all the heights are known then run an method I added to collapse all the headers, then add a class to bring the layout back to the fore front. Also added a few out small changes, like the ability to open and close one header with out having to require that one panel remains open.

I and a HUGE fan of Mitchell's work and this control and will evangelize it in hopes of Sencha building a more robust version for 2.0, one that will to be able to nest other, more complicated widgets with child controls, into the layout panels. Sencha, are you listening? :)




createAccordionMenu: function (menuData) {
var me = this;
var items = [];

mmEngine.Views.AccordionStoreHeaders = new Ext.data.Store({
autoload: true,
model: 'MenuItem', <-- Need a model that matches your menu data coming from server
data: menuData.subs <-- subs holds the submenu items for a header
});


Ext.each(menuData.subs, function (menuitem, idx) {

mmEngine.Views.AccordionStoreSubsItems = new Ext.data.Store({
autoload: true,
model: 'MenuItem',
data: menuitem.subs
});

items.push(
new Ext.List({
scroll: false,
title: menuitem.name,
itemTpl: '<div class="accordion-subitem"><strong>{name}</strong><img src="/UI/Assets/Images/2x/caret_fx.png" style="height: 13px; width: 13px; float: right; padding-right: 3px; padding-top: 4px"></div>',
selModel: {
mode: 'SINGLE',
allowDeselect: true
},
store: mmEngine.Views.AccordionStoreSubsItems,
listeners: {
scope: this,
itemtap: function (dv, index, item, e) {
var ds = dv.getStore();
r = ds.getAt(index);

me.getProductList(e, menuitem.name, r.data.name);
}
}
})
)
});

this.AccordionMenu = new Ext.Container({
items: {
id: 'accordionMenu',
xtype: 'container',
cls: 'accordion_container_hidden',
fullscreen: false,
layout: {
type: 'accordion',
allowCollapse: true,
headerCls: 'accordion-header',
itemCls: 'accordion-item',
arrowCls: 'accordion-arrow',
forceAutoCollapse: false
},
items: items
},
//baseCls: 'productDetail_Form',
renderTo: this.el.down('.accordionMenuArea')
});

this.formItems.push(this.AccordionMenu);

this.query('LoadingPanel')[0].hide();

cmp = Ext.getCmp('accordionMenu');
cmp.removeCls('accordion_container_hidden').addCls('accordion_container');

this.query('#AccordionMenu')[0].show();

},

nabulaer
4 May 2011, 8:05 AM
hi,
This is exactly what I need !!
thank you so much.

Bucs
4 May 2011, 9:16 AM
Mitchell, when you get a sec, could you please take a look at the above link and maybe make a suggestions or two as you why you think there may be a delay on the submenu item click and the handler execution?

I have an itemtap listener on the subitem list element, which seems to be a good enough way to handle this. I guess I could try to use the disclosure click but not a fan of that icon or placement (unless it's customizable, just haven't looked).

I also noticed that trying to add the simplest of CSS3 gradients or inset type properties to any element in the list severely impacts performance. Not quite sure why it impacts this layout so badly.

Other than that, this layout rocks...clients are loving it, especially once we tweak the speed and gain the ability to add more involved controls into the panels.

Thanks again for your efforts!

jedihua
16 May 2011, 7:41 AM
Hi, mitchell. Instead of specifying the items for the accordion, Is it possible to use a datastore or json object to automaticlly generate all the items?

Bucs
16 May 2011, 12:53 PM
That is not possible as a simple property of the layout yet, but if you look at the code I posted above, you could cycle the data in a store and manually add the items you needed.

This is not a fully "sanctioned" Touch control yet...Mitchell just wrote it out of the goodness of his heart, and to stop me from screaming about it :)

IMO, this layout or something like it will find it's way into the platform soon as it's an extremely valuable UI control.

jedihua
16 May 2011, 1:20 PM
Thanks so much for your reply. Sorry I didnt notice your early post. that's very helpful! :)

pd1980
2 Nov 2011, 11:35 AM
Hi Bucs,

Your code has been of a great help. One question... have you found out a solution for keeping multiple tabs open at the same time? This is crucial to my project.

Thanks,
pd

aguerra10
22 Nov 2011, 9:12 AM
Hi,

Could you please tell me if this Layout will be implemented for Sencha Touch 2?

I am working on a PhoneGap/Sencha 2 project and this AccordionLayout would fit great in it...

Thanks!!

mitchellsimoens
22 Nov 2011, 9:15 AM
As of ST2, we are trying to focus on performance and class structure. We are trying not to mix in too many new features. Things like this and possibly a grid will be looked at for a dot release.

aguerra10
22 Nov 2011, 9:36 AM
As of ST2, we are trying to focus on performance and class structure. We are trying not to mix in too many new features. Things like this and possibly a grid will be looked at for a dot release.

Thanks for the quick answer and the great work mitchell!!

nak1
13 Dec 2011, 4:05 PM
M,

Is there anyway to port over the existing Accordion layout for Sencha 2? I don't mind doing that work if you could point me in the right direction.

lukilooks
12 Jan 2012, 5:32 PM
I'm nubie for Sencha Touch, now i'm try learning and make simple app with it, now i still use v.1.1.1
I'm already use this accordion for my nested list menu, it's great for my app, but i have trouble when i want to display detail content for each item list, i've try with all solution that i'm searching in forum and tutorial, but i still get no succeed...for link my question in forum for anyone can help me wtih this, so sorry for my nubie knowledge ... http://www.sencha.com/forum/showthread.php?170964-Begginer-asking
(http://www.sencha.com/forum/showthread.php?170964-Begginer-asking)

swarnendude
9 Feb 2012, 1:36 AM
Is there any issue with the nested items of each containers of this Accordion layout? I tried to add a Form Panel but it renders only upto DIV.x-panel-body but doesn't go further that. So, no form items are viewable.

Did someone already got some solution to this?

lukilooks
9 Feb 2012, 1:55 AM
i still get no succeed for this...i hope anybody can help with this... :-/

kidmanmatch
2 May 2013, 8:47 PM
Am new to sencha touch, looking for a accordion list to use it in my project...this one awesome but i have some problem when i running the code...
am getting the following error message in my console please help me to solve this issue...



Uncaught Error: [Ext.extend] Attempting to extend from a class which has not been loaded on the page. sencha-touch-debug.js:5791 (http://192.168.2.2:8086/sencha-touch-2.1.1-gpl/touch-2.1.1/sencha-touch-debug.js)



Uncaught TypeError: Object #<Object> has no method 'regModel'