尋呼不能在ext.js網格中綁定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}} 

網格顯示所有的記錄和頁面告訴它顯示給定的記錄沒有：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'，我rec建議您通過調用toList()將您的選擇結果轉換爲列表。不知道你的包裝對象d來自哪裏，我在我所有的項目中使用Json.Net。
• 閱讀器沒有模型cfg屬性。如果您在商店中定義了一個商店，則該商店會將其應用於您的代理商。總之，你只需要在storelevel模型
• 只適用於一個Ext.data.Proxy.Memory
• id的讀者應該被命名爲idPropertyAPI-link
• 我想你應該重命名page到start和使用，而不是skipRows見下面

評論你在哪裏提交的參數Int32 page和Int32 limit，爲什麼你計算跳過行？對我來說，看起來你正在使用普通的分頁，並跳過&跳過。這已由分頁工具欄提供。你應該不需要做任何事情。好的，您需要應用工具欄並在商店中配置頁面大小。從這個分頁工具欄將應用start和limit屬性到每個商店的請求（只要你不繞過分頁工具欄）。