Sencha Touch— List in TabPanel not working

Question

So, I just started working with Sencha Touch. I want to include a list in a TabPanel but for some reason it isn't working. Please help. Thanks!

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

Try putting your model and store definitions above the TabPanel definition.

Model first Store next and then TabPanel

Sencha Touch— List in TabPanel not working

Question

1 answers

solution1
0 2012-02-28 11:55:19

Sencha Touch— List in TabPanel not working

Question

1 answers

solution1 0 2012-02-28 11:55:19

solution1
0 2012-02-28 11:55:19