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
}
});