【Sencha Touch】タップしたExt.Listの値の取得方法

Ext.Listに「itemtap」イベントを追加し、Listに関連づけたデータストアから値を取得する。

list.on('itemtap', function (view, index, item, e) {
    var store    = this.store,
        instance = store.getAt(index);
    
    Ext.Msg.alert('', instance.get('firstName') + ' : ' + instance.get('lastName'));

});

全体のソースはこちら。

<script type="text/javascript">

    Ext.setup({
        onReady: function () {

            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });

            var store = new Ext.data.JsonStore({
                model: 'Contact',
                sorters: 'lastName',
                getGroupString: function (record) {
                    return record.get('lastName')[0];
                },
                data: [
                    { firstName: 'Tommy', lastName: 'Maintz' },
                    { firstName: 'Rob', lastName: 'Dougan' },
                    { firstName: 'Ed', lastName: 'Spencer' },
                    { firstName: 'Jamie', lastName: 'Avins' },
                    { firstName: 'Aaron', lastName: 'Conran' },
                    { firstName: 'Dave', lastName: 'Kaneda' },
                    { firstName: 'Michael', lastName: 'Mullany' },
                    { firstName: 'Abraham', lastName: 'Elias' },
                    { firstName: 'Jay', lastName: 'Robinson' }
                ]
            });

            var list = new Ext.List({
                itemTpl: '{firstName} {lastName}',
                store: store
            });

            list.on('itemtap', function (view, index, item, e) {
                var store    = this.store,
                    instance = store.getAt(index);
                
                Ext.Msg.alert('', instance.get('firstName') + ' : ' + instance.get('lastName'));
            
            });

            var panel = new Ext.Panel({
                fullscreen: true,
                items: [list]
            });
        }
    });
</script>