Data binding example extjs sencha

Question

I've a grid example that i want to make it look like this url below

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

The grid code is :

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')
                    }
                }

            }
        }]
    }],

});

I don't understand how to add data binding to below grid that i make. so it makes look like same as the example on extjs doc. please help me find out how to make the data grid binding. thank you for your attention and help.

Where is the store definition? Why not just copy the example code, then modify it? — Evan Trimboli
here the store definition jsfiddle.net/C5bfu i want to modify it but i've already make some grid that have working fine. i just want to modified it with data binding ( like the example on extjs ). — soulfreeza

Eren Eren · Accepted Answer · 2013-10-10T08:22:38

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

Data binding example extjs sencha

1 Answers