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 ?

As others said, you should use JsonStore. But you should also check your Model definition...sometimes when using Array data (as in first example), you use a "mapping" config to define the field, but with the Json response you have, that will be no longer needed. Post your Model definition if you'd like more help. — existdissolve, Sep 26 '13 at 09:26
Existdissolve,model: var types=Ext.data.Types; Ext.define('PetCrumbs.model.Member', { extend : 'Ext.data.Model', fields : [{name : 'srNo',type : types.INT}, {name : 'memberId', type : types.INT}, {name : 'memberName',type : types.STRING}, { name : 'emailId',type : types.STRING}, {name : 'address',type : types.STRING}, {name : 'state',type : types.STRING}, {name : 'city', type : types.STRING}, {name : 'zip',type : types.STRING}, {name : 'gender',type : types.STRING}, {name : 'myPackage',type :types.STRING}, {name : 'joinedCommunities',type : types.STRING }, {name : 'deleted',type : types.BOOL}, — Ram, Sep 26 '13 at 09:46
{name : 'password',type : types.STRING}, {name : 'phone',type : types.STRING}, {name : 'street',type : types.STRING}]}); I have used store bt the result is same ...... — Ram, Sep 26 '13 at 09:47

score 1 · Answer 1 · answered Sep 27 '13 at 14:03

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.

score 0 · Answer 2 · answered Sep 26 '13 at 06:15

0

My guess would be that you use ArrayStore, which works well with locally hardcoded data (as it is array), but when you want to load data remotely - you should extend Ext.data.Store instead?

answered Sep 26 '13 at 06:15

Laimoncijus

8,615
10
58
81

score 0 · Answer 3 · answered Sep 26 '13 at 07:25

0

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

answered Sep 26 '13 at 07:25

zura

106
6

@Ram and can you provide or just review your model defenition? – zura Sep 26 '13 at 09:59
@Ram at first - try to change adress type - it isn`t string, its object. Also look at http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Model-cfg-hasMany and http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Model-cfg-belongsTo – zura Sep 26 '13 at 10:52

Extjs4 Load data in grid from server

Response Success :

Response Failure :

3 Answers3