title: extjs 4.1 remote grid sorting, and filtering with MVC
body: <p>I need to add sorting and filtering to my grid. The grid is part of the tab panel. I can see in the Firebug the following parameters to the call to the controller:</p>
  
  <pre><code>_dc 1361741346485
  limit   200
  page    2
  sort    [{"property":"IsLate","direction":"ASC"}]
  start   200
  </code></pre>
  
  <p>What parameters do I need to add to the controller method to accept sort parameter from the request?  I guess I would need to serialize it.  I tried to create a sort object with property and direction, but when I debug, the parameter received has property and direction as nulls.  Is there a naming convention I need to follow? I'm confused.
  Thank you.</p>
  
  <p>This is my code:<br>
  <strong>LateGrid.js</strong></p>
  
  <pre><code>  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'
  });
  </code></pre>
  
  <p><strong>LateController.cs</strong></p>
  
  <pre><code>[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 
  }
  </code></pre>
  
  <p>EDIT:
     I tried to use Sorting object, but it comes as null</p>
  
  <pre><code>// 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)
  {
      ....
  }
  </code></pre>