Data binding example extjs sencha <p>I've a grid example that i want to make it look like this url below</p> <blockquote> <p><a href="http://docs.sencha.com/extjs/4.2.2/#!/example/grid/binding.html" rel="nofollow">http://docs.sencha.com/extjs/4.2.2/#!/example/grid/binding.html</a></p> </blockquote> <p>The grid code is :</p> <pre><code>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}&lt;br/&gt;{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/' } },'-&gt;','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') } } } }] }], }); </code></pre> <p>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.</p>