ExtJS的数据传输与处理配置相当麻烦,从Ext.data.Connection类到Ext.data.Record到Ext.data.Store,以及一系列proxy和Reader,往往让初学者很头疼。新学一样东西马上就去硬啃这些知识是非常不可取的,本人的经验是先用最简单的,等你熟练了再去深入理解其中的设计。
还好ExtJS提供了几个用于处理数据传输的高级Store,在工作中非常实用:
一: Ext.data.SimpleStore
可以认为:SimpleStore=Store+MemoryProxy+ArrayReader
也就是说这个简洁版本的store专门用来处理返回为数组格式的数据。
看如下代码:
01 |
.... |
02 |
store
: new Ext.data.SimpleStore({ |
03 |
autoLoad
: true , |
04 |
url
: __ctxPath + '/system/loadItemDictionary.do' , |
05 |
fields
: [ 'proTypeId' , 'typeName' ], |
06 |
baseParams
: { |
07 |
itemName
: label |
08 |
} |
09 |
}), |
10 |
.... |
指定url 指定fields 就可以一部请求后台数据,当然后台必须返回的苏数组格式的数据。很简单吧,这个store常用语表单中的下拉框取值。
二:Ext.data.JsonStore
01 |
this .store
= new Ext.data.JsonStore({ |
02 |
url
: __ctxPath + "/communicate/listSmsMobile.do" , |
03 |
root
: "result" , |
04 |
totalProperty
: "totalCounts" , |
05 |
remoteSort
: true , |
06 |
fields
: [{ |
07 |
name
: "smsId" , |
08 |
type
: "int" }, "sendTime" , "recipients" , "phoneNumber" , "userId" , "userName" , "smsContent" , "status" ]}); |
09 |
this .store.setDefaultSort( "smsId" , "desc" ); |
10 |
this .store.load({ |
11 |
params
: { |
12 |
start
: 0, |
13 |
limit
: 25 |
14 |
} |
15 |
}); |
JsonStore将JsonReader和HttpProxy整合在一起了,提供了一个从后台获取json数据的简便方法,分页也非常方便。
后台返回标准的json数据既可以。
三:Ext.data.GroupingJsonStore
01 |
this .store
= new Ext.data.GroupingStore({ |
02 |
proxy
: new Ext.data.HttpProxy({ |
03 |
url
: __ctxPath + "/flow/nodesFieldRights.do?
defId=" + this .defId |
04 |
}), |
05 |
reader
: new Ext.data.JsonReader({ |
06 |
root
: "result" , |
07 |
id
: "id" , |
08 |
fields
: [ { |
09 |
name
: "rightId" , |
10 |
type
: "int" |
11 |
},
{ |
12 |
name
: "mappingId" , |
13 |
type
: "int" |
14 |
}, "taskName" ,
{ |
15 |
name
: "readWrite" , |
16 |
type
: "int" |
17 |
},
{ |
18 |
name
: "refieldId" , |
19 |
type
: "int" |
20 |
}, "fieldName" , "fieldLabel" ] |
21 |
}), |
22 |
groupField
: "taskName" |
23 |
}); |
24 |
this .store.load(); |
上面的groupField标识按某一个字段进行分组显示