List Sencha Touch--选项卡面板中的列表不工作

所以，我刚开始与Sencha Touch合作。我想在TabPanel中包含一个列表，但由于某些原因，它不起作用。请帮忙。谢谢

HTML:

Javascript:

MyApp=new Ext.Application({
name: 'MyApp',
launch: function() {

    MyApp.tabbedView= new Ext.TabPanel({
        cardSwitchAnimation: 'slide',
        tabBar: {
            dock: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        items: [{
            title: "Schedule",              
            cls: 'card',
            iconCls: 'time',
            style: "background-color: #000",

        },
        {
            title: "Roster",
            layout: 'fit',
            cls: 'card',
            iconCls: 'team',                
            xtype: 'list',
            store: MyApp.RosterStore,
            itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>'
            style: "background-color: #aaa",
        },
        {
            title: "Info",
            html: "Bye",
            cls: 'card homeScreen',
            iconCls: 'info',
            style: "background-color: #aaa",
        }
        ]


    });
    Ext.regModel('PlayerName', {
        fields: ['firstName', 'lastName']
    });
    MyApp.RosterStore= new Ext.data.Store({
        model: 'PlayerName',
        data: [
            {firstName: "Shivam",  lastName: "Thapar"},
            {firstName: "Last",  lastName: "First"},
            {firstName: "Bob",  lastName: "Smith"}
        ]
    });


    MyApp.Viewport= new Ext.Panel({
        fullscreen: true,
        layout: 'fit',
        style: "background-color: #fee",

        items: [MyApp.tabbedView]

    });
}
});

---

尝试将模型和存储定义置于选项卡面板定义之上

模型优先 下一个商店

---

然后是TabPanel

当我拿出商店时，regModel，并在它运行的一个选项卡中列出列表内容。有了这些东西，屏幕上一片空白……没关系，我解决了我的问题。以不同的名称调用存储

MyApp=new Ext.Application({
name: 'MyApp',
launch: function() {

    MyApp.tabbedView= new Ext.TabPanel({
        cardSwitchAnimation: 'slide',
        tabBar: {
            dock: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        items: [{
            title: "Schedule",              
            cls: 'card',
            iconCls: 'time',
            style: "background-color: #000",

        },
        {
            title: "Roster",
            layout: 'fit',
            cls: 'card',
            iconCls: 'team',                
            xtype: 'list',
            store: MyApp.RosterStore,
            itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>'
            style: "background-color: #aaa",
        },
        {
            title: "Info",
            html: "Bye",
            cls: 'card homeScreen',
            iconCls: 'info',
            style: "background-color: #aaa",
        }
        ]


    });
    Ext.regModel('PlayerName', {
        fields: ['firstName', 'lastName']
    });
    MyApp.RosterStore= new Ext.data.Store({
        model: 'PlayerName',
        data: [
            {firstName: "Shivam",  lastName: "Thapar"},
            {firstName: "Last",  lastName: "First"},
            {firstName: "Bob",  lastName: "Smith"}
        ]
    });


    MyApp.Viewport= new Ext.Panel({
        fullscreen: true,
        layout: 'fit',
        style: "background-color: #fee",

        items: [MyApp.tabbedView]

    });
}
});