ExtJS是一款優秀的前端框架,其在web開發中被廣泛運用。其中,JSON動態展示是其常用的應用之一。JSON(JavaScript Object Notation)是一種輕量級的數據交換格式,能夠方便地在不同語言之間進行數據交互和傳輸。而ExtJS能夠通過JSON數據來實現數據的動態展示。
Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' } ] }); var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url: 'data.json', //JSON文件的位置 reader: { type: 'json', rootProperty: 'users' } }, autoLoad: true }); var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ { text: '姓名', dataIndex: 'name' }, { text: '年齡', dataIndex: 'age' } ] }); Ext.create('Ext.container.Viewport', { layout: 'fit', items: [grid] });
通過ExtJS的定義模型,我們可以告訴框架我們將要讀取和展示哪些數據。同時,我們還需要指定JSON文件的位置和Reader的配置,以便框架可以正確地解析。之后再將數據綁定到grid上,就能夠對數據進行動態展示。