分页在 extjs 网格中不起作用，使用 Ajax 调用绑定

Question

我可以将网格与 ajax 调用绑定，但我无法弄清楚如何使分页工作。 我还设置了商店的页面大小.. 这是我尝试过的

<script type="text/javascript">
    //Attach to onDOMReady event
    Ext.onReady(onReady);

    function onReady() {

        //Define the model for Ext User Grid.
        Ext.define('ExtUserGridModel', {
            extend: 'Ext.data.Model',
            id: 'UserId',
            fields: [{ name: 'UserId', type: 'int' }, { name: 'UserName', type: 'string' },
    { name: 'EmailId', type: 'string' }, { name: 'IsAdmin', type: 'bool' },
    { name: 'UserFName', type: 'string' }, { name: 'UserLname', type: 'string' },
    { name: 'PhoneNo', type: 'string' }, { name: 'DateOfBirth', type: 'string'}]
        });

        //data geting method for Ext User Grid
        var ExtUserStore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            pageSize: 5,
            remoteSort: true,
            model: 'ExtUserGridModel',
            proxy: {
                type: 'ajax',
                url: 'ExtUsersGrid.aspx/GetExtUsers',
                headers: { 'Content-type': 'application/json' },
                reader: {
                    type: 'json',
                    //totalProperty: 'd.totalCount',
                    root: 'd.userData'
                },
                // sends single sort as multi parameter
                simpleSortMode: true
            }
        });

        // Create Ext User Grid to display data from store
        var grid = new Ext.grid.GridPanel({
            store: ExtUserStore, // Our store
            defaults: {
                flex: 1
            },
            disableSelection: true,
            loadMask: true,
            title: 'Ext Users Grid',
            columns: [ // Grid columns
                {dataIndex: 'UserName', header: 'User Name' },
                { dataIndex: 'EmailId', header: 'EmailId', width: 250 },
                { dataIndex: 'IsAdmin', header: 'IsAdmin' },
                { dataIndex: 'UserFName', header: 'First Name' },
                { dataIndex: 'UserLname', header: 'Last Name' },
                { dataIndex: 'PhoneNo', header: 'User PhoneNo' },
                { dataIndex: 'DateOfBirth', header: 'Birth Date', flex: 1}],
            renderTo: Ext.get('content'),
            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: ExtUserStore,
                displayInfo: true,
                displayMsg: 'Displaying Records {0} - {1} of {2}',
                emptyMsg: "No Records to display"
            })
        });

服务器端代码

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
    public static Object GetExtUsers(String page, String limit)
    {
        //String page, String limit
        var extUserData = SampleDataManager.GetExtUsers();
        var result = new DataSet
        {
            userData = extUserData.Select(x => new ExtUserData
        {
            UserName = x.UserName,
            IsAdmin = ((Boolean)x.IsAdmin),
            EmailId = x.EmailId,
            UserFName = x.UserFName,
            UserLname = x.UserLname,
            PhoneNo = x.PhoneNo,
            DateOfBirth = x.DateOfBirth
        }),
            totalCount = extUserData.Count()
        };

        return result;
    }
  }
}

class DataSet
{
    public IQueryable<ExtUserData> userData { get; set; }
    public Int32 totalCount { get; set; }
}

class ExtUserData
{
    public Int32 UserId { get; set; }
    public String UserName { get; set; }
    public String EmailId { get; set; }
    public Boolean IsAdmin { get; set; }
    public String UserFName { get; set; }
    public String UserLname { get; set; }
    public String PhoneNo { get; set; }
    public String DateOfBirth { get; set; }
}

我得到的 JSON 响应是

