ExtJS是一個用于開發極富擴展性Web應用的Javascript框架。其中Grid組件可以顯示和編輯數據,非常適合用于管理后臺。在使用Grid時,我們經常需要從服務端獲取JSON數據來填充表格。下面是如何使用ExtJS Grid加載JSON數據的代碼示例:
// 定義數據模型 var MyModel = Ext.define('MyModel', { extend: 'Ext.data.Model', fields: ['name', 'age'] }); // 創建Store并加載數據 var store = Ext.create('Ext.data.Store', { model: 'MyModel', proxy: { type: 'ajax', url : 'data.json', reader: { type: 'json', rootProperty: 'users' } }, autoLoad: true }); // 創建Grid并使用Store填充數據 var grid = Ext.create('Ext.grid.Panel',{ store: store, columns: [ { text: '姓名', dataIndex: 'name' }, { text: '年齡', dataIndex: 'age' } ], renderTo: Ext.getBody() });
以上代碼中,我們首先定義了一個數據模型MyModel,包含了兩個屬性name和age。然后創建了一個Store,指定了類型為ajax,url為"data.json",json的根節點為"users"。autoLoad為true表示在Store創建完畢之后自動加載數據。最后,我們創建了一個Grid,使用前面創建的Store填充數據,并定義兩列,列名分別為“姓名”和“年齡”。最后通過renderTo將Grid顯示在頁面上。