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

点击右侧箭头后事件效果：