CODEWITHSUNDEEP
htmlsencha-touchextjssencha-touch-2
Roman
Roman

Reputation: 4513

Sencha Touch - Can't load a local json file

I'm trying to use Sencha Touch 2 to load a local json file into a dataview.

When checking with Firebug - the file is being loaded by Sencha, but it is not being shown for some reason.

any ideas why?

Here is my code (the HTML is the basic Sencha html):

    Ext.require([
    'Ext.Panel',
    'Ext.tab.Panel',
    'Ext.Ajax'
]);

new Ext.application({
    name: 'MyApp',
    useLoadMask: true,
    launch: function () {

        Ext.regModel('City', {
           fields: [
            {name:'ID', type:'string'},
            {name:'Name', type:'string'}
           ]
        });

        var CitiesStore = new Ext.create('Ext.data.Store',{
            autoLoad: true,
            storeId: 'CitiesStore',
            model: 'City',
            proxy: {
                type: 'ajax', // ajax is for same domain, jsonp for cross-domain
                url: 'cities.json',
                reader: {
                    type: 'json',
                    root: 'cities'
                }
            }
        });

        Ext.create('Ext.TabPanel',{
            fullscreen: true,
            tabBarPosition: 'bottom',
            scrollable: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome to my app',
                    style: 'text-align: center;'
                },
                {
                    title: 'Search',
                    iconCls: 'search',
                    items: [
                        Ext.create('Ext.DataView', {
                            store: 'CitiesStore',
                            itemConfig: {
                                tpl: '<h2>{Name}</h2>'
                            }
                        })
                    ]
                },
                {
                    xtype: 'toolbar',
                    title: 'My App',
                    dock: 'top'
                }
            ]
        }).setActiveItem(1); // this is set for debugging only

    }
});

any the json is dead simple

{"cities":[{"ID":1,"Name":"new york"},{"ID":2,"Name":"las vegas"},{"ID":3,"Name":"los angeles"}]}

Many thanks!

Upvotes: 1

Views: 2866

Answers (3)

widged
widged

Reputation: 2779

I have had issues with lists or dataviews not showing unless the parent container had a width set to a value or a layout set to 'fit'. In case it makes any difference, try:

    title: 'Search',
    iconCls: 'search',
    layout: 'fit',

Upvotes: 2

Phil
Phil

Reputation: 73

are you using Firefox? Firefox and IE sometimes make problems when viewing ply use Chrome or Safari.

Upvotes: 0

Andrew Duncan
Andrew Duncan

Reputation: 321

Having had a very quick glance... Few things - but firstly your reference to the store is incorrect.

In your DataView you should don't need the quotes:

store: CitiesStore,

Also you don't need the new keyword on the store as you're using Ext.Create.

This should get you a bit further at least.

Upvotes: 0

Related Questions