ExtJS 4 与本地商店分页

Posted

技术标签:

【中文标题】ExtJS 4 与本地商店分页【英文标题】:ExtJS 4 pagination with local store 【发布时间】:2015-02-06 05:51:06 【问题描述】:

我有一个使用本地存储的网格,它是用数组创建的。我尝试使用此解决方案:Paging toolbar on custom component querying local data store 但它似乎不起作用。

我的代码:

    var myData = [];
    //... fill myData

    var store = Ext.create('Ext.data.ArrayStore', 
        fields: fields,
        data: myData,
        pageSize: 10,
        proxy: 
            type: 'pagingmemory'
        

    );


    // create the Grid
    var table = Ext.create('Ext.grid.Panel', 
        id: "reportTable",
        store: store,
        columnLines: true,
        columns: columns,
        viewConfig: 
            stripeRows: true
        ,
        dockedItems: [
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true
        ]
    );

如果没有这部分代码,网格会显示,但分页不起作用。有了它,整个网格根本不会出现。

    proxy: 
        type: 'pagingmemory'
    

可能是什么问题?

【问题讨论】:

有什么问题?有错误吗? myData 变量是什么样的?尝试在 fiddle.sencha.com 创建独立测试。 问题是分页不起作用并且网格没有显示,虽然没有分页它工作正常。 myData 包含网格的行。 你能把代码贴在 jsfiddle.net 上吗? 【参考方案1】:

问题很可能是 PagingMemoryProxy.js 没有被加载。 确保您明确加载此脚本(因为这是 'examples' 的一部分,它不是 ext-all 的一部分)您可以在 <extjs folder>\examples\ux\data\PagingMemoryProxy.js

下找到它

Ext.Loader.setConfig(
  enabled: true
);

Ext.Loader.setPath('Ext.ux', 'examples/ux');

Ext.require('Ext.ux.data.PagingMemoryProxy');

【讨论】:

【参考方案2】:

在某些 ExtJS 版本(即 4.2.2)中,不推荐使用 pagingmemory 代理。

改用memory 代理和enablePaging 配置:

proxy: 
    type: 'memory',
    enablePaging: true,

检查您的 ExtJS 版本的文档,看看您的版本中是否启用了此配置。

【讨论】:

以上是关于ExtJS 4 与本地商店分页的主要内容,如果未能解决你的问题,请参考以下文章

梦内容页分页标题提取

Grails extJS 网格分页

单页分页问题中的多个角度材料表

EXTJS 4 网格与分页不起作用---存储代理问题

Laravel 多页分页

react-slick 自定义分页分页道具使用