Store简要说明请查看:http://extjs.org.cn/node/564
一.本地数据源
1.数组格式的数据:data只能是数组!——不能用JsonStore,否则报错!
01 | var arrStore = new Ext.data.SimpleStore({ |
02 | data:[ |
03 | /*{id:1,name:"zs",age:22}, |
04 | {id:2,name:"ls",age:23}, |
05 | {id:3,name:"ww",age:24}*/ 注释掉的是json格式的,只能用JsonStore |
06 | [1, "zs" ,22], |
07 | [2, "ls" ,23], |
08 | [3, "ww" ,24] |
09 | ], |
10 | fields:[ "id" , "name" , "age" ] |
11 | }); |
2.JSON格式的数据:data只能是json!——不能用SimpleStore,也不能用父类Store,否则报错!
1 | var jsonStore = new Ext.data.JsonStore({ |
2 | data:[ |
3 | {id:1,name: "zs" ,age:22}, |
4 | {id:2,name: "ls" ,age:23}, |
5 | {id:3,name: "ww" ,age:24} |
6 | ], |
7 | fields:[ "id" , "name" , "age" ] |
8 | }); |
fields类型:
实例分析:
01 | //1.设置数据源 |
02 | var jsonStore = new Ext.data.JsonStore({ |
03 | data:[ |
04 | {id:1,name: "zs" ,age:22}, |
05 | {id:2,name: "ls" ,age:23}, |
06 | {id:3,name: "ww" ,age:24} |
07 | ], |
08 | fields:[ "id" , "name" , "age" ] |
09 | }); |
10 |
11 | //2.定义列 |
12 | var cm = new Ext.grid.ColumnModel({ |
13 | columns:[ |
14 | { |
15 | header: "编号" , |
16 | dataIndex: "id" , |
17 | width:100, |
18 | sortable: true |
19 | },{ |
20 | header: "姓名" , |
21 | dataIndex: "name" , |
22 | width:100, |
23 | sortable: true |
24 | },{ |
25 | header: "年龄" , |
26 | dataIndex: "age" , |
27 | width:100, |
28 | sortable: true |
29 | } |
30 | ] |
31 | }); |
32 |
33 |
34 |
35 | //4.创建表格面板 |
36 | var grid = new Ext.grid.GridPanel({ |
37 | cm:cm, |
38 | store:jsonStore, |
39 | height:80, |
40 | tbar:[ |
41 | { |
42 | text: "增加项目" , |
43 | iconCls: "add" , |
44 | handler: function (){ |
45 | addWin.show(); |
46 | } |
47 | },{ |
48 | text: "修改" , |
49 | iconCls: "edit" |
50 | },{ |
51 | text: "删除" , |
52 | iconCls: "remove" |
53 | } |
54 | ] |
55 | }); |
56 |
57 |
58 | Ext.onReady( function (){ |
59 | Ext.state.Manager.setProvider( new Ext.state.CookieProvider()); |
60 | Ext.QuickTips.init(); |
61 | new Ext.Viewport({ |
62 | layout: 'fit' , |
63 | items: [grid] |
64 | }); |
65 | }); |
注意事项:
column中的dataIndex对应的就是fields中的字段
效果:
二.后台获取数据源
1.JsonStore:Ext.data.JsonStore ——只能用结合式的 url + root + fields 形式!!!
(注:API中只有结合式的写法,用proxy,reader分离式写法经测试无法解析数据!)
正确写法:
1 | var epStore = new Ext.data.JsonStore({ |
2 | autoLoad: true , |
3 | url: "getEProject.eva?doType=getEProject" , |
4 | root: "data" , |
5 | fields: [ "project" , "company" ] |
6 | }); |
01 | var epProxy = new Ext.data.HttpProxy({ |
02 | url: "getEProject.eva?doType=getEProject" |
03 | }); |
04 |
05 | var epReader = new Ext.data.JsonReader({ |
06 | root: "data" , |
07 | fields: [ "project" , "company" ] |
08 | }); |
09 |
10 | var epStore = new Ext.data.JsonStore({ //此处若换成父类Store则解析正确 |
11 | autoLoad: true , |
12 | proxy:epProxy, |
13 | reader:epReader |
14 | }); |
2.Store:Ext.data.Store
方式一:结合式定义
01 | var xmmcStore = new Ext.data.Store({ |
02 | proxy: new Ext.data.HttpProxy({ |
03 | url: 'getXmmc.eva?doType=getXmmc' |
04 | }), |
05 | /*注:此处用url代替proxy也是可以的,如下: |
06 | url:'getXmmc.eva?doType=getXmmc', |
07 | 但是绝对不要用proxy:'getXmmc.eva?doType=getXmmc'这种形式!!!*/ |
08 | reader: new Ext.data.JsonReader({ |
09 | root: 'data' |
10 | },[ |
11 | { name: 'id' }, |
12 | { name: 'name' } |
13 | ]) |
14 | }); |
15 |
16 | //此处也可将reader中的fields换简便方式定义,如下: |
17 | var xmmcStore = new Ext.data.Store({ |
18 | proxy: new Ext.data.HttpProxy({ |
19 | url: 'getXmmc.eva?doType=getXmmc' |
20 | }), |
21 | reader: new Ext.data.JsonReader( |
22 | {root: 'data' }, |
23 | [ 'id' , 'name' ] |
24 | ) |
25 | }); |
26 |
27 | //proxy换成url形式: |
28 | var xmmcStore = new Ext.data.Store({ |
29 | url: 'getXmmc.eva?doType=getXmmc' , |
30 | reader: new Ext.data.JsonReader( |
31 | {root: 'data' }, |
32 | [ 'id' , 'name' ] |
33 | ) |
34 | }); |
方式二:分离式定义
01 | var itemProxy = new Ext.data.HttpProxy({ |
02 | url: "getItem.eva?doType=getItem" |
03 | }); |
04 | var itemReader = new Ext.data.JsonReader( |
05 | { |
06 | root: "data" |
07 | },[ |
08 | { "name" : "company" }, |
09 | { "name" : "department" } |
10 | ]); |
11 | var itemStore = new Ext.data.Store({ |
12 | proxy:itemProxy, |
13 | reader:itemReader |
14 | }); |
15 |
16 | 此处也可将reader中的fields换简便方式定义,如下: |
17 | var itemReader = new Ext.data.JsonReader( |
18 | {root: "data" }, |
19 | [ "company" , "department" ] |
20 | ); |
方式三:带Record形式:
01 | /**方式一:分离式 Proxy + Reader */ |
02 |
03 | /*1.创建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" } |
10 | ]); |
11 | /*2.创建Proxy*/ |
12 | var costProxy= new Ext.data.HttpProxy({ |
13 | url: 'getProjectCost.eva?doType=getProjectCost' , |
14 | timeout:90000 |
15 | }); |
16 | /*3.创建Reader*/ |
17 | var costReader = new Ext.data.JsonReader({ |
18 | root: "data" |
19 | },costRecord); |
20 | /*4.创建Store*/ |
21 | var costStore = new Ext.data.Store({ |
22 | proxy:costProxy, |
23 | reader: costReader |
24 | }); |
25 |
26 |
27 | /**方式二:结合式 Proxy + Reader */ |
28 |
29 | /*1.创建Record*/ |
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" } |
36 | ]); |
37 | /*2.创建Store*/ |
38 | var costStore = new Ext.data.Store({ |
39 | proxy: new Ext.data.HttpProxy({ |
40 | url: 'getProjectCost.eva?doType=getProjectCost' , |
41 | timeout:90000 |
42 | }), |
43 | reader: new Ext.data.JsonReader({ |
44 | root: "data" |
45 | },costRecord) |
46 | }); |
47 |
48 |
49 | /**方式三:url + reader */ |
50 |
51 | /*1.创建Record*/ |
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" } |
58 | ]); |
59 | /*2.创建Store*/ |
60 | var costStore = new Ext.data.Store({ |
61 | url: "getProjectCost.eva?doType=getProjectCost" , |
62 | reader: new Ext.data.JsonReader({ |
63 | root: "data" |
64 | },costRecord) |
65 | }); |
66 |
67 |
68 | /**方式四:直接创建 JsonStore!*/ ————注意:这种方式只能用JsonStore,不能用父类Store |
69 | var costStore = new Ext.data.JsonStore({ |
70 | url: "getProjectCost.eva?doType=getProjectCost" , |
71 | root: "data" , |
72 | fields:[ "id" , "xmid" , "subject" , "planCost" , "actualCost" ] |
73 | }); |
注:url + root + fields的方式四,只能用JsonStore,不能用Store!!!
实例分析:
1.将方式一的Store放到下拉选中
2.在下拉选选中某项时加载方式二的Store
3.将加载后的数据放到文本框中显示出来
(1).创建下拉选,并监听选中事件,加载第二个store
01 | var xmmcCombox = new Ext.form.ComboBox({ |
02 | fieldLabel: "项目名称" , |
03 | store:xmmcStore, |
04 | displayField: "name" , |
05 | valueField: "id" , |
06 | triggerAction: "all" , |
07 | emptyText: "请选择" , |
08 | editable: false , |
09 | listeners:{ |
10 | /*"expand":function(){ |
11 | xmmcStore.load(); |
12 | },*/ |
13 | "select" : function (obj, record){ |
14 | itemStore.baseParams.xmid = record.get( 'id' ); |
15 | itemStore.load(); |
16 | } |
17 | } |
18 | }); |
(2).创建form表单:
01 | var addForm = new Ext.FormPanel({ |
02 | frame: true , |
03 | labelWidth: 80, |
04 | //labelAlign: "right", |
05 | //buttonAlign:"center", |
06 | items:[ |
07 | xmmcCombox, |
08 | { |
09 | name: "xmdw" , |
10 | xtype: "textfield" , |
11 | fieldLabel: "项目单位" , |
12 | readOnly: true , |
13 | width:200 |
14 | },{ |
15 | name: "depart" , |
16 | xtype: "textfield" , |
17 | fieldLabel: "主管部门" , |
18 | readOnly: true , |
19 | width:200 |
20 | } |
21 | ] |
22 | }); |
(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); |
6 | }); |
1.文本框赋值方式:
1 | getForm().findField( "" ).setValue( "" ) |
后台返回数据如下:
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:true4.要显示非文本框样式,则加上一句:style:'background:none;border:0px;',
01 | { |
02 | name: "xmdw" , |
03 | xtype: "textfield" , |
04 | fieldLabel: "项目单位" , |
05 | readOnly: true , |
06 | style: 'background:none;border:0px;' , |
07 | width:200 |
08 | },{ |
09 | name: "depart" , |
10 | xtype: "textfield" , |
11 | fieldLabel: "主管部门" , |
12 | readOnly: true , |
13 | style: 'background:none;border:0px;' , |
14 | width:200 |
15 | } |