SHINOBU KAWANO JavaScript / UX Design / Sencha Web Techinologies

Accordion List with useComponents!

Good morning! Yesterday, I added new feature into Ext.ux.AccordionList. From now on, you can add a components into header item and content item. Actually, This feature was requested by many users. Thanks to all users, their voice grows this component more useful.


In first, you must create a class which extends “Ext.ux.AccordionListItem”. Then, define dataMap for header item and content item. Way of define is same to dataMap of Ext.dataview.DataItem.

Ext.define('AccordionListExample.view.ListItem', {
    extend: 'Ext.ux.AccordionListItem',
    xtype : 'examplelistitem',

    config: {

        headerDataMap: {
            getText: {
                setHtml: 'text'
            getButton: {
                setIconCls: 'icon'
        contentDataMap: {
            getLimit: {
                setValue: 'limit'
            getMessage: {
                setValue: 'message'

You created data item class. Next, you specify use this in your view config.

            xtype: 'accordionlist',
            store: Ext.create(''),
            flex: 1,
            indent: true,

            // Specify useComponents.
            useComponents: true,
            // Specify data item's xtype you created.
            defaultType: 'examplelistitem',

            listeners: {
                initialize: function() {

That’s ok. Accordion List appears components bound items. You can check it at example site.

See “components” tab’s view.

It able to nested.

I added button component to header item. When tapped button, it fires tap event.

I added date picker component and text area component to content item. It able to edit.

Of course, these item generated from passed data.

What's next?

Now, AccordionList has so many feature. That’s why, I have no idea to add new one. I need your help. If you like this component, please request new feature. Maybe, I will add it joyfully :)