Question

所以，我刚开始使用Sencha Touch。我想在TabPanel中包含一个列表但由于某种原因它无法正常工作。请帮忙。谢谢！

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
    <script src="app/app.js" type="text/javascript"></script>
    <script src="app/rosterData.js" type="text/javascript"></script>
    <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet"type="text/css" />
    <link href="app/myAppStyle.css" rel="stylesheet" type="text/css" />

</head>
<body></body>
</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]

    });
}
});

Answer 1

尝试将模型和商店定义放在TabPanel定义之上。

模型第一存储下一个然后是TabPanel

Sencha Touch-- TabPanel中的列表无法正常工作

1 个答案: