List 元件簡單示例及其onItemsDisclosure點選事件

來自《sencha touch權威指南》第9章，276頁開始

-------------------------------------------------

app.js程式碼如下：

Ext.require(['Ext.data.Store','Ext.dataview.List','Ext.MessageBox']);
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    
    launch: function(){
        Ext.define('User',{
            extend: 'Ext.data.Model',
            config: {
                fields: ['firstName','lastName']
            }
        });

        var store = Ext.create('Ext.data.Store',{
            model: 'User',
            data: [{
                firstName:'美麗',lastName:'王'
            },{
                firstName:'美麗',lastName:'李'
            },{
                firstName:'美麗',lastName:'陳'
            }]
        });
        
        var myList = Ext.create('Ext.List',{
            store: store,
            itemTpl: '<div>{lastName}{firstName}</div>',
            // onItemsDisclosure 點選事件
            onItemDisclosure: function(record,element,index,e){
                Ext.Msg.alert(store.getAt(index).get('firstName'));
            }
        });
        Ext.Viewport.add(myList);
    }
});

點選右側箭頭後事件效果：