ext表单控件

js文件

Ext.onReady(function() {
	// 对于提交中出现的乱码，在Ext中可以修改Request Header中Content-Type的设置
	Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
	Ext.QuickTips.init();
	Ext.apply(Ext.QuickTips.getQuickTip(), {
		dismissDelay : 0
	});
	Ext.form.Field.prototype.msgTarget = 'side';

	var data = [['湖北', 'hubei'], ['江西', 'jiangxi'], ['江苏', 'jiangsu'],
			['安徽', 'anhui'], ['北京', 'beijing'], ['上海', 'shanghai'],
			['天津', 'tianjin']];
	var store = new Ext.data.SimpleStore({
		fields : ['chinese', 'english'],
		data : data
	});

	var combo1 = new Ext.form.ComboBox({
		id : 'province',
		name : 'province',
		hiddenName : 'provinceHidden',
		displayField : 'chinese',
		valueField : 'english',
		mode : 'local',
		minChars : '1',
		queryDelay : 300,// 延时300毫秒
		store : store,
		triggerAction : "all",
		pageSize : 3,
		width : 200,
		labelSeparator : ':',
		emptyText : '请选择',
		fieldLabel : '省',
		readOnly : false,
		listeners : {
			select : function(comb, record, index) {
				alert(comb.getValue());
			}
		}
	});
	// 创建Form面板
	var form = new Ext.form.FormPanel({
		id : 'form',
		name : 'form',
		// applyTo : 'div1',
		frame : true,
		bodyStyle : 'padding:1px 0 0 0;',
		buttonAlign : 'center',
		labelAlign : 'left',
		labelWidth : 60,
		width : 600,
		defaultType : 'textfield',
		items : [{
			id : 'username',
			name : 'username',
			allowBlank : false,
			msgTarget : 'qtip',
			fieldLabel : '姓名',
			itemCls : 'sex-male', // 向左边浮动,处理控件横排
			clearCls : 'allow-float'// 允许两边浮动
		}, {
			id : 'password',
			name : 'password',
			fieldLabel : '密码',
			inputType : 'password'
		}, {
			xtype : 'radio',
			fieldLabel : '性别',
			boxLabel : '男',
			name : 'sex',
			id : 'male',
			itemCls : 'sex-male', // 向左边浮动,处理控件横排
			clearCls : 'allow-float', // 允许两边浮动,在实际生成的HTML结构中有专门的DIV阻断浮动
			checked : true
		}, {
			xtype : 'radio',
			boxLabel : '女',
			name : 'sex',
			id : 'female',
			width : 60,
			itemCls : 'sex-female', // 向左浮动,处理控件横排
			clearCls : 'allow-float', // 允许两边浮动
			hideLabel : true
				// 不显示前面"性别"的标签
				}, {
					xtype : 'checkbox',
					boxLabel : '是否毕业',
					name : 'graduate',
					id : 'graduate',
					itemCls : 'sex-female', // 向左浮动,处理控件横排
					clearCls : 'allow-float', // 允许两边浮动
					hideLabel : true
				// 不显示前面"性别"的标签
				}, {
					xtype : 'numberfield',
					fieldLabel : '年龄',
					id : 'i_age',
					name : 'n_age',
					allowNegative : false,
					allowDecimals : false,
					itemCls : 'age-field', // 向左浮动,处理控件横排
					clearCls : 'allow-float', // 允许两边浮动
					width : 90
				}, {
					xtype : 'textfield',
					fieldLabel : '住址',
					name : 'n_address',
					allowBlank : false,
					emptyText : '请输入',
					id : 'i_address',
					maxLength : 20,
					itemCls : 'stop-float', // 不允许浮动,结束控件横排
					width : 300
				}, {
					xtype : 'datefield',
					fieldLabel : '出生日期',
					name : 'n_birthday',
					id : 'i_birthday',
					disabledDays : [0],// 禁止选择星期日
					itemCls : 'sex-male', // 不允许浮动,结束控件横排
					clearCls : 'allow-float', // 允许两边浮动
					width : 120
				}, {
					xtype : 'timefield',
					fieldLabel : ' ',
					name : 'n_time',
					id : 'i_time',
					itemCls : 'sex-male', // 不允许浮动,结束控件横排
					clearCls : 'allow-float', // 允许两边浮动
					width : 120,
					hideLabel : true
				}, {
					xtype : "trigger",
					fieldLabel : "触发",
					anchor : "50%",
					onTriggerClick : function(e) {// 在这里写你要实现的事件，很容易扩展
						alert("www.langsin.com");
					}
				}, {
					xtype : 'textarea',
					fieldLabel : '备注',
					name : 'n_area',
					id : 'i_area',
					// itemCls:'sex-male', //不允许浮动,结束控件横排
					// clearCls:'allow-float', //允许两边浮动
					width : 300
				}, {
					xtype : 'checkboxgroup',
					fieldLabel : '外协录入',
					columns : 4,
					items : [{
						boxLabel : '外协申请批件',
						name : 'lrb1',
						inputValue : '100'
					}, {
						boxLabel : '合同洽谈',
						name : 'lrb2',
						inputValue : '101'
					}, {
						boxLabel : '市场准入材料',
						name : 'lrb3',
						inputValue : '102'
					}, {
						boxLabel : '网上审批',
						name : 'lrb4',
						inputValue : '103'
					}, {
						boxLabel : '合同信息',
						name : 'lrb5',
						inputValue : '104'
					}, {
						boxLabel : '付款情况',
						name : 'lrb6',
						inputValue : '105'
					}, {
						boxLabel : '检查验收',
						name : 'lrb7',
						inputValue : '106'
					}]
				}, {
					xtype : 'combo',
					fieldLabel : '网站',
					name : 'n_url',
					triggerAction : "all",// 请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项
					listeners : {
						select : function(comb, record, index) {
							alert(comb.getValue());
						}
					},
					readOnly : true,
					transform : "select",// html中的id
					lazyRender : true,
					width : 120
				}, {// 显示图片
					id : 'browseImage',
					fieldLabel : '照片',
					autoCreate : {
						tag : 'input',
						type : 'image',
						src : 'demo/oicq.gif',
						// src : Ext.BLANK_IMAGE_URL,
						style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
						name : 'imageBrowse'
					}
				}, {
					inputType : 'file',
					id : 'imageUpload',
					fieldLabel : '文件',
					width : 300
				}, {
					id : 'url',
					name : 'url',
					allowBlank : false,
					width : 300,
					fieldLabel : '网址',
					value : 'http://www.163.com',
					vtype : 'url'// url,email,alpha,alphanum
				}, combo1, {
					xtype : 'htmleditor',
					id : 'editor',
					name : 'editor',
					fieldLabel : '编辑器',
					// fontFamilies:['宋体','隶书','楷体'],
					width : 250,
					anchor : "99%"
				}

		],
		buttons : [{
			text : '确定',
			handler : onOK
				// 实际应用一般是处理form.getForm.submit()事件
				}, {
					text : '重置',
					handler : function() {

						form.form.getEl().dom.reset();// 使用Dom的刷新方法
						form.getForm().reset();// Ext reset()
						// 方法刷新时,无法刷新inputType:file的值的解决方法
					}
				}],
		keys : [{ // 处理键盘回车事件
			key : Ext.EventObject.ENTER,
			fn : onOK,
			scope : this
		}]
	});

	var menus = new Ext.menu.Menu({
		shadow : 'frame',// 设置菜单四打边有阴影
		items : [{
			text : '是否启用',
			checked : true,
			handler : onSave
		}, {
			text : '另存为',
			handler : onSave,
			menu : new Ext.menu.Menu({
				items : [{
					text : '文件另存为',
					group : 'theme',
					checked : false,
					handler : onSave
				}, {
					text : '图片另存为',
					group : 'theme',
					checked : false,
					handler : onSave
				}]
			})
		}]
	});
	function onSave(item) {
		alert(item.text);
	}

	// 工具栏
	var toolbar = new Ext.Toolbar({
		applyTo : 'tool',
		width : 500
	});
	toolbar.addButton([{
		text : '新建'
	}, {
		text : '打开'
	}, {
		text : '保存'
	}]);
	toolbar.addSeparator();
	toolbar.addField(new Ext.form.TextField({
		width : 30
	}));
	toolbar.addFill();
	toolbar.addText('静态文本');
	toolbar.add('-', '->', {
		text : '文件',
		menu : menus
	});

	// 确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合
	function onOK() {
		var strMsg;
		strMsg = '姓名：' + form.getComponent('username').getValue() + '，性别：';
		if (form.getComponent('male').checked)
			strMsg += '男';
		if (form.getComponent('female').checked)
			strMsg += '女';
		strMsg += '，年龄：' + form.getComponent('i_age').getValue();
		strMsg += '，住址：' + form.getComponent('i_address').getValue();

		// 通过循环遍历checkboxgroup获得值
		// alert(strMsg);
		var checkboxgroup = form.items.itemAt(11);
		// alert(checkboxgroup.getXType());//类型

		var vItems = checkboxgroup.items;
		var vCount = vItems.getCount();
		for (var i = 0; i < vCount; i++) {
			// alert(vItems.itemAt(i).getValue());//值
		}

		form.form.submit({
			waitMsg : '登陆中,请稍等...',
			method : 'POST',
			clientValidation : true,
			params : {
				p : '参数'
			}, // 传递的参数
			url : "demo/MyJsp.jsp",
			// 定义要跳转的url,格式被请求的页面格式为{ 'success': true,'msg': '成功'}
			success : function(form, action) {
				// Ext.Msg.alert('信息',"提示："+"response.responseText");//加粗体是得到后台的具体返回信息。
				Ext.Msg.alert('提示', "数据修改成功");// 成功提示信息
			},
			failure : function(form, action) {
				Ext.Msg.alert('提示', action.failureType);
			}
		});
	}

	// 创建主窗口
	var win = new Ext.Window({
		title : 'Ext中的FormPanel面板及Form控件',
		width : window.document.body.clientWidth / 2,
		closable : true,
		y : 10,
		collapsible : true,
		// draggable: false,
		resizable : false,
		modal : false,
		closeAction : 'hide',
		tbar : [{
			text : '顶部按钮'
		}],
		border : true,
		manager : wgroup,
		items : [form],
		buttons : []
	});
	win.show();

	var wgroup = Ext.WindowGroup();
		// 隐藏全部window
		// wgroup.hideAll();

});

