Hello,
I am trying to add paging in my grid view, I am able to show the grid with data from JSON in it and paging tool bar with fine page numbers, but as I run it all the content are populated on very first page instead of paging.
My store JS
Code:
var itemsPerPage = 5;
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
id:'userStoreID',
pageSize:itemsPerPage,
autoLoad: {params:{start: 0, limit: itemsPerPage}},
proxy: {
type: 'ajax',
url: 'pagingstore.js',
api: {
read: 'data/users.json',
update: 'data/updateUsers.json'
},
reader: {
type: 'json',
totalProperty: 'results',
root: 'contacts',
successProperty: 'success'
}
}
});
My Model JS
Code:
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['Id', 'FirstName', 'LastName'],
});
MY View js
Code:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias : 'widget.userContactlistPanel',
title: 'Contacts List',
type: 'hbox',
items: [
{
xtype: 'gridpanel',
height: 174,
id: 'contactListGrid',
width: 616,
autoScroll: true,
maintainFlex: true,
title: '',
store: 'Users',
columnLines: true,
selType: 'rowmodel',
// do not reset the scrollbar when the view refreshs
invalidateScrollerOnRefresh: false,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'FirstName',
text: 'FirstName',
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'LastName',
text: 'LastName',
flex: 1
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
width: 360,
displayInfo: true,
store: 'Users',
dock: 'bottom',
pageSize: 5
}
]}
]
})
MY JSON
Code:
{
"totalSize": 10,
"success": "true",
"contacts": [
{
"attributes": {
"type": "Contact",
"url": "/services/data/v25.0/sobjects/Contact/0039000000DOSprAAH"
},
"FirstName": "Ednakk",
"LastName": "Frank",
"Insurance_Name__c": "AIG Life",
"Insurance_Id__c": "0039000000DH9A2AAL",
"Type__c": "ssafvsdv"
},
{
"attributes": {
"type": "Contact",
"url": "/services/data/v25.0/sobjects/Contact/0039000000DH9A2AAL"
},
"FirstName": "Tom",
"LastName": "Ripley",
"Insurance_Name__c": null,
"Insurance_Id__c": null,
"Type__c": null
},
{
"attributes": {
"type": "Contact",
"url": "/services/data/v25.0/sobjects/Contact/0039000000DH9A3AAL"
},
"FirstName": "Liz",
"LastName": "D'Cruz",
"Insurance_Name__c": null,
"Insurance_Id__c": null,
"Type__c": null
. . . . . . . .
. . . . . . . .
}
]
},
OUTPUToutputGrid.PNG image attached.
Plz share some code if possible I have tried a lot from the ExtJs 4 Doc.
issue with paging in gridpanal from json.
Reply With Quote
