在ExtJS中,使用ext.grid.panel可以輕松地創建一個數據表格。而在實際開發中,通常需要使用json格式的數據進行填充。那么如何使用json數據來填充ext.grid.panel呢?
var store = Ext.create('Ext.data.Store', { fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'items' } } }); var grid = Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: store, columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' } ], height: 200, width: 400, renderTo: Ext.getBody() });
如上所示,我們使用了一個Ext.data.Store來存儲json格式的數據,通過設置store的proxy.type為'memory',表示數據來自內存。而proxy.reader.type為'json',則表示使用json格式的讀取器來解析數據。同時,我們可以通過設置proxy.reader.rootProperty為'items',來指定數據從哪個屬性開始。
最后,我們使用ext.grid.panel的columns來定義表格的列,并將其renderTo到頁面指定區域。
上一篇ftl和vue
下一篇css3調用svg圖標