ExtJS 5.1 has one bug that when you load grid panel then first time it will not show correct paging number in paging tool. Once you do page next then it starts working.
During page load time it always show Page 1 of 1.
First Pagination code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>ExtJS 5.1.0 Grid Pagination Example</title>
<link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
<script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
<script>
Ext.onReady(function(){
Ext.define('Student',{
extend: 'Ext.data.Model',
fields:[{name: 'id'},{name: 'name'},{name: 'mobile'} ]
});
var mydata = {
"success":true,
"totalCount": 24,
"rows":[
{status: true, id:1, name:'Binod', mobile:'0000099257'},
{status: true, id:2, name:'Binod 2', mobile:'0000099257'},
{status: true, id:3, name:'Akshu', mobile:'12345070277'},
{status: false, id:4, name:'Sanjay 4', mobile:'999988885'},
{status: false, id:5, name:'Sanjay 5', mobile:'999988885'},
{status: false, id:6, name:'Sanjay 6', mobile:'999988885'},
{status: false, id:7, name:'Sanjay 7', mobile:'999988885'},
{status: false, id:8, name:'Sanjay 8', mobile:'999988885'},
{status: false, id:9, name:'Sanjay 9', mobile:'999988885'},
{status: false, id:10, name:'Sanjay 10', mobile:'999988885'},
{status: false, id:11, name:'Sanjay 11', mobile:'999988885'},
{status: false, id:12, name:'Sanjay 12', mobile:'999988885'},
{status: false, id:13, name:'Sanjay 13 ', mobile:'999988885'},
{status: false, id:14, name:'Sanjay 14', mobile:'999988885'},
{status: false, id:15, name:'Sanjay 15', mobile:'999988885'},
{status: false, id:16, name:'Sanjay 16', mobile:'999988885'},
{status: false, id:17, name:'Sanjay 17', mobile:'999988885'},
{status: false, id:18, name:'Sanjay 18', mobile:'999988885'},
{status: false, id:19, name:'Sanjay 19', mobile:'999988885'},
{status: false, id:20, name:'Sanjay 20', mobile:'999988885'},
{status: false, id:21, name:'Sanjay 21', mobile:'999988885'},
{status: false, id:22, name:'Sanjay 22', mobile:'999988885'},
{status: false, id:23, name:'Sanjay 23', mobile:'999988885'},
{status: true, id:24, name:'Zambia 24', mobile:'8888999997'}
]
}
var storeProxy = {
type: 'memory',
enablePaging : true,
data: mydata
};
storeProxy.reader = {
type: 'json',
totalProperty: 'totalCount',
rootProperty: 'rows',
successProperty: 'success'
};
var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
remoteSort: true,
remoteFilter : true,
pageSize: 10,
proxy: storeProxy
});
var dockedPagingToolbar = [];
dockedPagingToolbar = [{
xtype: 'pagingtoolbar',
store: studentStore,
afterPageText:'of '+Math.ceil( studentStore.proxy.data.rows.length / studentStore.pageSize) ,
dock: 'bottom',
displayInfo: true
}];
Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 250,
height: 290,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
dockedItems : dockedPagingToolbar,
columns:[
{xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{text: 'Roll Number', filter: 'numeric', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
]
});
});
</script>
</head>
</html>
Fix bug:
var dockedPagingToolbar = [];
dockedPagingToolbar = [{
xtype: 'pagingtoolbar',
store: studentStore,
afterPageText:'of '+Math.ceil( studentStore.proxy.data.rows.length / studentStore.pageSize) ,
dock: 'bottom',
displayInfo: true
}];
No comments:
Post a Comment
You can put your comments here (Either feedback or your Question related to blog)