Update Panel From Store

[explosivo22]

I currently am trying to update my panel with values that I have in a store object the comes from a json response. The trouble I am having is that I don't know how to update the panel with the data from the store. I have commented in the code below where I am having the issue. Any help would be appreciated.

// JavaScript Document
new Ext.Application({


    name: 'Test',
    launch: function() {


            Ext.regModel('ListItem', {
                fields: 
                    [
                        'title',
                        'welcome',
                        'picture'
                    ]
            });
            
            var store = new Ext.data.Store({
                model: 'ListItem',
                proxy: {
                    type: 'ajax',
                    url : 'home.json',
                    reader: {
                        type: 'json',
                    }
                },
                autoLoad: true
            });
            
            var mainContentTpl = new Ext.XTemplate(
                    '<tpl for=".">',
                        '<div>',
                            '<p>{title}</p>',
                            '<p>{welcome}</p>',
                            '<img src="http://src.sencha.io/http://www.occhsband.com/{picture}" />',
                        '</div>',
                    '</tpl>'
                );
            
            var mainContent = new PanelExtend ({
                title: 'Home',
                iconCls: 'settings',
                tpl: mainContentTpl,
                scroll: 'vertical'
            });
                
            
            var tabPanel = new Ext.TabPanel ({
                layout: {
                    pack: 'center'
                },
                tabBarDock: 'bottom',
                ui: 'light',
                cardSwitchAnimation: {
                    type: 'flip',
                    cover: true
                },
                defaults: {
                    scroll: 'vertical'
                },
                fullscreen: true,
                items: [
                        {
                            title:'Test 1',
                            html: 'Test 1',
                            iconCls: 'home'
                        },
                        mainContent
                            
                ],
                dockedItems: [{xtype: 'toolbar', title: 'OCCHS Band'}]
            });        
                Ext.reg('mypanel',PanelExtend),
                  //mainContent.doit(store.getAt(0).data.title);
                store.on('load', function() {
 
                    // data loaded, do something with it here... 
                    //This is where I am having the problem.  I need to update the panel with the data that is in the
                    //store with title, welcome, and picture, but it returns nothing to update the panel with
                    //what do I need here to update the panel with the needed info
                    mainContent.doit(store.getAt(0));
                 
                });
                store.load();
    }


});// JavaScript Document


    var PanelExtend = Ext.extend(Ext.Panel,{
             title:'panel',
             doit: function(name){
                 this.update(name);
             }
     });

json response:

{    "title": "NIGHTWATCH",    "welcome": " As you watch OC Band preform from the stands you may begin to question yourself about the chill in the air. The chill you are feeling may just be the coming from sound of this year's errie contemporary piece. As you listen to Nightwatch don't be surprised when the hairs on your neck and arms begin to rise sending chills down your spine. You may even start to get the eerie feeling you are being watched from behind... </b> ",    "picture": "uploads/nightwatch.jpg"}

[jratcliff]

your json response needs to be an array of json objects. All you have is just a single json object. So wrap your json object in square brackets and you should be good then.

[explosivo22]

So something along the lines of this for my json code? cause it still only shows a question mark where the picture should be.

[{
    "title": "NIGHTWATCH",
    "welcome": " As you watch OC Band preform from the stands you may begin to question yourself about the chill in the air. The chill you are feeling may just be the coming from sound of this year's errie contemporary piece. As you listen to Nightwatch don't be surprised when the hairs on your neck and arms begin to rise sending chills down your spine. You may even start to get the eerie feeling you are being watched from behind... </b> ",
    "picture": "uploads/nightwatch.jpg"
}]

[jratcliff]

So something along the lines of this for my json code? cause it still only shows a question mark where the picture should be.

[{
    "title": "NIGHTWATCH",
    "welcome": " As you watch OC Band preform from the stands you may begin to question yourself about the chill in the air. The chill you are feeling may just be the coming from sound of this year's errie contemporary piece. As you listen to Nightwatch don't be surprised when the hairs on your neck and arms begin to rise sending chills down your spine. You may even start to get the eerie feeling you are being watched from behind... </b> ",
    "picture": "uploads/nightwatch.jpg"
}]

Yes, exactly. And as for the image, it loads fine for me.

[explosivo22]

Thanks for the quick reply. Hmm its really wierd though. I have double checked everything and all i get is just a question mark. There is no content on that tab at all

[jratcliff]

oh, sorry, I forgot that I also changed your store's load function to pass in the data property of the record.

mainContent.doit(store.getAt(0).data);

The update method needs a json object of name/value pairs and the data property of a record is where the name/value pairs are stored.

[explosivo22]

thanks for all the help. i got it working now.