javascript 在 extjs 网格中分页

Paging in extjs grid

提问by Amit

I have a html page having a div id="grid-example".

我有一个带有 div 的 html 页面id="grid-example"。

I referred a js file contains as following code

我提到一个js文件包含如下代码

Ext.onReady(function () {

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'],
    ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
    ['American Express Company', 52.55, 0.01, 0.02, '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'],
    ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
    ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
    ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
    ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
    ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
    ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
    ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
    ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
    ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
    ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
    ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
    ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am']

];

// create the data store
var store = Ext.create('Ext.data.ArrayStore', {

    fields: [
       { name: 'company' },
       { name: 'price', type: 'float' },
       { name: 'change', type: 'float' },
       { name: 'pctChange', type: 'float' },
       { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ],
   data: myData

});

// create the Grid
//var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    stateId: 'stateGrid',

    columns: [
        {
            text: 'Company',
            flex: 1,
            sortable: true,
            dataIndex: 'company'
        },

        {
            text: 'Price',
            width: 75,
            sortable: true,
            //renderer: 'usMoney',
            dataIndex: 'price',
            menuDisabled: true //it will show/hide menu for sorting.

        },

        {
            text: 'Change',
            width: 75,
            sortable: true,
            dataIndex: 'change',
            menuDisabled: true //it will show/hide menu for sorting.
        },

        {
            text: '% Change',
            width: 75,
            sortable: true,
            dataIndex: 'pctChange'
        },

        {
            text: 'Last Updated',
            width: 185,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer("d/M/yy"),
            dataIndex: 'lastChange'
        },

    ],

        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            pageSize: 5,              
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"

        }),

    height: 550,
    width: 600,
    title: 'Array Grid',
    renderTo: 'grid-example',
    viewConfig: {
    stripeRows: true

    }
});

});

I am getting the grid but paging is not working...please help me.` I want no. of rows should be 5 per page.

我正在获取网格，但分页不起作用...请帮助我。`我不想要。每页的行数应为 5。

回答by Ajit Kumar

@Amit

@阿米特

I see that you are using the local array to populate the data in the grid panel. ExtJS grid panel paging toolbar works only with the server side data and uses the following properties to fetch the data from the server and calculate the pages:

我看到您正在使用本地数组来填充网格面板中的数据。ExtJS 网格面板分页工具栏仅适用于服务器端数据，并使用以下属性从服务器获取数据并计算页面：

• start
• limit
• totalProperty - on the reader
• pageSize

• 开始
• 限制
• totalProperty - 在读卡器上
• 页面大小

The server must handle the start and limit and the pageSize to return the requested data and set the total number of records to the a property, which is set to totalProperty (say, 'totalRecords').

服务器必须处理 start 和 limit 以及 pageSize 以返回请求的数据并将记录总数设置为 a 属性，该属性设置为 totalProperty（例如，'totalRecords'）。

In case you are looking for pagination with the in-memory data, you may refer to http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5or refer to the examples code in your downloaded extjs 3.x folder - examples/ux/PagingMemoryProxy.js

如果您正在寻找内存数据的分页，您可以参考http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5或参考您下载的 extjs 3.x 文件夹中的示例代码 - examples/ux/PagingMemoryProxy.js

回答by dbrin

pageSize: 5config must go on the store.

pageSize: 5配置必须去商店。

回答by Hadas

Try with delete limit:10I don't see it in the Ext.PagingToolbar's configs.

尝试删除limit:10我在 Ext.PagingToolbar 的配置中没有看到它。

回答by Despertar

For me setting the proper reader properties is what did it. Then you just have to handle the query string parameters startand limiton your server to perform the selection of data. DataSource.Skip(start).Take(limit);

对我来说，设置正确的阅读器属性就是这样做的。然后您只需要处理查询字符串参数start并limit在您的服务器上执行数据选择。DataSource.Skip(start).Take(limit);

var myStore = Ext.create('Ext.data.Store', {
    model: 'Book',
    pageSize: 10,
    proxy: {
        type: 'ajax',
        url: '/api/data',
        reader: {
            // sends url?start={number}&limit={number}
            type: 'json',
            totalProperty: "results",
            root: "rows"
        }
    },
    autoLoad: { params: { start: 0, limit: 10 } }
});

---

---

The resposne that I would return from the web service to coincide with the above settings.

我将从 Web 服务返回的响应与上述设置一致。

{
    "success":"true",
    "results":100,
    "rows":[
        {"Title":"Book #61","Author":"Some Guy","Year":2010}
        ....
        ....
    ]
}