数据绑定示例 extjs sencha

Data binding example extjs sencha

本文关键字：sencha extjs 数据绑定更新时间：2023-09-26

我有一个网格示例，我想让它看起来像下面的这个网址

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 文档上的示例。请帮助我了解如何使数据网格绑定。感谢您的关注和帮助。

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()
    });
});