.net - 分页在 extjs 网格中不起作用，与 Ajax 调用绑定(bind)

Question

我可以使用 ajax 调用绑定(bind)网格，但是我不知道如何进行分页。 我还设置了商店的页面大小。 这是我试过的

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

网格显示所有记录，页面告诉它显示给定的记录数即: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; }
}