how to load json in extjs

Question

i am loading the values coming from web service but i get following error message. ChatStore.data.items[i] is undefined.

Mapping code for extjs is

ChatStore = new Ext.data.JsonStore({
         storeId: 'ChatStore1',
         fields: [
                    {name: "pic_url", mapping: "sender_pic_url"}, 
                   {name: "first_name", mapping: "first_name"},
                    {name: "last_name", mapping: "last_name"},
                    {name: "message_text", mapping: "message_text"},
                    {name: "time", mapping: "time"}

                ]        

     }); 

code for loading data from webservice

Ext.Ajax.request({
        url: 'webservice call',
         params: Ext.encode('{"sender_user_id":"' + suid + '","receiver_user_id":"' + ruid + '"}'),
         headers: { 'Content-type': 'application/json;charset=utf-8' },
        success: function (result, request) {

            retData = (result.responseText);
            alert(retData);
             retData = eval("(" + retData + ")");
             if (retData.status == 'success') {


                 //ChatStore.loadData(retData.result.messages);
                 //ChatStore.loadData(retData.result);
                 for (var i = 0; i < retData.result.messages.length; i++) {
                     if (retData.result.messages[i].message_from == "YES") {

                         ChatStore.data.items[i].data.pic_url = retData.result.sender_pic_url;
                         ChatStore.data.items[i].data.first_name = retData.result.sender_name;


                    }
                     else {
                        ChatStore.data.items[i].data.pic_url = retData.result.receiver_pic_url;
                         ChatStore.data.items[i].data.first_name = retData.result.reciever_name;
                    } 

                     ChatStore.data.items[i].data.message_text = retData.result.messages[i].message_text;
                    ChatStore.data.items[i].data.time = retData.result.messages[i].time;

                }
                // ChatPanel.render('divchat');

                 messagePanel.hide();
                ChatPanel.show();
            }


             else { alert('error loading first radius'); }

         },
        failure: function (result, request) {

             alert("Error: " + result.statusText);
         }

         });  
return false;
}

My webservice result is:-----

{
    "status": "success",
    "message": "Messages are listing below",
    "result": {
        "sender_name": "Paul",
        "reciever_name": "Clay",
        "sender_pic_url": "Images/f1.jpg",
        "receiver_pic_url": "Images/f2.jpg",
        "messages": [
            {
                "message_from": "YES",
                "message_text": "hi, how r u?",
                "time": "12:00am"
            },
            {
                "message_from": "NO",
                "message_text": "hi, where are you?",
                "time": "1:00am"
            },
            {
                "message_from": "NO",
                "message_text": "Dear, you are invited for the meeting",
                "time": "2:00am"
            },
            {
                "message_from": "YES",
                "message_text": "hi, how r u?",
                "time": "12:00am"
            },
            {
                "message_from": "NO",
                "message_text": "hi, where are you?",
                "time": "1:00am"
            },
            {
                "message_from": "NO",
                "message_text": "Dear, you are invited for the meeting",
                "time": "2:00am"
            },
            {
                "message_from": "NO",
                "message_text": "Ya ill be there",
                "time": "2:00am"
            },
            {
                "message_from": "NO",
                "message_text": "at what time party starts",
                "time": "2:00am"
            },
            {
                "message_from": "YES",
                "message_text": "6Oclock in the evening",
                "time": "2:00am"
            },
            {
                "message_from": "NO",
                "message_text": "Who will the chief guest",
                "time": "2:00am"
            },
            {
                "message_from": "YES",
                "message_text": "our city mayor",
                "time": "2:00am"
            }
        ]
    }
}

i dont know where the things go wrong.

Answer 1

You can't just assign items to the store.items array. First of all it's undefined. Second, it's not correct approach overall.

You need either to specify Json proxy object in the store and then store will load itself automatically and all items will be populated without any special code, or

You need to use store.add() function to add new items to the store.

From your code looks like you're using store.load() method, no? Can you post more code on how exactly you load data and how you're communication with the server looks like.