I can't group a list

Question

    Ext.define('MyApp.view.MyPanel', {   
extend: 'Ext.Panel',
xtype:'mypanel',

config: {
    ui: 'dark',
    layout: {
        type: 'card'
    },
    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'Lezzet Dunyasi',
            items: [
                {
                    xtype: 'button',
                    docked: 'right',
                    height: 29,
                    hidden: true,
                    ui: 'back',
                    text: 'back'
                }
            ]
        },
        {
            xtype: 'list',
            docked: 'left',
            id: 'mylist',
            ui: 'round',
            grouped:true,
            pinHeaders:false,
            width: 331,
            itemTpl: [
                '<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
            ],
            store: 'Menius',
            items: [
                {
                    xtype: 'searchfield',
                    docked: 'top',
                    placeHolder: 'Search...',


             }
            ]
        },
        {
            xtype: 'panel',
            styleHtmlContent:true,
            style: {
                        backgroundImage: 'url(resources/img/Landscape.png)',
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center'
            },
            id:'mypanel'
        }
    ]
}

});

My Store

I use some codes in my store

    sorters:'id',
    grouper:function(record) {
        return record.get('id')[4];

When i write grouped:true into the list config , app doesn't run. I don't understand the reason.

I want to see same result like kitchensink example userinterface/list/disclosure section.

Answer 1

add this configartion in your store

 groupField:'label'