Ext js 4 简单实现分页查询续--客户端分页

最新推荐文章于 2019-06-05 14:42:28 发布

原创最新推荐文章于 2019-06-05 14:42:28 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Ext4 #Extjs #分页 #json

EXTjs 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种客户端分页的方法，通过使用PagingMemoryProxy组件，将所有数据加载到内存中进行分页操作。文章详细展示了如何配置ExtJS的store及grid面板，并提供了动态赋值JSON数据的具体步骤。

之前介绍了后台分页,这次因为需求,不得不改成客户端分页,也就是一次把所有数据从后台读到前台,保存到内存中,再执行分页操作.

这个方法的先决条件是需要一个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();
            }
    });