Store简要说明请查看:http://extjs.org.cn/node/564
一.本地数据源
1.数组格式的数据:data只能是数组!——不能用JsonStore,否则报错!
01 | var arrStore = new Ext.data.SimpleStore({ |
05 | 注释掉的是json格式的,只能用JsonStore |
10 | fields:[ "id" , "name" , "age" ] |
2.JSON格式的数据:data只能是json!——不能用SimpleStore,也不能用父类Store,否则报错!
1 | var jsonStore = new Ext.data.JsonStore({ |
3 | {id:1,name: "zs" ,age:22}, |
4 | {id:2,name: "ls" ,age:23}, |
5 | {id:3,name: "ww" ,age:24} |
7 | fields:[ "id" , "name" , "age" ] |
fields类型:
实例分析:
02 | var jsonStore = new Ext.data.JsonStore({ |
04 | {id:1,name: "zs" ,age:22}, |
05 | {id:2,name: "ls" ,age:23}, |
06 | {id:3,name: "ww" ,age:24} |
08 | fields:[ "id" , "name" , "age" ] |
12 | var cm = new Ext.grid.ColumnModel({ |
36 | var grid = new Ext.grid.GridPanel({ |
58 | Ext.onReady( function (){ |
59 | Ext.state.Manager.setProvider( new Ext.state.CookieProvider()); |
注意事项:
column中的dataIndex对应的就是fields中的字段
效果:

二.后台获取数据源
1.JsonStore:Ext.data.JsonStore ——只能用结合式的 url + root + fields 形式!!!
(注:API中只有结合式的写法,用proxy,reader分离式写法经测试无法解析数据!)
正确写法:
1 | var epStore = new Ext.data.JsonStore({ |
3 | url: "getEProject.eva?doType=getEProject" , |
5 | fields: [ "project" , "company" ] |
错误写法:(此时,若将JsonStore换成其父类Store则可以正确解析!)
01 | var epProxy = new Ext.data.HttpProxy({ |
02 | url: "getEProject.eva?doType=getEProject" |
05 | var epReader = new Ext.data.JsonReader({ |
07 | fields: [ "project" , "company" ] |
10 | var epStore = new Ext.data.JsonStore({ |
2.Store:Ext.data.Store
方式一:结合式定义
01 | var xmmcStore = new Ext.data.Store({ |
02 | proxy: new Ext.data.HttpProxy({ |
03 | url: 'getXmmc.eva?doType=getXmmc' |
08 | reader: new Ext.data.JsonReader({ |
17 | var xmmcStore = new Ext.data.Store({ |
18 | proxy: new Ext.data.HttpProxy({ |
19 | url: 'getXmmc.eva?doType=getXmmc' |
21 | reader: new Ext.data.JsonReader( |
28 | var xmmcStore = new Ext.data.Store({ |
29 | url: 'getXmmc.eva?doType=getXmmc' , |
30 | reader: new Ext.data.JsonReader( |
方式二:分离式定义
01 | var itemProxy = new Ext.data.HttpProxy({ |
02 | url: "getItem.eva?doType=getItem" |
04 | var itemReader = new Ext.data.JsonReader( |
11 | var itemStore = new Ext.data.Store({ |
16 | 此处也可将reader中的fields换简便方式定义,如下: |
17 | var itemReader = new Ext.data.JsonReader( |
19 | [ "company" , "department" ] |
方式三:带Record形式:
04 | var costRecord = new Ext.data.Record.create([ |
05 | {name: "id" ,type: "int" }, |
06 | {name: "xmid" ,type: "int" }, |
07 | {name: "subject" ,type: "string" }, |
08 | {name: "planCost" ,type: "string" }, |
09 | {name: "actualCost" ,type: "string" } |
12 | var costProxy= new Ext.data.HttpProxy({ |
13 | url: 'getProjectCost.eva?doType=getProjectCost' , |
17 | var costReader = new Ext.data.JsonReader({ |
21 | var costStore = new Ext.data.Store({ |
30 | var costRecord = new Ext.data.Record.create([ |
31 | {name: "id" ,type: "int" }, |
32 | {name: "xmid" ,type: "int" }, |
33 | {name: "subject" ,type: "string" }, |
34 | {name: "planCost" ,type: "string" }, |
35 | {name: "actualCost" ,type: "string" } |
38 | var costStore = new Ext.data.Store({ |
39 | proxy: new Ext.data.HttpProxy({ |
40 | url: 'getProjectCost.eva?doType=getProjectCost' , |
43 | reader: new Ext.data.JsonReader({ |
52 | var costRecord = new Ext.data.Record.create([ |
53 | {name: "id" ,type: "int" }, |
54 | {name: "xmid" ,type: "int" }, |
55 | {name: "subject" ,type: "string" }, |
56 | {name: "planCost" ,type: "string" }, |
57 | {name: "actualCost" ,type: "string" } |
60 | var costStore = new Ext.data.Store({ |
61 | url: "getProjectCost.eva?doType=getProjectCost" , |
62 | reader: new Ext.data.JsonReader({ |
68 | ————注意:这种方式只能用JsonStore,不能用父类Store |
69 | var costStore = new Ext.data.JsonStore({ |
70 | url: "getProjectCost.eva?doType=getProjectCost" , |
72 | fields:[ "id" , "xmid" , "subject" , "planCost" , "actualCost" ] |
注:url + root + fields的方式四,只能用JsonStore,不能用Store!!!
实例分析:
1.将方式一的Store放到下拉选中
2.在下拉选选中某项时加载方式二的Store
3.将加载后的数据放到文本框中显示出来
(1).创建下拉选,并监听选中事件,加载第二个store
01 | var xmmcCombox = new Ext.form.ComboBox({ |
13 | "select" : function (obj, record){ |
14 | itemStore.baseParams.xmid = record.get( 'id' ); |
注:Store的传参赋值方式:store.baseParams.id/name/... = ......
(2).创建form表单:
01 | var addForm = new Ext.FormPanel({ |
(3).将第二个Store加载后的数据放到文本框中:
1 | itemStore.on( 'load' , function (store, record, options) { |
2 | var comp = record[0].get( "company" ); |
3 | var dept = record[0].data.department; |
4 | addForm.getForm().findField( "xmdw" ).setValue(comp); |
5 | addForm.getForm().findField( "depart" ).setValue(dept); |
注意事项:
1.文本框赋值方式:
1 | getForm().findField( "" ).setValue( "" ) |
2.在Store中取record:
(1).取总记录records:store.data (注,此时若要取某下标记录,还得用records.get(i))
(2).取指定下标的record:store.getAt(i) (注:不是get(i)或者getById(i))
2.在record中取值方式:
(1).record.data.name
(2).record.data["name"]
(3).record.get("name") (注意:这里比前两种少了data)
分析:record是一个数组,所以取值要用get,而record.data已经是一个对象了,所以可以直接用“.”
详情请参照:http://blog.csdn.net/liu78778/article/details/3942990
后台返回数据如下:
xmmcStore:
1 | data: [{id:4, name:百年老字手工豆腐火锅}, {id:5, name:光伏节能减排照明系统}] |
itemStore:
1 | data: [{department:商贸局 农业局 , company:一号企业}] |
注意事项:
1.返回的数据中的data即定义的JsonReader中的root
2.返回的数据的data后面必须是json数据的数组!就算只有一条数据也得用数组形式返回。
3.文本框不可编辑方式有2种: readOnly:true或 disable:true
4.要显示非文本框样式,则加上一句:style:'background:none;border:0px;',
06 | style: 'background:none;border:0px;' , |
13 | style: 'background:none;border:0px;' , |