Sencha Touch Blank Screen After Adding List Component to View

Question

I am attempting to add a List component to a view in Sencha Touch. The app runs correctly until I try to add the list component. After Adding the list to the view the app loads (shows the splash screen)then only shows a white screen.

I'm using Sencha Touch, XCode 4, iOS 5 SDK, and PhoneGap 1.3.0.

Thanks in advance!

here's the code for the view:

plantanalyzer.views.BuildingList = Ext.extend(Ext.Panel, {
dockedItems: [{
            dock: 'top',
            html: '<img src="images/logo.jpg"/>'
        },
        {
        xtype: 'list',
        itemTpl : '{name}',
        grouped : true,
        indexBar: true,
        store: newStore

    }]
});

and the code for my test datastore. I have this in the head of index.html:

var newStore;

    function onBodyLoad(){
        Ext.regModel('Plants', {
            fields: ['name', 'efficiency']
        });

        newStore = new Ext.data.JsonStore({
            model  : 'Plants',
            sorters: 'name',

            getGroupString : function(record) {
                return record.get('name')[0];
            },

            data: [
                {name: 'Milwaukee',   efficiency: .85},
                {name: 'New York',    efficiency: .65},
                {name: 'St Paul',     efficiency: .73},
                {name: 'Phoenix',     efficiency: .35},
                {name: 'Los Angeles', efficiency: .45},
                {name: 'Miami',       efficiency: .75},
                {name: 'London',      efficiency: .39},
                {name: 'Moscow',      efficiency: .95},
                {name: 'Hogwarts',    efficiency: .99}
            ]
        });
    }

Answer 1

You create your store on body load, i.e. after the list was loaded so the newStore object is empty when the list needed. Put this code:

 Ext.regModel('Plants', {
        fields: ['name', 'efficiency']
    });

    newStore = new Ext.data.JsonStore({
        model  : 'Plants',
        sorters: 'name',

        getGroupString : function(record) {
            return record.get('name')[0];
        },

        data: [
            {name: 'Milwaukee',   efficiency: .85},
            {name: 'New York',    efficiency: .65},
            {name: 'St Paul',     efficiency: .73},
            {name: 'Phoenix',     efficiency: .35},
            {name: 'Los Angeles', efficiency: .45},
            {name: 'Miami',       efficiency: .75},
            {name: 'London',      efficiency: .39},
            {name: 'Moscow',      efficiency: .95},
            {name: 'Hogwarts',    efficiency: .99}
        ]
    });

Right before:

plantanalyzer.views.BuildingList = Ext.extend(Ext.Panel, {
dockedItems: [{
            dock: 'top',
            html: '<img src="images/logo.jpg"/>'
        },
        {
        xtype: 'list',
        itemTpl : '{name}',
        grouped : true,
        indexBar: true,
        store: newStore

    }]
});

To check if this is really the case.

One other suggestion is that you should put the list in the items of the panel, not the dockedItems. Btw, your code is not well structured. You should follow the MVC patter. Check this https://vimeo.com/17705448 and this http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/.