Sencha Touch 2.0 Accordian layout

[intellix]

Two things, which you probably know about:

- Not possible in Architect to set the layout of something to Accordion
- Items that are created dynamically (like a DataView looping through and creating DataItems which I would like to be accordions) don't work properly

Going to have a play about with getting the dynamic part working as it's required in my project then I'll post my findings here

[riskitforbiscuit]

Two things, which you probably know about:

- Not possible in Architect to set the layout of something to Accordion
- Items that are created dynamically (like a DataView looping through and cting DataItems which I would like to be accordions) don't work properly

Going to have a play about with getting the dynamic part working as it's required in my project then I'll post my findings here

Hi intellix,
I have implemented accordion with the list component inside it over Android 2.3.3.Screenshot of it is attached below. However i m facing a problem with the layout of the list component. You can see the list is not getting the full width(pl. see the separator). I have tried a hell lot of things to show its full width over the screen but to no avail. Also the blank part at the right most side(inside accordion) renders as a true list, accepts user taps but does not show over the screen (pl. see 2nd image). This thing works well over the browser but not on emulator. Please Help me out as i want this component by this week's deadline

Attachment 36178

this is my code snippet(agreed it is not beautiful):
********************
var list1={
xtype : 'list',
scrollable : {
direction : 'vertical',
directionLock : true
},
style:"border:1px solid black;",
itemTpl : '<div class="tpl1">'+'{name} {data1} {data2}'+'</div>',/*'</div>'+*/
store : {
model : 'Contact',
data: [
{'name':'Lorem', 'data1':'ipsum', 'data2':1},
{'name':'Lorem', 'data1':'ipsum', 'data2':2},
{'name':'Lorem', 'data1':'ipsum', 'data2':3},
{'name':'Lorem', 'data1':'ipsum', 'data2':4},
{'name':'Lorem', 'data1':'ipsum', 'data2':5}
]
}
};
var list2={
xtype : 'list',
width:'100%',
itemTpl : '<div>'+'{name} {data1} {data2}'+'</div>',
store : {
model : 'Contact',
data: [
{'name':'Lorem', 'data1':'ipsum', 'data2':1},
{'name':'Lorem', 'data1':'ipsum', 'data2':2}
]},
scrollable : {
direction : 'vertical',
directionLock : true
},
};
var listPanel1= {
xtype : "container",
id:'p1',
title : 'List1',
height : 400,
width : "100%",
layout : 'fit',
scope:this,
items :[list1]
};
var listPanel2={
xtype : "container",
title : 'List2',
height : 175,
width : "100%",
layout : 'fit',
items :[list2]


};
this.add([listPanel1,listPanel2]);

[intellix]

Not entirely sure as my Ext/ST is little to non-existent
Actually after spending a day playing about with getting my DataView to display each DataItem as an Accordion I can't quite get it working. It only ever creates one tab for all DataItems... I'm thinking that it's not quite possible and will have to manually have an accordion toolbar for each of my items

[rak111esh]

So,can we call the functions in this accordion.js in the application's controller??

[rutzmic]

I`ve added a overflow: hidden to .x-layout-accordion-item in my stylesheet to be able to collapse the last item as well, no matter if the last item is a list or not. Maybe this helps somebody with this plugin

[armode]

Has someone successfully migrated the accordion layout to the new ST 2.1 release?

I had a look into it yesterday and accordion layout seems to be completly broken :-(
The top container to toggle a list is gone and there're many changes in Ext.layout.DefaultView version 2.1!

I have to stay at 2.0.1 for the moment, because it was not easy and fast to fix...

[maitreya.karandikar]

Hi Mitchellsimoens ,

As you have provide Accordian example built for ST1 for ST2.0 in below link :-

https://github.com/mitchellsimoens/Ux.layout.Accordion

Now I upgrade my application in new stable version of Sencha Touch 2.1. The Accordian header and rotation key went off.

Please fine below the images :-

previously in Sencha Touch 2.0 :-
[IMG][/IMG]ST2.0.jpg


after upgrading in Sencha touch 2.1 :-


ST2.1.jpg


can some upgrade Accordain in Sencha Touch 2.1 , so that it will appear fine as it was before.

Thanks In advance.

[armode]

now it works with ST2.1
I added a pull request
https://github.com/mitchellsimoens/U...cordion/pull/6
https://github.com/mitchellsimoens/U...rdion/issues/5