Ext学习_表单组件2

/**
 * 和文本框不同，选择框有两个值：实际值和显示值，显示值通过boxLabel指定，而实际值由inputValue指定，inputValue
 * 的值将传至服务器，默认选择设至checked为true
 * RadioGroup将Radio分组，RadioGroup仅仅将单选按钮从逻辑上绑定到一起，并且提供一个提示信息，另外，该类的
 * width选项很有用，可以适当调整所占的宽度，而Radio的width则起不到相应的效果
 */
/**
 * 日期选择器
 * Ext.form.DateField在原来DatePicker的基础上多了一个文本框，默认格式m/d/y.
 * value则指定日期选择器弹出后的默认值，注意必须是Date对象
 * 可以通过两个方法得到Ext.form.DateField的选择值，getValue()返回的是Date对象，而getRawValue()则返回
 * String数据，和文本框中的值一致，Ext.form.DateField无法选择时间
 */
var dateBirthday = new Ext.form.DateField({
	name: "dateBirthday",
	fieldLabel: "出生日期",
	width: 200,
	format: "Y-m-d H:i:s",
	value: new Date()
});
/**
 * 复选框及复选框分组
 */
var chkHobby1 = new Ext.form.Checkbox({
	name: "chkHobby",
	inputValue: "钓鱼",
	boxLabel: "钓鱼",
	checked: true
});

var chkHobby2 = new Ext.form.Checkbox({
	name: "chkHobby",
	inputValue: "网友聚会",
	boxLabel: "网友聚会"
});

var chkHobby3 = new Ext.form.Checkbox({
	name: "chkHobby",
	inputValue: "洗桑拿",
	boxLabel: "洗桑拿"
});

var chkHobby4 = new Ext.form.Checkbox({
	name: "chkHobby",
	inputValue: "打保龄球",
	boxLabel: "打保龄球"
});

//爱好分组
var grpGobby = new Ext.form.CheckboxGroup({
	name: "hobby",
	fieldLabel: "您的爱好",
	items: [
       chkHobby1,chkHobby2,chkHobby3,chkHobby4
	],
	width: 300
});
/**
 * 数字输入框
 * Ext.form.NumberField其实就是文本框，特殊性在于限定了用户的输入，只能输入数字，包括
 * 小数和整数，如果用户不小心输入了两个或两个以上的小数点，从第二个小数点开始到最后都会被自动清除
 */
var numLove = new Ext.form.NumberField({
	name: "numLove",
	fieldLabel: "最喜欢的数字"
});