之前介绍了后台分页,这次因为需求,不得不改成客户端分页,也就是一次把所有数据从后台读到前台,保存到内存中,再执行分页操作.
这个方法的先决条件是需要一个ext-all.js里没有的组件:
PagingMemoryProxy.js
(参考位置:ext-4.2.1.883\examples\ux\data\PagingMemoryProxy.js)
把它和ext-all.js一样引用后才可以直接使用.
代码同样很简单
1首先设置一个store的数据结构:
var storeAnalysisModelFields = [{ name: 'FS_NAME' }, { name: 'FS_POSITION' }]; Ext.define('storeAnalysisModel', { extend: 'Ext.data.Model', fields: storeAnalysisModelFields }); // 每页显示记录数 var itemsPerPage = 10; // 分页查询store var storeAnalysis = Ext.create('Ext.data.Store', { model: 'storeAnalysisModel', pageSize: itemsPerPage, proxy: { type: 'pagingmemory' } }); function storeAnalysisLoad() { storeAnalysis.load( { params: { start: 0, limit: itemsPerPage } } ); }
2再定义要绑定的panel:
/ ValuePanel = new Ext.grid.GridPanel({
title: '参数值', split: true, region: "south", height: 300, xtype: 'grid', store: storeAnalysis, columns: ValuePanelColumns, dockedItems: [{ xtype: 'pagingtoolbar', store: storeAnalysis, dock: 'bottom', emptyMsg: '没有数据', displayInfo: true, displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ', beforePageText: '第', afterPageText: '页/共{0}页' }] });
3最后动态给store的proxy的data赋一个json对象值,load一下就行了,列如:
// 读取全部json数据 function LoadStoreAnalysis() { $.ajax({ type: "POST", url: appPath + "/ExploredReserves/InitlistFieldData", data: "in_strListID=" + GetlistID() + "&in_iGasOliType=0", success: function (msg) { resjson = Ext.decode(msg); storeAnalysis.proxy.data = resjson; storeAnalysis.load(); } });