Here I am going to show one very basic example for Pagination (Paging Tool Bar), along with one very basic issue fixed.
Bug is there in Extjs 5.1 that if you go last page of your grid and enter some page number that is not exist then page number does not refresh to last page number.
First code Demo:
<!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>
<style>
.x-grid-item-selected .x-grid-cell {
background-color: #B3D4FF !important;
color :#000000 !important;
}
</style>
<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,
dock: 'bottom',
displayInfo: true,
readPageFromInput : function(pageData){
var inputItem = this.getInputItem(),
pageNum = false,
v;
if (inputItem) {
v = inputItem.getValue();
pageNum = parseInt(v, 10);
if(pageNum > pageData.pageCount){
inputItem.setValue(pageData.pageCount);
}
if (!v || isNaN(pageNum)) {
inputItem.setValue(pageData.currentPage);
return false;
}
}
return pageNum;
}
}];
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>
Solution of that bug:
You have to override the paging.js readPageFromInput method to add fix of that bug. Please see the bold method in above code.
No comments:
Post a Comment
You can put your comments here (Either feedback or your Question related to blog)