數據綁定例子ExtJS的煎茶

Question

我有，我想使它看起來像這個網址如下

http://docs.sencha.com/extjs/4.2.2/#!/example/grid/binding.html

電網碼網格的例子是：

var grid_modal = Ext.create('Ext.grid.Panel', 
{ 
    width: '100%', 
    height: 450, 
    frame: true, 
    loadMask: true, 
    collapsible: false, 
    title: 'Detail data', 
    store: list_data,   
    columns: [ 
{ 
    header: 'Number', 
    width: 130, 
    sortable: true, 
    dataIndex: 'doc_no', 
    xtype: 'templatecolumn', 
    tpl: '{doc_no}<br/>{pp_id}' 
}, { 
    header: 'Date.', 
    width: 100, 
    sortable: true, 
    dataIndex: 'pp_date', 
    xtype: 'datecolumn', 
    format:'d-m-Y' 
}, { 
    header: 'Vendor', 
    width: 160, 
    sortable: true, 
    dataIndex: 'org_order', 
    xtype: 'templatecolumn', 
    tpl: '{org_order}' 
}], 

    dockedItems: 
    [{ 
     xtype: 'pagingtoolbar', 
     store: list_data, 
     dock: 'bottom', 
     displayInfo: true 
    },{ 
     xtype: 'toolbar', 
     dock: 'top', 
     items: [ 
     {   
      xtype: 'button', 
      cls: 'contactBtn', 
      scale: 'small', 
      text: 'Add', 
      handler: function(){ 
       window.location = './pp/detail/' 
     } 
    },'->','Periode :', 
     set_startdate('sdatepp',start), 
     's.d', 
     set_enddate('edatepp',end), 
     '-', 
    { 
     xtype : 'textfield', 
     name : 'find_pp', 
     id  : 'find_pp', 
     emptyText: 'Keywords' , 
     listeners: { 
      specialkey: function(field, e){ 
       if (e.getKey() == e.ENTER) { 
        onFindPP('find_pp','sdatepp','edatepp') 
        } 
       } 

      } 
     }] 
    }], 

}); 

我不明白如何將數據綁定添加到我製作的下面的網格中。所以它看起來像extjs doc上的示例一樣。請幫助我瞭解如何使數據網格綁定。感謝您的關注和幫助。

Answer 1

public ActionResult ExPage() 
    { 
     return View(); 
    } 

    public JsonResult GetData() 
    { 
     return Json(db.Products.ToList().Select(x => new Products { ProductID = x.ProductID, ProductName = x.ProductName, UnitPrice = x.UnitPrice, UnitsInStock = x.UnitsInStock }), JsonRequestBehavior.AllowGet); 
    } 

<script type="text/javascript"> 

Ext.onReady(function() { 

    var store = Ext.create('Ext.data.Store', { 
     autoLoad: true, 
     fields: ['ProductID', 'ProductName', 'UnitPrice', 'UnitsInStock'], 
     proxy: { 
      type: 'ajax', 
      url: '/Home/GetData' 
     } 
    }); 

    var grid = Ext.create('Ext.grid.Panel', { 
     store: store, 
     title: 'Products', 
     columns: 
      [ 
       { text: 'Id', dataIndex: 'ProductID', width: 50 }, 
       { text: 'Name', dataIndex: 'ProductName', width: 200 }, 
       { text: 'Price', dataIndex: 'UnitPrice', width: 80 }, 
       { text: 'Stock', dataIndex: 'UnitsInStock', width: 60 } 
      ], 
     width: 450, 
     renderTo: Ext.getBody() 
    }); 
});