ExtJS Grid是一個用于展示數據的組件。它可以從不同的數據源中獲取數據,并以表格的形式呈現出來。其中一個常用的數據源就是JSON數據。
在ExtJS中,我們可以通過使用Store來加載JSON數據。下面是一個簡單的示例,展示了如何加載JSON數據到Grid:
// 定義數據模型 Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'email', type: 'string'}, {name: 'phone', type: 'string'} ] }); // 定義數據源 var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url: 'data.json', reader: { type: 'json', rootProperty: 'users' } }, autoLoad: true }); // 定義Grid var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ {text: 'Name', dataIndex: 'name'}, {text: 'Email', dataIndex: 'email'}, {text: 'Phone', dataIndex: 'phone'}, ], renderTo: Ext.getBody() });
在這個示例中,我們首先定義了一個數據模型,這個模型描述了JSON數據中每個對象的屬性。然后我們創建了一個數據源,使用了Ajax代理來獲取數據,使用了JSON格式來解析數據。最后我們創建了一個Grid組件,將數據源綁定到這個組件上,還定義了行列。
通過使用ExtJS Grid和JSON數據,我們可以方便地將數據展示出來,并允許用戶進行查詢、排序和過濾。這使得我們能夠更加靈活地處理和呈現數據,幫助用戶更加高效地工作。