1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    8
    Vote Rating
    0
    explosivo22 is on a distinguished road

      0  

    Default Answered: Update Panel From Store

    Answered: Update Panel From Store


    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.

    Code:
    // 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:
    Code:
    {    "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"}

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

  3. #2
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,109
    Vote Rating
    3
    Answers
    12
    jratcliff is on a distinguished road

      0  

    Default


    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.
    Jack Ratcliff
    Sencha Inc, Green bleeding Senchan

    How to report a bug:
    http://www.sencha.com/forum/showthre...o-report-a-bug

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    8
    Vote Rating
    0
    explosivo22 is on a distinguished road

      0  

    Default


    So something along the lines of this for my json code? cause it still only shows a question mark where the picture should be.
    Code:
    [{
        "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"
    }]

  5. #4
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,109
    Vote Rating
    3
    Answers
    12
    jratcliff is on a distinguished road

      0  

    Default


    Quote Originally Posted by explosivo22 View Post
    So something along the lines of this for my json code? cause it still only shows a question mark where the picture should be.
    Code:
    [{
        "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.
    Jack Ratcliff
    Sencha Inc, Green bleeding Senchan

    How to report a bug:
    http://www.sencha.com/forum/showthre...o-report-a-bug

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    8
    Vote Rating
    0
    explosivo22 is on a distinguished road

      0  

    Default no content still

    no content still


    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

  7. #6
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,109
    Vote Rating
    3
    Answers
    12
    jratcliff is on a distinguished road

      0  

    Default


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

    Code:
    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.
    Jack Ratcliff
    Sencha Inc, Green bleeding Senchan

    How to report a bug:
    http://www.sencha.com/forum/showthre...o-report-a-bug

  8. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    8
    Vote Rating
    0
    explosivo22 is on a distinguished road

      0  

    Default


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

Thread Participants: 1