{"d":{"userData":[{"UserId":0,"UserName":"Rex","EmailId":"Vinaypratap.bhadauria@intsof.com","IsAdmin":true,"UserFName":"Vinay Pratap","UserLname":"Singh","PhoneNo":"8557989106","DateOfBirth":"03/29/1991"},{"UserId":0,"UserName":"Ramit","EmailId":"Ramit.gulati@intsof.com","IsAdmin":false,"UserFName":"Ramit","UserLname":"Gulati","PhoneNo":"1234567894","DateOfBirth":"03/29/1991"},{"UserId":0,"UserName":"Haider","EmailId":"Haider.hussain@intsof.com","IsAdmin":false,"UserFName":"Haider","UserLname":"Hussain","PhoneNo":"1234567894","DateOfBirth":"03/29/1991"},{"UserId":0,"UserName":"BHupendra","EmailId":"Bhupendra.shukla@intsof.com","IsAdmin":false,"UserFName":"Bhupendra","UserLname":"Shukla","PhoneNo":"1234567894","DateOfBirth":"03/29/1991"},{"UserId":0,"UserName":"Anirudh","EmailId":"anirudh.agarwal@intsof.com","IsAdmin":false,"UserFName":"Anirudh","UserLname":"Agarwal","PhoneNo":"1234567894","DateOfBirth":"03/29/1991"},{"UserId":0,"UserName":"Sachin","EmailId":"Sachin.Singh@intsof.com","IsAdmin":false,"UserFName":"Sachin","UserLname":"Singh","PhoneNo":"1234567894","DateOfBirth":"03/29/1991"},{"UserId":0,"UserName":"Akash","EmailId":"Akash.malhotr@intsof.com","IsAdmin":false,"UserFName":"Akash","UserLname":"malhotr","PhoneNo":"1234567894","DateOfBirth":"03/29/1991"},{"UserId":0,"UserName":"Gautam","EmailId":"Gautam.bharadwaj@intsof.com","IsAdmin":false,"UserFName":"Gautam","UserLname":"Bharadwaj","PhoneNo":"1234567894","DateOfBirth":"03/29/1991"}],"totalCount":8}}

网格显示所有记录，页面告诉它显示没有记录 Ie:5

Answer 1

我是这样解决的

像这样改变阅读器

        var ExtUserStore = new Ext.data.JsonStore({
            autoLoad: true,
            //autoLoad: { params: { start: 0, limit: 5} },
            pageSize: 5,
            model: 'ExtUserGridModel',
            proxy: {
                enablePaging: true, // replaces PagingMemoryProxy functionality
                type: 'ajax',
                url: 'ExtUsersGrid.aspx/GetExtUsers',
                headers: { 'Content-type': 'application/json' },
                reader: {
                    type: 'json',
                    totalProperty: 'd.totalCount',
                    root: 'd.userData',
                    model: 'ExtUserGridModel',
                    id: 'd.userData.UserId'
                }
            }
        });

这样的服务器端代码

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
    public static Object GetExtUsers(Int32 page, Int32 limit)
    {
        //String page, String limit
        Int32 skipRows = (page - 1) * limit < 0 ? 0 : (page - 1) * limit;
        var extUserData = SampleDataManager.GetExtUsers();
        var RequiredData = extUserData.OrderBy(x => x.UserId).Skip(skipRows).Take(limit);
        var result = new DataSet
        {
            userData = RequiredData.Select(x => new ExtUserData
        {
            UserName = x.UserName,
            IsAdmin = ((Boolean)x.IsAdmin),
            EmailId = x.EmailId,
            UserFName = x.UserFName,
            UserLname = x.UserLname,
            PhoneNo = x.PhoneNo,
            DateOfBirth = x.DateOfBirth
        }),
            totalCount = extUserData.Count()
        };
        return result;
    }
    }
}

class DataSet
{
    public Int32 totalCount { get; set; }
    public IQueryable<ExtUserData> userData { get; set; }
}

class ExtUserData
{
    public Int32 UserId { get; set; }
    public String UserName { get; set; }
    public String EmailId { get; set; }
    public Boolean IsAdmin { get; set; }
    public String UserFName { get; set; }
    public String UserLname { get; set; }
    public String PhoneNo { get; set; }
    public String DateOfBirth { get; set; }
}

Answer 2

只是一些提示（有些是微观的，有些是最佳实践）：

• 您不需要'd'，我建议您通过调用toList() 将您的选择结果变成一个列表。不知道你的包装对象 d 来自哪里，我在所有项目中都使用 Json.Net。
• 阅读器没有模型 cfg 属性。如果您在商店中定义一个，商店将为您将其应用于代理。简而言之，您只需要商店级别的模型
• enablePaging 仅对 Ext.data.Proxy.Memory 有效
• 阅读器上的id 应命名为idProperty API-link
• 我猜你应该将 page 重命名为 start 并使用它而不是 skipRows 请参阅下面的评论

您在哪里提交了参数Int32 page 和Int32 limit，为什么要计算跳过行？对我来说，您似乎正在使用带有 take & skip 的普通分页。这已经由分页工具栏提供。你应该什么都不做。好的，您需要应用工具栏并在商店中配置页面大小。从此分页工具栏上将应用start 和limit 属性到每个商店请求（只要您不绕过分页工具栏）。