日期:2014-05-16  浏览次数:20257 次

extjs combobox store总结

在传统页面的设计中,使用select标记作为下拉列表框,但在ExtJs中 ComboBox并不是一个select,不得不说ExtJs把按钮改的面目全非,这看起来和select标记别无二致,只是更加的漂亮了,再看看 ExtJs帮我生成的代码,会发现select扯不上任何关系了,取而代之的是N个div,复杂了N多,这便是美丽所付出的代价。

?



?

?

?

?

ComboBox组件却需要Ext.data来提供数据。于是Ext.data成了数据的来源,控件则负责显示数据。分工如此的明确,就像PHP中的MVC模式。

Ext.data中有三个比较复杂的类:DataProxy, DataReader, Store. 这三个类难以用语言来描述。暂时可以这么理解:
DataProxy?: 获取的数据(可以是数组,Json格式,xml格式),来自本地或者远程。就像数据库中二维表的数据形式。
DataReader?: 定义数据项的逻辑结构,数据的类型等。就像数据库中二维表的字段定义。
Store?: 存储器,用于整合Proxy和Reader,相当于把两个东西整合起来。

Ext.data.DataProxy类并不常使用, 一般使用它的子类:
MemoryProxy?: 获取内存数据,可以是数组、json、xml
HttpProxy?: 使用HTTP协议通过ajax获取数据
ScriptTagProxy: 和HttpProxy类似,但支持跨域获取数据。

如下我们定义一个城市的数据Proxy

var?cityProxy?=?new?Ext.data.MemoryProxy([
????
[1,'福州市'],
????
[2,'厦门市'],
????
[3,'泉州市'],
????
[4,'漳州市'],
????
[5,'三明市']
]);

Ext.data.DataReader类,其实总是依靠DataProxy做事,主要定义Proxy的逻辑结构,如:逻辑名称:name,数据类型:type,列与数据源的索引映射:mapping等等
data.DataReader类也有三个子类:Ext.data.ArrayReader、Ext.data.JsonReader、Ext.data.XmlReader
由于上面建立的数组形式的cityProxy,那么建立逻辑结果也需要使用ArrayReader