Extjs之按钮与日期选择器

 

一、Ext.Button类

 

按钮控件用Ext.Button来表示，有三种类型：提交（submit）、重置（reset）和普通按钮（button）。对于按钮来说，最重要的就是触发单击事件了。

 

 

按照OOP的习惯，我们会这样定义按钮：

var btn = new Ext.Button();
btn.setText("确定"); // 按钮上的文字
btn.type = "submit"; // 按钮类型
btn.setHandler(function() { // 按钮被单击后执行本方法
			Ext.Msg.alert("按钮", "按钮测试，效果真好");
		});
btn.render(Ext.getBody()); // 将按钮放在指定位置显示

 

太完美了，完全吻合面向对象编程的思想，创建对象、设置属性、响应事件，如行云流水，一气呵成。但是，等下，Extjs更加推崇下面的做法，完全通过配置来实现。

var btn = new Ext.Button({
			renderTo : Ext.getBody(),
			text : "确定",
			type : "submit",
			handler : function() {
				Ext.Msg.alert("按钮", "按钮测试，效果真好");
			}
		});

构建Button 时，传递一个json 对象，renderTo 是一个经常被使用的属性，用于指定当前组件渲染在什么位置，一般作为指定对象的子节点，本例中的Ext.getBody()方法返回document.body对象，所以，btn按钮将是body的子节点，对应的方法是render()。而handler属性则对应setHandler()方法，用来定义按钮被单击之后的处理函数。 

 

下面的另外一些配置能增强按钮的效果：

pressed: true 使按钮处于按下状态

disabled: true 使按钮处理禁用状态

minWidth: 100 设置按钮的最小宽度

icon: "../imgs/133.gif" 设置按钮的背景图片，属性值是图片名称

iconCls: "bk" 同上，属性值是类选择器名称

 

 

二、日期选择器Ext.DatePicker类

 

Ext.DatePicker 类定义了一个用于选择日期的组件，他的效果就像这样：

说起来，Ext.DatePicker 并不复杂，平时用得最多的就是获取用户选择的日期，这是通过该类的getValue()方法来得到的。其他很多配置选项主要是用来作个性化和本地化，只和表现有关，和功能无关。

 

例子：

var dp = new Ext.DatePicker({
			renderTo : Ext.getBody(),
			minDate : Date.parseDate("2009-1-1", "Y-m-d"),
			maxDate : Date.parseDate("2009-12-30", "Y-m-d"),
			value : Date.parseDate("2009-12-30", "Y-m-d"),
			handler : function() {
				Ext.MessageBox.alert("日期", Ext.util.Format.date(
								this.getValue(), 'Y-m-d'));
			}
		});

前面讲过的配置选项就不重复了，以后也不会重复。minDate和maxDate是配置可选日期的最小值和最大值，value是日期控件显示后的初始值。通过getValue()方法得到用户选择的日期，再通过Ext.util.Format.date格式化。 

 

本地化需要导入ExtJs包中的 ext-3.2.0\src\locale\ext-lang-zh_CN.js 文件。