ExtJS 网格面板分页工具栏未显示每页所需的记录数

Posted 2023-02-26

【中文标题】ExtJS 网格面板分页工具栏未显示每页所需的记录数

【英文标题】：ExtJS grid Panel Paging toolbar not showing required number of records per page

【发布时间】：2011-06-08 09:43:41

【问题描述】：

我是 extJS 的新手，我试图在网格面板中显示 8[a random number] 记录，并且还使用分页工具栏来显示每页 4 条记录，但它只在一页中显示 8 条记录。

var myData = [
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
    ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
    ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
    ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
    ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
    ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
    ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
    ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

var store = new Ext.data.ArrayStore(
    totalProperty: 8,
    autoLoad: 
        params: 
            start: 0,
            limit: 4
        
    ,
    fields: [
        name: 'company'
    , 
        name: 'price',
        type: 'float'
    , 
        name: 'change',
        type: 'float'
    , 
        name: 'pctChange',
        type: 'float'
    , 
        name: 'lastChange',
        type: 'date',
        dateFormat: 'n/j h:ia'
    ]
);

store.loadData(myData);

var grid = new Ext.grid.GridPanel(
    store: store,
    columns: [
        id: 'company',
        header: "Company",
        width: 160,
        sortable: true,
        dataIndex: 'company'
    , 
        header: "Price",
        width: 75,
        sortable: true,
        renderer: 'usMoney',
        dataIndex: 'price'
    , 
        header: "Change",
        width: 75,
        sortable: true,
        renderer: change,
        dataIndex: 'change'
    , 
        header: "% Change",
        width: 75,
        sortable: true,
        renderer: pctChange,
        dataIndex: 'pctChange'
    , 
        header: "Last Updated",
        width: 85,
        sortable: true,
        renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        dataIndex: 'lastChange'
    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    height: 350,
    width: 600,
    title: 'Array Grid',

    bbar: new Ext.PagingToolbar(
        store: store,
        pageSize: 4,
        displayInfo: true
    ),
    viewConfig: 
        forceFit: true
    
);

谁能告诉我如何解决这个问题？

【参考方案1】：

您可以使用Ext.ux.data.PagingStore 进行客户端寻呼。 试试这样的：

var store = new Ext.ux.data.PagingStore(
    reader: new Ext.data.ArrayReader(
        fields: [
                 name: 'company',
                 name: 'price', type: 'float',
                 name: 'change', type: 'float',
                 name: 'pctChange', type: 'float',
                 name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'
                ],
    ),
    totalProperty : 8,
    autoLoad:
        params:start:0, limit:4
    ,
    data: myData
);

您可能需要稍微调整一下，因为我尚未对其进行测试。 我让它使用JsonReader 从服务器获取记录。 希望这会有所帮助。

【讨论】：

再次感谢！我做了一些研究并稍微更改了代码。但现在我得到 this.proxy 未定义。请帮帮我 - 你可以看到我的代码：codepad.org/qbRs1cbD

@Anna：因为您正在使用 autoLoad 配置属性，商店希望有一个具有已定义 url 的代理来发送参数 start 和 limit。

其实我在商店里使用了代理配置。没有它“不”

【参考方案2】：

而不是使用 store.loadData() 调用，您应该调用 store 上的 .load() 函数并传入一个带有指定最大页面大小的参数的对象。

查看此页面上的示例http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.PagingToolbar

编辑：另一种选择是执行以下操作。调用 .loadData() 并在实例化网格后，您可以调用

grid.store.load(params:start: 0, limit: 4);

【讨论】：

我已经用另一种选择修改了答案:)

感谢您的回答。但它并没有真正帮助我。当我使用 .load() 并提供数据时：配置中的 myData。什么都没有出现。 Firebug 说 this.proxy 是未定义的。请帮忙！

@Anna: 你用的是什么版本的 extJ？