在使用ext.grid.panel 組件時,我們經常需要傳入一些數據來進行填充。這些數據通常以json格式提供,因此我們需要了解如何正確解析和使用json數據。
下面是一個簡單的json數據示例:
{ "data": [ { "name": "張三", "age": 20, "address": "北京市海淀區" }, { "name": "李四", "age": 25, "address": "上海市浦東新區" }, { "name": "王五", "age": 30, "address": "廣州市天河區" } ] }
在使用這個json數據時,我們需要先創建一個Ext.data.Store對象并指定數據模型:
var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'data' } } });
這里的模型是一個自定義的Ext.data.Model對象,它用來描述json數據的格式:
Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'age', type: 'int'}, {name: 'address', type: 'string'} ] });
模型指定了三個屬性分別對應json數據中的name、age、address字段。而Ext.data.Store對象則使用reader配置指定數據的解析方式,由于我們的數據是一個數組,因此需要設置rootProperty為"data"。
最后,我們將這個數據源綁定到ext.grid.panel組件中:
var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ {text: '姓名', dataIndex: 'name'}, {text: '年齡', dataIndex: 'age'}, {text: '地址', dataIndex: 'address'} ] });
這樣我們就可以通過grid的數據展示功能,將json數據以表格的形式展現出來了。
上一篇mysql會話刪除
下一篇mysql偽列的值能存嗎