extjs 4.1遠程網格排序和MVC過濾

Question

我需要添加排序和過濾到我的網格。網格是選項卡面板的一部分。我可以在螢火蟲看到下面的參數來調用控制器：

_dc 1361741346485 
limit 200 
page 2 
sort [{"property":"IsLate","direction":"ASC"}] 
start 200 

我需要什麼樣的參數添加到控制器方法從請求排序參數接受？我想我需要序列化它。我試圖創建一個具有屬性和方向的排序對象，但是當我調試時，收到的參數具有屬性和方向爲空值。是否有一個我需要遵循的命名約定？我很困惑。 謝謝。

這是我的代碼：
LateGrid.js

Ext.define('FICMTB.ui.LateModel', { 
     extend: 'Ext.data.Model', 
     fields: [ 
    { name: 'Id' },  
    { name: 'IsLate' },  
    { name: 'Comments' }, 
    { name: 'Description' }], 
    idProperty: 'Id' 
}); 

Ext.define("FICMTB.ui.LateGrid", { 
    extend: "Ext.grid.Panel", 
    requires: [ 
     'FICMTB.ui.LateModel', 
     'Ext.ux.grid.FiltersFeature' 
     ], 

initComponent: function() { 
    var me = this; 

    me.columns = me.buildColumns(); 
    me.filters = { 
     ftype: 'filters', 
     encode: false, // json encode the filter query 
     filters: [{ 
      options: ['YES', 'NO'], 
      dataIndex: 'IsLate' 
     }] 
    }; 
    me.features = [me.filters]; 
    me.store = Ext.create('Ext.data.Store', { 
     model: 'FICMTB.ui.LateModel', 
     remoteSort: true, 
     storeId: 'LateStoreId', 
     autoLoad: true, 
     buffered: true, 
     autoSync: true, 

     pageSize: 200, 
     proxy: { 
      type: 'rest', 
      timeout: 600000, 

      url: '/Late/Transactions/', 
      reader: { 
       type: 'json', 
       root: 'transactions', 
       totalProperty: "Total" 
      }, 
      writer: { 
       type: 'json', 
       root: 'transactions' 
      } 
     } 
    }); 

    me.selModel = new Ext.selection.RowModel({ 
     singleSelect: true 
    }); 

    me.autoSizeColumns = true; 

    me.autoScroll = true; 
    me.forcefit = true; 

    me.callParent(arguments); 
}, 

buildColumns: function() { 
    var me = this; 

    return [ 
    { text: 'Id', dataIndex: 'Id', hidden: true, hideable: false }, 
    { text: 'Is Late' dataIndex: 'IsLate', sortable: true, width: 50, filter:true},  
    { text: 'Comments', dataIndex: 'Comments', width: 250, sortable: true }, 
    { text: 'Description', dataIndex: 'Description', width: 250, sortable: true }]; 
    }, 
    height: 600, 
    width: 'auto' 
}); 

LateController.cs

[AcceptVerbs(HttpVerbs.Get)] 
[ActionName("LateTransactions")] 
public ActionResult GetLateTransactions(string page, string start, string limit, xxxxxx sorting, yyyyy filtering) 
{ 
    // what should xxxxx and yyyyy be? how should I name the sorting and filtering parameters? 
    //   returns json 
} 

編輯： 我嘗試使用排序的對象，但它作爲空

// Sorting 
// NOT Simple Sort: 
// Request: index?sort=[{"property":"email","direction":"DESC"}, {"property":"last_name","direction":"ASC"}, ...] 
public class Sorting 
{ 
    public string property { set; get; } 
    public string direction { set; get; } 
} 

[AcceptVerbs(HttpVerbs.Get)] 
[ActionName("LateTransactions")] 
public ActionResult GetLateTransactions(string page, string start, string limit, Sorting sort, yyyyy filtering) 
{ 
    .... 
} 

Answer 1

對於排序我實際上是得到一個JSON字符串。我不得不編碼設置爲true，過濾器，以便傳遞給我的控制器方法的過濾器參數是一個JSON字符串：

me.filters = { 
     ftype: 'filters', 
     **encode: true, // json encode the filter query** 
     filters: [{ 
      options: ['YES', 'NO'], 
      dataIndex: 'IsLate' 
     }] 
    }; 

我使用的是具有DeserializeObject方法Newtonsoft庫 - 它需要一個JSON字符串，並將其轉換成一個東西。所以，過濾，我的目標是：

public class Filtering 
    { 
     public string type { get; set; } 
     public string value { get; set; } 
     public string field { get; set; } 
    } 

，並在我的控制器：

[AcceptVerbs(HttpVerbs.Get)] 
    [ActionName("LateTransactions")] 
    public ActionResult GetLateTransactions(string page, string start, string limit, Sorting sort, Filtering filter) 
    { 
    // get all the filters 
     List<Filtering> deserzdFilter = JsonConvert.DeserializeObject<List<Filtering>>(filter); 
     .... 
//   returns json(model); 
    } 

Answer 2

我不是很熟悉MVC3可言，但你需要做的是：

• 地圖參數正確的（你可能會通過使用該方法的字符串排序參數做到這一點），並確保你獲取排序值作爲JSON字符串。
• 然後你需要反序列化JSON字符串作爲一個對象（我認爲這將有助於：http://msdn.microsoft.com/en-us/library/bb412179.aspx）。

Answer 3

我也不知道MVC3，但是我已經使用.Net WCF與Extjs取得了很好的成功。例如...

[OperationBehavior(Impersonation = ImpersonationOption.Allowed)] 
    [WebInvoke(Method = "GET")] 
    public Stream getEvent_list(string TableName, string WhereParams,string page, string start, string limit, string sort) 
    { 
     string sorting = "date desc"; 

     if (WhereParams == null) WhereParams = ""; 
     if (sort != null) 
     { 
      sorting = getSorting(sort); // parse the sorting json parameter 
     } 

blah blah.... 

     string sql = "select * from mytable order by " + sorting; 
     /// return json as streamn 

    } 

// -------------------- getSorting ------------------------------------------------ 
// Parse the passed sorting JSON object into a string for SQL query. 
// for example sort= [{property:'dr'},{order:'desc'},{property:'doi'},{order:'asc'},] 
// gets converted to 'dr desc, dor asc' (SQL friendly format). 

    private string getSorting(string sort) 
    { 
     string sorting = ""; 

     string[] pairs = sort.Split(','); 

     for (int i=0; i< pairs.Length; i +=2) 
     { 
      string[] pair = pairs[i].Split(':'); 
      string[] ord = pairs[i+1].Split(':'); 

      if (sorting.Length > 0) 
      { 
       sorting += ","; 
      } 
      // get rid of all extra json characters. 
      sorting += pair[1].Trim(' ', '{', '}', '[', ']', '\\', '\"', '"') + " " + ord[1].Trim(' ', '{', '}', '[', ']', '\\', '\"', '"'); 
     } 

     return sorting; 
    }