pagingmemory config was working very fine till Ext JS 4 BUT it seems some issue is there in Ext JS 5. So we can not use pagingmemory directly, in stead we have to manually handle data from pagination. It is easy and just one line code, take page start and limit value and slice your actual data and send back to store proxy data variable.
Two thinks keep in mind for below example:
1. In storeProxy, added new config name is actualData where you have to assign your complete data fetch from back end.
2. storeProxy.reader.rootProperty value I used in manually hardword "rows" in slice method where I cut data for current page.
Please just copy and paste below code (change extjs css and js file path accordginly), it work perfectly.
<!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 src="extjs-5.1.0/examples/ux/data/NOCPagingMemoryProxy.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',
actualdata: mydata,
data: mydata
};
//storeProxy.type = 'pagingmemory';
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,
listeners: {
beforeload : function(store, operation, eOpts){
if (operation._start !== undefined && operation._limit !== undefined) {
// Here you have to manually handle data for requested page as pagingmemory not working.
store.proxy.data.rows = store.proxy.actualdata.rows.slice(operation._start, operation._start + operation._limit);
}
}
}
});
var dockedPagingToolbar = [];
dockedPagingToolbar = [{
xtype: 'pagingtoolbar',
store: studentStore,
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: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
]
});
// studentStore.loadPage(1);
});
</script>
</head>
</html>
Please refer this link blog for better example on Extjs 5.1 without using any hard coded data.
No comments:
Post a Comment
You can put your comments here (Either feedback or your Question related to blog)