ExtJS是一個用于創建Web應用程序用戶界面的JavaScript庫,它提供了許多強大的組件和工具來簡化應用程序開發。其中,ExtJS Grid是一個數據表格控件,可以用來展示數據列表和進行數據操作。在實際開發中,我們通常需要將Grid綁定到后臺的數據源,以便實現數據的展示和交互。本文將介紹如何使用ExtJS Grid綁定JSON數據。
//定義數據模型 Ext.define('User', { extend: 'Ext.data.Model', fields: ['name', 'age', 'gender'] }); //創建數據源 var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url: 'user.json' }, autoLoad: true }); //創建Grid var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [{ header: '姓名', dataIndex: 'name' }, { header: '年齡', dataIndex: 'age', flex: 1 }, { header: '性別', dataIndex: 'gender' }] width: 400, height: 300, renderTo: Ext.getBody() });
如上代碼所示,我們首先需要定義數據模型(User),并創建數據源(store)。在數據源的proxy中,我們指定了數據的URL地址(user.json),即后臺提供的JSON數據。autoLoad屬性設為true,表示在Grid創建后自動加載數據。最后,我們創建了一個Grid,并通過store屬性綁定到數據源上。
需要注意的是,在后臺提供的JSON數據中,其結構應該與數據模型(User)對應。例如:
{ "user": [{ "name": "張三", "age": 23, "gender": "男" }, { "name": "李四", "age": 20, "gender": "女" }] }
在實際應用中,我們可以使用ExtJS提供的其他工具和組件,如PagingToolbar、Filter、Editor等,來增強Grid的功能和交互性。
上一篇css3點擊滑動效果代碼
下一篇html 標題間隔設置