色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

extjs grid 綁定json

錢衛國2年前8瀏覽0評論

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的功能和交互性。