/**
 * 在Ext2.2的Ext.form.FormPanel中如果有RadioGroup或者CheckboxGroup，那么
 * FormPanel.form.setValues方法对这2个东东内部的radio和checkbox无法动态赋值，需要对
 * Ext.form.BasicForm的findField方法进行修正，代码如下：
 */
Ext.override(Ext.form.BasicForm, {
	findField : function(id) {
		var field = this.items.get(id);
		if (!field) {
			this.items.each(function(f) {
				if (f.isXType('radiogroup') || f.isXType('checkboxgroup')) {
					f.items.each(function(c) {
						if (c.isFormField
								&& (c.dataIndex == id || c.id == id || c
										.getName() == id)) {
							field = c;
							return false;
						}
					});
				}

				if (f.isFormField
						&& (f.dataIndex == id || f.id == id || f.getName() == id)) {
					field = f;
					return false;
				}
			});
		}
		return field || null;
	}
});

 html文件

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Form控件测试</title>
		<style type="text/css" media="all">
			.allow-float {clear:none!important;} /* 允许该元素浮动 */
			.stop-float {clear:both!important;} /* 阻止该元素浮动 */
			.sex-male {float:left;}
			.sex-female {float:left;padding:0 0 0 20px;}
			.age-field {float:left;padding:0 0 0 50px;}
		</style>
		<link rel="stylesheet" type="text/css"
			href="extjs/resources/css/ext-all.css" />
		<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="extjs/ext-all.js"></script>
		<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
		<script type="text/javascript" src="form.js"></script>
	</head>
	<body>
		<div id="tool"></div>
		<select id="select">
			<option value="1">
				浪曦
			</option>
			<option value="2">
				博客园
			</option>
			<option value="3">
				百度
			</option>
			<option value="4">
				新浪
			</option>
		</select>
	</body>
</html>