While studying the book 'Mastering Ext Js', I encountered a problem with the Grid Panel not loading data from the store. Despite checking the Json format server, everything seems to be fine and there are no errors in the console.
Below is my model class:
Ext.define("pg.model.security.User", {
extend: 'Ext.data.Model',
idProperty: 'userName',
fields: [
{
name: 'userName'
}, {
name: 'roleId'
}, {
name: 'fullName'
}, {
name: 'emailId'
}, {
name: 'mobileNumber'
}, {
name: 'landLineNumber'
}, {
name: 'picture'
}
]
});
Here is the store class:
Ext.define('pg.store.security.Users', {
extend: 'Ext.data.Store',
requires: [
'pg.model.security.User' // #1
],
storeId:'userStore',
model: 'pg.model.security.User', // #2
proxy: {
type: 'ajax',
url: 'http://localhost:8080/parkgarau-ws/ws/park/userlist',
reader: {
type: 'json',
root: 'data'
}
}
});
I am able to successfully retrieve JSON format from the URL provided.
{"code":200,"message":"Success","data":"[{\"userName\":\"admin\",\"roleId\":\"SYS_ADMIN\",\"fullName\":\"Bibek Shakya\",\"emailId\":\"[email protected]\",\"mobileNumber\":\"9843598726\",\"landLineNumber\":\"014323565\",\"picture\":\"index.jpg\"}]"}
Here is my view class extending Grid Panel:
Ext.define('pg.view.security.UsersList', {
extend: 'Ext.grid.Panel',
alias: 'widget.userslist',
frame: true,
store: Ext.create('pg.store.security.Users'), // #1
columns: [
{
width: 150,
dataIndex: 'userName',
text: 'Username'
},
{
width: 200,
dataIndex: 'fullName',
flex: 1,
text: 'Name'
}, {
width: 250,
dataIndex: 'emailId',
text: 'Email'
}
]
});
This is my controller class:
Ext.define('pg.controller.security.Users', {
extend: 'Ext.app.Controller',
views: [
'security.Users' // #1
],
init: function (application) {
this.control({
"userslist": {// #2
render: this.onRender
}
});
},
onRender: function (component, options) { // #3
this.getStore('userStore').load();
}
});