View Full Version : CollapsibleList in Sencha 2.1

1 Jan 2013, 9:39 PM
hi all

I am struggles to create the expand and collabse function in sencha 2.1 list control. I did that in sencha 2.0.1 but i have not any idea in sencha 2.1. If any body share the code is best way for me

2 Jan 2013, 10:06 AM
Do you know about this component?



3 Jan 2013, 12:02 AM
thank for your reply. I looked that. But i need more than six span items in inside the list item row. I tried in accordian but it should not help me. It is showing only single span in a row.

3 Jan 2013, 1:19 AM
Wow!.. Suberb! Fantastic! Now i could success through Accordian what i want through list. Thanks a lot digeri. Really thanks..

4 Jan 2013, 1:16 AM
hi dig

If any possible to load the data from the json.

4 Jan 2013, 2:26 AM
Apparently it's not possible yet....maybe in a future version or you can ask the developer of the extension. I saw this in the code:

// XXX: AccordionList doesn't show when loaded from JSON
// proxy: {
// type: 'ajax',
// url: 'resources/data/testData.json',
// reader: {
// type: 'json',
// rootProperty: 'items'
// }
// }


5 Jan 2013, 2:06 AM
thanks digeri. i looked that code in that sample but my bad time it must need to work in my app. So anyway if i will get the problem solved i will post the code here

7 Jan 2013, 1:54 AM

Find out the code for loading data from json. Smooth work from my friend Premkumar and customize the code.
we need to update the store onloadproxy function like below

Ext.define('AccordionListExample.store.Task', {
extend: 'Ext.data.TreeStore',
requires: [

onProxyLoad: function(operation) {
var me = this,
records = operation.getRecords(),
successful = operation.wasSuccessful(),
node = operation.getNode();

node.set('loading', false);
if (successful) {
records = me.fillNode(node, records);
me.loading = false;
me.loaded = true;

node.fireEvent('load', node, records, successful);
me.fireEvent('load', this, records, successful, operation);

//this is a callback that would have been passed to the 'read' function and is optional
Ext.callback(operation.getCallback(), operation.getScope() || me, [records, operation, successful]);

onNodeBeforeExpand: function(node, options, e) {


config: {
defaultRootProperty: 'items',
model: 'AccordionListExample.model.Task',
autoLoad: true,

// XXX: AccordionList Now show data from JSON
proxy: {
type: 'ajax',
url: 'resources/data/testData.json'//,
// reader: {
// type: 'json',
// rootProperty: 'items'
// }
listeners: {
load: function(store, records, successful, operation, eOpts) {

10 Jan 2013, 4:04 AM
Hey guyz one question to all !

Accordion is working for you guyz on sencha 2.1 ?? as for me it is not !

15 Jan 2013, 9:14 PM
Hi indu

Its working fine senchatouch 2.1. please check it and find what the error you get it

15 Jan 2013, 10:51 PM
Can you please share any sample project citing that Accordion is working. This is really crucial for me. If you can post a sample project with Accordion and ST 2.1 it would be really helpful.

16 Jan 2013, 8:25 PM
Accordion is not working for me in sencha touch 2.1.Please help me with some examples .

AccordionList using json Data is working fine....

17 Jan 2013, 3:53 AM
hi Indu
this one is working fine for me. https://github.com/kawanoshinobu/Ext.ux.AccordionList. i dont know what you expecting from me. try this

23 Mar 2013, 9:08 PM
Hi, I recently published flexible Tree Grid component designed after Mitchell Simoens Ext.ux.touch.grid component. I started with Shinobu Kawano's work on Ext.ux.AccordionList Appreciate any feedback to further enhance this. Regards, Steve..

https://github.com/swluken/TouchTreeGrid (https://github.com/swluken/TouchTreeGrid)

5 Apr 2013, 2:21 AM
Hello all!!!
First of all i will explain my needs:
* My initial view shows a header text and nine buttons(as phone keypad buttons) which wen tapped should navigate to second page
* Here in this second view it contains another 7 buttons each should be collapsible when tapped.. I saw some demo and docs like: https://github.com/mitchellsimoens/E...ccordionLayout (https://github.com/mitchellsimoens/Ext.layout.AccordionLayout)
http://docs.sencha.com/ext-js/4-1/#!...iner.Accordion (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Accordion)
But the accordion layout can only be used in extjs but i didn't find any options in sencha touch2.1.x, is that possible to do it if so pls tel me how???
If its not possible in touch2.1.x, Can u suggest me how to do my same design in extjs4.1.3
Actually am able to do collapse with a panel containing 7 child panel in extjs but i dont know how to create the initial view that is with buttons which wen tapped navigates to this created second view coz i cant find navigation view or button tap event in extjs...
Thanks in advance!!!

Nuthan Santharam
23 Apr 2013, 6:17 AM
Accordion List's store redefined here:

Submitted patch to original Author

19 Jul 2013, 5:41 AM
Hi, guys I am working on sencha touch 2.2.1. I have tried but for me accordion list is not working. Can anybody help me in that.