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

网格显示所有记录，并且页面告诉它显示没有记录即：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来自的Dunno，我在所有项目中使用Json.Net。
读者没有cfg属性。如果您在商店中定义一个，商店将为您将其应用于代理。简而言之，您只需要在storelevel上的模型
enablePaging仅对Ext.data.Proxy.Memory
id应命名为idProperty API-link
我想您应该将page重命名为start并使用此代替skipRows查看下面的评论

您在哪里提交参数Int32 page和Int32 limit，为什么要计算跳过行？对我来说，看起来你正在使用带有＆amp; amp;跳跃。这已由分页工具栏提供。你应该什么也不做。好的，您需要应用工具栏并在商店中配置pagesize。从那里起，pagingtoolbar将start和limit属性应用于每个商店请求（只要您不绕过pagingtoolbar）。

分页不在extjs网格中工作，与Ajax Call绑定

2 个答案: