Simple list item

Question

I have a layout in which I want to show list items on left-pane. How can I show list items there along with some click event?

{
                            docked: 'left',
                            style: 'background:#7b7b7b',
                            html: 'Here I want to show Ext.List'
                        }

My List items are Home, About, User, Help.

Answer 1

Your List..instead of "html: 'Here I want to show Ext.List'"

withe the listeners you can creat some tap events

items: [
        { xtype: 'list',
            store: 'NaviStore',
            id: 'NaviList',
            itemTpl: '<div class="contact">{text}',
            scrollable: false,
            listeners:{
               itemtap: function (obj, idx, target){
                  alert(List is Clicked);
               }
            }
}]

Your store

Ext.define('MyApp.store.NaviStore', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.NaviModel',
config: {
    model: 'MyApp.model.NaviModel',
    data: [
        { text: 'Item1'},
        { text: 'Item2'},
        { text: 'Item3'},
        { text: 'Item4'}
    ],
    autoLoad: true
}
});

Your model

Ext.define('MyApp.model.NaviModel', {
extend: 'Ext.data.Model',
config: {
    fields: ['text']
}

});