ExtJS是一款基于JavaScript的框架,可以通過它來構建Web應用。其中,ExtJS的json表格功能是非常實用的一部分。在ExtJS中,我們可以通過json數據來定義我們的表格,從而實現數據的展示、編輯等功能。
var data = { "success": true, "message": "", "data": [ { "name": "John Doe", "age": 30, "gender": "Male" }, { "name": "Jane Doe", "age": 25, "gender": "Female" } ] }; Ext.create('Ext.data.Store', { storeId: 'simpsonsStore', fields: ['name', 'age', 'gender'], data: data, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'data' } } }); var grid = Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Age', dataIndex: 'age' }, { text: 'Gender', dataIndex: 'gender' } ], height: 200, width: 400, renderTo: Ext.getBody() });
在上面的代碼中,我們先定義了一個json數據來表示我們的表格數據,包括每個人的姓名、年齡、性別。然后,我們通過ExtJS的storeId來定義我們的數據源,將數據放入內存中。接著,我們定義了一個grid.Panel來展示我們的數據。在grid.Panel中,我們通過columns來定義我們的列名和數據索引,從而實現表格顯示。
除了基礎的表格功能,ExtJS的json表格還支持數據的編輯、排序、分頁等功能。通過靈活運用json數據和相關API,我們可以實現各種復雜的表格功能。這對于開發數據密集型的Web應用來說是非常有幫助的。