1.創建一個model
Ext.define('model', {
extend : 'Ext.data.Model',
fields : [ {
name : 'NAME',
type : 'string'
}, {
name : 'PATH',
type : 'string'
}, {
name : 'ACTION',
type : 'string'
} ]
});
格式是統一的,需要注意的是fields裏面的,name的值就是後臺傳進來json的字段,字段名應完全一樣,可以根據需要寫幾個或者全部都寫
例:
{root:[NAME:'',PATH:'',ACTION:'',AGE:'']}
Ext.define('model', {
extend : 'Ext.data.Model',
fields : [ {
name : 'NAME',
type : 'string'
}, {
name : 'PATH',
type : 'string'
}, {
name : 'ACTION',
type : 'string'
} , {
name : 'AGE',
type : 'string'
} ]
});
或者
Ext.define('model', {
extend : 'Ext.data.Model',
fields : [ {
name : 'NAME',
type : 'string'
}, {
name : 'PATH',
type : 'string'
}]
});
這個name必須和下面的表中的columns的header一一對應,如果表要顯示這個字段,那麼model中就必須寫上這個字段.
2.綁定數據源
var store = Ext.create('Ext.data.Store', {
model : 'model',
proxy : {
type : 'ajax',
url : 'getdata.action',
reader : {
type : 'json',
root : 'root'
}
}
});
數據源中的model的值必須和上面創建"Ext.define('model', {"一樣,url的值是需要的動作,struts中，寫的是action.添加參數的方法和jsp一樣.如果需要grid加載的時候就顯示數據,可以在"model : 'model',"後面加一句話"autoLoad:true".或者在創建完store後,在";"後加上"store.load()".需要注意的是reader裏面.type的值是後臺傳過來數據的類型,json或者xml.root就是傳進來json數據的開頭"{root:[NAME:'',PATH:'',ACTION:'',AGE:'']}",需多加註意,如果不一致，數據則不能顯示.
3.創建grid
var grid = Ext.create('Ext.grid.Panel', {
renderto: Ext.getBody(), //這個屬性標識位置,當前位置頁面左上角。值也可以是頁面層的id
frame : true,
store : store,
layout : {
type : 'hbox',
align : 'stretch'
},
width : 500,
heigh : 100,
columns : [ {
header : '名稱',
flex : 1,
sortable : true,
dataIndex : 'NAME'
}, {
header : '路徑',
flex : 1,
sortable : true,
dataIndex : 'PATH',
hidden : true
}, {
header : '操作',
flex : 1,
sortable : true,
dataIndex : 'ACTION'
} ],
viewConfig : {
forceFit : true,
scrollOffset : 0
}
});