extjs - Load data from JSON into a panel

Question

I want to load data from a JSON file into a panel (not a grid, just a panel) and display the info using a template. I am at a loss for how to hook up a panel with a model/store. I am using Sencha Architect if that matters. I have the store and model set up and connected. I'm just missing how to pass that info along to the panel itself.

The json file is like so:

"overview": {
    "image": "my-picture.jpg",
    "name": "my name",
    "title": "my title",
    "address": {
        "line1": "123 Fake St",
        "line2": "",
        "city": "Nowhere",
        "state": "NJ",
        "zip" : "12345"
    }
}

And the template I'd like to use would look like this:

<div>
    <img src="images/{image}"><br/>
    {name}, {title}
    <br/>
    {address.line1}<br/>
    {address.line2}<br/>
    {address.city}, {address.state}<br/>
    {address.zip}
</div>

I have accessed the store by adding the code: var s = Ext.getStore('MyJsonFile'); and the accessing the record by doing "var r = s.getAt(0);" but again, still not sure how to push that to the panel. — Jason Lawton

Jason Lawton Jason Lawton · Accepted Answer · 2012-10-24T19:14:12

I have come up with an adequate solution:

...
// panel declaration in the items array
{
    xtype: 'panel',
    flex: 1,
    region: 'west',
    tpl: [
        '<div>',
        '<img src="images/{image}"><br/>',
        '{name}, {title}',
        '<br/>',
        '{address.line1}<br/>',
        '{address.line2}<br/>',
        '{address.city}, {address.state}<br/>',
        '{address.zip}',
        '</div>'
    ],
    width: 150,
    bodyCls: 'x-panel-body-white',
    header: false,
    title: 'Address',
    listeners: {
        afterrender: {
            fn: me.onPanelAfterRender,
            scope: me
        }
    }
    },

...
// and later on in the code, a function that fires after render
onPanelAfterRender: function(abstractcomponent, options) {
    var s = Ext.getStore('MyAddresses');
    var r = s.getAt(0).raw;
    abstractcomponent.tpl.overwrite(abstractcomponent.body, r);
},

extjs - Load data from JSON into a panel

1 Answers