Trying to display basic JSON data in a panel

[rwbaker]

I've been working with Sencha Touch for a few days to build a small MVC app that has a TabPanel and 4 tabs. I have some dummy JSON data (/data/gis.json) that I'd like to display on one of the tabs (/app/view/Home.js). My app is autoloading the JSON data and the console reports 'XHR finished loading...'.

I'm not sure where to go next—how do I go about displaying the data in my panel?

Any help would be appreciated, or, a link to a ST2 MVC example app that is displaying JSON data in a template. I tried looking through the Kiva and Twitter app but it's just not clicking.

/app/model/Home.js

Ext.define('EOC.model.Home', {
    extend: 'Ext.data.Model',


    config: {
        fields: [
            {name: "flood_zone",       type: "int"},
            {name: "evac_zone",        type: "int"}
        ]
    }
    
});

/app/store/Gis.js

Ext.define('EOC.store.Gis', {
    extend      : 'Ext.data.Store',
    requires    : 'EOC.model.Home',
    
    config: {
        model       : 'EOC.model.Home',


        proxy : {
            type    : 'ajax',
            url     : 'data/gis.json',
            reader    : {
                type            : 'json',
                rootProperty    : 'gis'
            }
        },


        autoLoad    : true
    },
});

/app/view/Home.js

Ext.define('EOC.view.Home', {
    extend  : 'Ext.Panel',
    alias   : 'widget.home',
    title   : 'Home',
    config: {
        title       : 'Home',
        iconCls     : 'star',
        cls         : 'home',
        scrollable  : 'auto',
        items : [
            {
                xtype   : 'panel',
                cls     : 'content',
                items   : [
                    {
                        xtype   : 'panel',
                        tpl     : 'Evacuation Zone: {evac_zone}'
                    },
                    {
                        xtype   : 'panel',
                        tpl     : 'Flood Zone: {flood_zone}'
                    }
                ]
            }
        ]
    },
});

/data/gis.json

{
    success: true,
    "gis": [
        {
            "evac_zone"   : 0,
            "flood_zone"  : 5
        }
    ]
}

[mitchellsimoens]

If you are going to use a tpl, then you need to give it data to use. This can be an array or an object. Ext.Component (or a subclass e.g. Container or Panel) does not accept a store or an array of records, it accepts something like:

[
    {
        foo : 'bar'
    }
]

or

{
    foo : 'bar'
}

Depending how your tpl is setup.

[rwbaker]

Okay...

My data must come from a JSON file, so that means I need to use something like a DataView instead?

I'm still trying to figure out ST2, so any article links or tutorials explaining this will help. I've mostly been finding ST1 stuff which is just different enough to confuse me.