Question

我有以下Ext Grid，

Ext.onReady(function () {
    var dataStore = new Ext.data.JsonStore({
        proxy: {
            type: 'ajax',
            url: 'Default.aspx/CustomerData', //'web.aspx',
            headers: { 'Content-type': 'application/json' },
            reader: {
                type: 'json',
                root: 'd',
                totalProperty: 'totalCount'
            }
        },
        fields: [
      { name: 'firstname', type: 'string' },
      { name: 'lastname', type: 'string' },
      { name: 'age', type: 'string' },
      { name: 'phone', type: 'string' }
    ],
        pageSize: 10
    });

    dataStore.load({ params: { start: 0, limit: 25} });
    var myGrid1 = new Ext.grid.GridPanel({
        id: 'customerslist',
        store: dataStore,
        columns: [
        { id: "firstname", header: "First Name", width: 100, dataIndex: "firstname", sortable: true },
        { header: "Last Name", width: 100, dataIndex: "lastname", sortable: true },
        { header: "Age", width: 100, dataIndex: "age", sortable: true },
        { header: "Phone", width: 100, dataIndex: "phone", sortable: true }
      ],
        autoLoad: false,
        stripeRows: true,
        autoHeight: true,
        width: 450,
        height: 300,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: dataStore,
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: 'grid1'
    });
});

我有以下用于自定义分页的服务器端代码，

[WebMethod]
       [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
        public static List<tblCustomerList> CustomerData(int rowSize, int pageNumber)
        {
            DataGridEntities _dbContext = new DataGridEntities();
            //Code for custom paging
            Customer customer = new Customer();
            customer.TotalRecords = //code for total record count
            customer.Details = //fetch record based on page number and page size
            return customer.Details;
            }
    }

如何在此实现自定义分页。

Answer 1

按默认启动和限制完成分页。如果你不想重写整个链，我建议你留下它，因为它只是添加两个参数，在你的情况下

dataStore.load({ 
    params: { 
        rowSize: dataStore.pageSize, 
        pagenNumber: dataStore.currentPage || 1
    } 
});

此外，您需要自定义分页导航，分页工具栏的自定义版本或beforeload事件处理程序，如下所示：

function(store,operation,eo){
    operation.params: { 
        rowSize: store.pageSize, 
        pagenNumber: store.currentPage +1 // I assume that this was not updated before a successful load
    }
}

这是未经测试的，应该向您展示如何完成。

如何在Ext Grid中执行自定义分页

1 个答案: