简单列表项

Question

我有一个布局，我想在左窗格中显示列表项。如何在那里显示列表项以及一些点击事件？

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

我的列表项目是主页，关于，用户，帮助。

Answer 1

你的名单......而不是“html：'我想在这里展示Ext.List'”

听众可以创建一些点击事件

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

您的商店

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
}
});

你的模特

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

});