Extjs4 Load data in grid from server

Question

How to load data in grid from server I am able to load data from Store to grid but not able to load data from server to the store and then into grid Server API Details :

http://192.1681.102:8080/Petcrumbs/member/getMemberList

Request Parameters :

{"pageNumber":5}

Response Success :

{ "listOfMembers": [ { "address": { "state": "MH", "country": "India", "city": "Pune", "addressId": 52, "streetName": "Karve Road", "streetNameTwo": "Nal Stop", "zipCode": "412042" }, "name": "Test Mmber4", "password": "287974", "authKey": "99710ff8d98346f51a7b3df83c16257", "gender": "Male", "deviceToken": "ldjhakjhdkjahn42,n4lk2jedlkandmandlkand", "community": "Kothrud", "emailId": "r.pekam@mb.com", "phone": "9096305571", "image": null, "memberId": 41, "active": 1, "deleted": false, "myPackage": "Gold", "joinedDate": "09-17-2013" } ], "message": "Member retrieved successfully.", "success": true }

Response Failure :

{ "listOfMembers": null, "message": "Unable to retrieve members.", "success": false

}

---

In EXTJS Store

 Ext.define('PetCrumbs.store.Members', {
extend : 'Ext.data.ArrayStore',
model : 'PetCrumbs.model.Member',

autoLoad : true,
//storeId : 'Data',
proxy : {
    type : 'ajax',
    url : '/Petcrumbs/member/getMemberList',
    method : 'POST',
    headers : {
        'Content-Type' : 'application/json',
        'Accept' : 'application/json'
    },
    jsonData : {
        pageNumber : "5"
    },
    reader : {
        type : 'json',
        root: 'listOfMembers',
        successProperty: 'success'
    }
 }
});

When I have Store like this ( Hard Coded Data ) grid displays data :

Ext.define('PetCrumbs.store.Members', {
extend: 'Ext.data.ArrayStore',
model: 'PetCrumbs.model.Member',

data: [
['1','1002','Asin','kothroud@gmail.com','kothrud,Pune','MH',
 'Pune','411051','Male','Gold','Kothrud','1'],['2','1012','Karina','Pashan@gmail.com',
'Pashan,Pune','MH','Pune','411051','Female','Silver','Pashan','0']
]   
});

Please tell me what is wrong with the above code ?

Answer 1

Can you modify the way your server sends the data? the easiest would be to use a plain Ext.data.Store with Ext.data.reader.Json . To use this your JSON should look like:

{ 
   "listOfMembers": [
   {"attr1":"value1",:"attr2":"value2",...},... 
   ], 
   "message": "Unable to retrieve members.", "success": false
}

Then it will be straight forward.

If you want to continue with your output you have to either modify the reader or define more complex object relations.

Answer 2

我的猜测是您使用ArrayStore ，它与本地硬编码数据（因为它是数组）很好地配合使用，但是当您想远程加载数据时，应该扩展Ext.data.Store呢？

Answer 3

You are using ArrayStore, but server returns JSON. So you should use JsonStore. Or just basic store with configured reader