Untitled

sencha touch list-component
Ext.regModel('Complementarias', {
fields: ['MiniAct', 'Actividad', 'Fecha', 'Mes']
});

var store = new Ext.data.JsonStore({
model  : 'Complementarias',
sorters: 'MiniAct',
getGroupString : function(record) {
    return record.get('MiniAct')[0];
},
data: [
    {MiniAct: '1', Actividad: '2', Mes: '3', Fecha: '4' }
]
});

baApp.detailPanel = new Ext.Panel({
        id: 'detailpanel',
        itemTpl: 'testa',
        html: '',
        dockedItems: [
            {
                xtype: 'toolbar',
                title: "Extensión",
                ui: "light",
                items: [{
                    text: 'atrás',
                    ui: 'back',
                    handler: function() {
                        Extension.setActiveItem('indexlist', {type:'slide',     direction:'right'});
                    }
                }]
            }
        ]
    });

baApp.listPanel = new Ext.List({
id: 'indexlist',
itemTpl : '<div id="extension"><h1>{MiniAct}</h2><br><h2>{Fecha}</h2></div>',
grouped : true,
store: store,
onItemDisclosure: true,
listeners:{
            itemtap: function(view, index, item, e){
            baApp.detailPanel.update(view.data);
            Extension.setActiveItem('detailpanel', {type:'slide', direction:'left'});
        }
    }
});

Extension = new Ext.Panel({
layout: 'card',
iconCls: 'chat3',
title:"Extensión",
defaults: {
    scroll: 'vertical'
},
items: [baApp.listPanel, baApp.detailPanel]
});


baApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
style: "background-color: white;",
tabBar: {
    dock: 'bottom',
    sortable: true,
    layout: {
    pack: 'center'
    }
},
items: [
{xtype: 'inicio'},
{xtype: 'planes'},
Extension,
{xtype: 'plano'},
{xtype: 'directorio'}
]

});

listeners: {
    itemtap: function( view, index, item, e ) {
        var rec = view.getStore().getAt(index);
        baApp.detailPanel.update(rec.data);
        Extension.setActiveItem('detailpanel', {type:'slide', direction:'left'});
    }
}