1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Answers
    2
    Vote Rating
    2
    rwbaker is on a distinguished road

      0  

    Default Answered: Trying to display basic JSON data in a panel

    Answered: Trying to display basic JSON data in a panel


    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

    Code:
    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

    Code:
    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

    Code:
    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

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

  2. 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:

    Code:
    [
        {
            foo : 'bar'
        }
    ]
    or

    Code:
    {
        foo : 'bar'
    }
    Depending how your tpl is setup.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    [
        {
            foo : 'bar'
        }
    ]
    or

    Code:
    {
        foo : 'bar'
    }
    Depending how your tpl is setup.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Answers
    2
    Vote Rating
    2
    rwbaker is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar