Hardcoded List Data

[nicolaa]

I have a data store with hardcoded list data:

salad.ListStore = new Ext.data.JsonStore({
    model: 'ClassicSalads',
    sorters: 'name',
    getGroupString : function(record) {
        return record.get('name')[0];
    },
    autoLoad: true,
    data: [
        {name: 'Turkey Club', photo: 'images/salads/turkey_club.png', lettuce: 'lettuce-2',
            meat: 'meat-5', topping1: 'topping-3', topping2: 'topping-13', topping3: 'topping-16',
            cheese: 'cheese-3', dressing: 'dressing-6'},
        {name: 'Asian Chicken', photo: 'images/salads/asian.png', lettuce: 'lettuce-1',
            meat: 'meat-1', topping1: 'topping-10', topping2: 'topping-5', topping3: 'topping-14',
            cheese: 'cheese-6', dressing: 'dressing-7'},
        {name: 'Greek', photo: 'images/salads/greek.png', lettuce: 'lettuce-2',
            meat: 'meat-6', topping1: 'topping-12', topping2: 'topping-13', topping3: 'topping-15',
            cheese: 'cheese-4', dressing: 'dressing-4'},
        {name: 'Garden Deluxe', photo: 'images/salads/garden.png', lettuce: 'lettuce-4',
            meat: 'meat-6', topping1: 'topping-5', topping2: 'topping-7', topping3: 'topping-13',
            cheese: 'cheese-5', dressing: 'dressing-3'},
        {name: 'Chicken Caesar', photo: 'images/salads/chicken_caesar.png', lettuce: 'lettuce-2',
            meat: 'meat-1', topping1: 'topping-7', topping2: 'topping-16', topping3: 'topping-16',
            cheese: 'cheese-6', dressing: 'dressing-2'},
        {name: 'Classic Cobb', photo: 'images/salads/cobb.png', lettuce: 'lettuce-2',
            meat: 'meat-6', topping1: 'topping-3', topping2: 'topping-8', topping3: 'topping-13',
            cheese: 'cheese-1', dressing: 'dressing-1'},
        {name: 'Fall Harvest', photo: 'images/salads/fall.png', lettuce: 'lettuce-3',
            meat: 'meat-5', topping1: 'topping-2', topping2: 'topping-6', topping3: 'topping-9',
            cheese: 'cheese-5', dressing: 'dressing-4'}
    ]
});

var saladList = new Ext.Panel ({
            fullscreen: true,
            hidden: true,
            items: [{
                title: 'Classic Salads',
                layout: Ext.is.Phone ? 'fit' : {
                type: 'vbox',
                align: 'center',
                pack: 'center'
                },
                cls: 'salad-list',
                items: [{
                    width: Ext.is.Phone ? undefined : 600,
                    //height: Ext.is.Phone ? undefined : 1000,
                    xtype: 'list',

It works fine in a web browser, but not on the iphone. What am I doing wrong?

[mitchellsimoens]

Enable the dev toolbar in mobile safari, does it have any errors?

[nicolaa]

I've enabled the dev toolbar in safari on the desktop and on my iphone. The desktop does not throw any errors. The debug console in the mobile version disappears as soon as i load the page.

[nicolaa]

Any ideas on how I can debug this? Why is the Debug bar disappearing?

[nicolaa]

This didn't work on the iPhone due to the unnecessary inner list in the Panel Items.