Results 1 to 3 of 3

Thread: Trying to display basic JSON data in a panel

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Answers
    2
    Vote Rating
    2
      0  

    Default 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 nexthow 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Answers
    2
    Vote Rating
    2
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •