ExtJS网格面板分页工具栏不显示每页所需的记录数 [英] ExtJS grid Panel Paging toolbar not showing required number of records per page

问题描述

我是extJS的新手，我试图在网格面板中显示8个[一个随机数]记录，并且还使用分页工具栏显示每页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:00 am']，
 ['American International Group，Inc.'，64.13，0.31，0.49， '9/1 12:00 am']，
 ['AT& T Inc.'，31.61，-0.48，-1.54，'9/1 12:00 am']，
 ['Boeing Co. '，75.43，0.53，0.71，'9/1 12:00 am']，
 ['卡特彼勒公司'，67.27，0.92，1.39，'9/1 12:00 am']，
 [ '花旗集团公司'，49.37,0.02,0.04，'9/1 12:00 am']，
 ['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 / jh： ia'
}] 
}）; 
 
 store.loadData（myData）; 
 
 var grid = new Ext.grid.GridPanel（{
 store：store，
 columns：[{
 id：'company'，
 header ：公司，
宽度：160，
可排序：真，
 dataIndex：'公司'
}，{
标题：价格，
 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'
}，{
标题：最后更新 ，
 width：85，
 sortable：true，
 renderer：Ext.util.Format.dateRenderer（'m / d / Y'），
 dataIndex：'lastChange'
}]，
 stripeRow s：true，
 autoExpandColumn：'company'，
 height：350，
 width：600，
 title：'Array Grid'，
 
 bbar ：新的Ext.PagingToolbar（{
 store：store，
 pageSize：4，
 displayInfo：true 
}），
 viewConfig：{
 forceFit： true 
} 
}）; 
  

任何人都可以告诉我如何解决这个问题？

解决方案

而不是使用store.loadData（）调用，您应该在存储上调用.load（）函数，并传入一个对象，其中参数指定最大页面大小。

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

编辑：另一个选择是执行以下操作。调用.loadData（）并且在实例化了网格后，可以调用

  grid.store.load（{params： {start：0，limit：4}}）; 
  

I am new to extJS and I am trying to show 8[a random number] records in a grid panel and am also using paging toolbar to show 4 records per page but it shows 8 records in one page only.

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
    }
});

Can anyone tell me how can I solve this problem?

解决方案

instead of using the store.loadData() call you should be calling the .load() function on the store and passing in an object with arguments specifying your maximum page size.

check out the examples on this page http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.PagingToolbar

EDIT: Another option is to do the following. Call the .loadData() and after you have instantiated your grid, you can call

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

这篇关于ExtJS网格面板分页工具栏不显示每页所需的记录数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！