EXTJS4.0 gridpanel 用法笔记～～简单的创建grid

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

}

});