在传统页面的设计中,使用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

var cityReader = new Ext.data.ArrayReader({},[
	{name: 'cid', type:'int', mapping:0},
	{name: 'cname', type:'string', mapping:1}
]);

接下来的Store就简单了

var cityStore = new Ext.data.Store({
	proxy: cityProxy,
	reader:cityReader,
	autoLoad:true //开启自动加载,一般情况下没有开启,属于延迟加载,也可以采用 cityStore.load()方法
});

我们用画张图来看看关系:

可以看出Ext.data.Store的主要目的是在内存中建立一张数据表,在填充到形态千差万别的组件中,如:ComboBox和GridPanel。
建立一个典型的下拉框:

var cityCombo = new Ext.form.ComboBox({
	renderTo : Ext.getBody(),
	hiddenName  : 'city', //在ComboBox,中hiddenName才是真正的名字
	mode  :'local',   //默认是remote远程获取模式
	triggerAction:'all', 
	store : cityStore,   //选择我们刚刚的数据源
	displayField: 'cname',  //显示的字段
	valueField  : 'cid',    //真实的字段
	emptyText   : '请选择福建的城市',
});

再设置一个按钮通过ComboBox类中的两个方法:getValue()和getRawValue(),来查看下拉列表框的显示值和真实值:

var btn = new Ext.Button({
	text : '列表框的值',
	renderTo : Ext.getBody(),
	handler : function() {
		Ext.Msg.alert('结构','实际值:' + cityCombo.getValue() + '; 显示值:' + cityCombo.getRawValue());
	}
});

在敏捷回顾会议中引导使用ORID

头一次接触ORID方法在2015年的一次敏捷回顾上,但是还不知道它,当天围坐在小会议室中通过该方法总结迭代开发经验,使我很有收获。ORID工作法很好理解,几乎一听就会,只是日常工作中我们总会选择更偷懒的方法,而忽略了总结过程中思考和逻辑的重要性。根据百度百科,ORID是一种...… Continue reading

生产环境Linux部署

Published on July 12, 2017

SVN 迁移到 GitLab

Published on June 17, 2017