Ext JS是一個流行的JS框架,可以幫助我們創建動態且復雜的交互式Web應用程序。Ext JS具備強大的界面組件和數據模型,在這些技術中,Ext JS JSON Grid是一項非常實用的功能。
var store = Ext.create('Ext.data.Store', { fields: ['id', 'name', 'age'], autoLoad: true, proxy: { type: 'ajax', url: 'data.json', reader: { type: 'json', rootProperty: 'data' } } }); var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ { header: 'ID', dataIndex: 'id' }, { header: 'Name', dataIndex: 'name' }, { header: 'Age', dataIndex: 'age' } ], height: 200, width: '100%' }); Ext.create('Ext.Viewport', { layout: 'fit', items: [grid] });
如上所示,我們首先創建了一個數據存儲對象(Store)。然后,我們將一個代理對象(Proxy)配置為從一個JSON文件中讀取數據。接著,我們創建一個網格面板(Grid Panel)來顯示數據。最后,我們將這個網格面板渲染到視圖中。
Ext JS JSON Grid和其他網格面板非常相似,但它通過JSON來渲染數據,這讓我們的應用程序更具擴展性和靈活性。此外,JSON格式可以方便的在各個不同的應用程序之間共享,這非常適合在多個系統之間傳遞數據。