JavaScript Sencha Touch：打开面板的列表

Posted 2021-05-20

Ext.setup({
    onReady: function(){
    
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });
        
        var main = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            items: [{
                xtype: 'list',
                tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
                itemSelector: 'div.contact',
                store: new Ext.data.Store({
                    model: 'Contact',
                    data: [{
                        firstName: 'Tommy',
                        lastName: 'Maintz'
                    }, {
                        firstName: 'Ed',
                        lastName: 'Spencer'
                    }, {
                        firstName: 'Jamie',
                        lastName: 'Avins'
                    }]
                }),
                listeners: {
                    itemtap: function(list, index){
                        var rec = list.store.getAt(index),
                            id = rec.get('firstName') + '-card',
                            c = main.getComponent(id);
                        
                        if(!c){
                            c = main.add({
                                itemId: id,
                                html: rec.get('lastName'),
                                dockedItems: [{
                                    xtype: 'toolbar',
                                    dock: 'top',
                                    items: [{
                                        text: 'Back',
                                        ui: 'back',
                                        handler: function(){
                                            main.setCard(0);
                                        }
                                    }]
                                }]
                            });
                            main.add(c);
                        }
                        main.setCard(c, 'slide');
                    }
                }
            }]
        });
    }
});