Ext.ux.AccordionList

Sencha Touch 2 custom component.

Collapsible List with using Ext.data.TreeStore. You can expand and collapse contents by header item tap. Also it can nested infinity.

Demo

Place the 'ux' folder somewhere within your application, then add the following to your app (at the top of 'app.js' is a good place):

Ext.Loader.setPath({
    'Ext': 'touch/src',
    'MyApp': 'app',
    'Ext.ux': 'ux'
});

Adjust './ux' to wherever you actually placed the 'ux' folder.

Then in whatever component you wish to use the view, add:

requires = [
    'Ext.ux.AccordionList',
]

If you use default design, import _accordionlist.scss and include accordionlist mixin.

// app.scss
@import 'stylesheets/accordionlist';
@include accordionlist;

Before build with Sencha Cmd, you must define "${add.dir}/ux" to sencha.cfg:

app.classpath=${app.dir}/app.js,${app.dir}/ux,${app.dir}/app

Execute the following command in the sources root directory

sencha ant -f project.xml initialize

Then to place example directory to server's application directory.

You can execute Jasmine and PhantomJS based unit test.

Example command line:

phantomjs test/run-jasmine.js http://localhost:3333/Ext.ux.AccordionList/test/SpecRunner.html

You will need to run the tests from a web server because XHR's cannot be made from the file:// protocol

1.0

[2013-05-05] v1.0.0 KAWANO Shinobu (kawanoshinobu)