EXTjs学习笔记（5）

      在项目中用户对于不符合业务规则，异常等情况的提示有一个要求： 尽量不使用alert 等弹出框作为提示，而是建议使用浮动框来作为替代。这个从用户体验来讲是一个非常好的建议，因为alert让人觉得很烦，一个一个的弹出让人觉得烦躁、恐惧。 项目中现在的浮动框是用div来实现的加入了比较温和的底色设置比较合适的大小，然后再使用时使用此div组件进行提示，设置div要显示的位置和显示的文字还有一个就是要设置多长时间消失，这个很好用也有很好的用户体验。Ext完全考虑到了这个并且非常优美的进行实现和应用，下面就对此进行学习。

     Ext默认情况下对tips 浮动框是不显示的，需要增加初始化代码才可以。

 

1. 初始化tips

Ext.QuickTips.init();

 

2. 给组件增加tips信息和tips类型

   

			var btn3 = new Ext.Button({
						renderTo : Ext.getBody(),
						text : "Tips",
						width : "200",
	    				                tooltip : "tipsTest！",
						tooltipType : "qtip",					});

 

3. 测试效果

当鼠标放在button上时会提示 “tipsTest”

还有当打开tips 提示后 如果textField 组件设置了  allowBlank : false 则会提示此组件对应的值不能为空。

 

4. 增加更强大的校验

    可以增加字符的长度校验，格式校验等，格式的校验主要通过正则表达式来实现，EXT对常用的规则进行了封装无需自行编写正则表达式，比如URL、email等

 

举例：

									name : "password",
									fieldLabel : "密码",
									inputType : "password",
									allowBlank : false,
									xtype : "textfield",
									minLength:6,
									minLengthText:"密码长度不能小于6个字符",
									maxLength: 10,
									maxLengthText: "密码长度不能大于10个字符"

 

 上面的代码已经说的很明白了，实现相当简单。

 

小结：

ext对校验的提示和校验的规则和方式做了很好的实现，更好的用户体验，更简单的编码方式。

 

实例：

列出一个包含常用组件和校验的代码：

Ext.onReady(function() {
			Ext.QuickTips.init()
			var f = new Ext.FormPanel({
						url : 'MyServlet',
						method : 'post',
						baseParams : {
							sex : "男"
						},
						defaults : {
							width : 230
						},
						defaultType : 'textfield',
						title : "Form",
						width : "700",
						height : "600",
						bodyStyle : "padding,6px",
						frame : true,
						items : [new Ext.form.TextField({
											name : "userName",
											allowBlank : false,
											fieldLabel : "用户名"
										}), 
								{
									name : "password",
									fieldLabel : "密码",
									inputType : "password",
									allowBlank : false,
									xtype : "textfield",
									minLength:6,
									minLengthText:"密码长度不能小于6个字符",
									maxLength: 10,
									maxLengthText: "密码长度不能大于10个字符"
								}, {
									name : "photo",
									fieldLabel : "照片",
									inputType : "file",
									allowBlank : false,
									xtype : "textfield"
								}, {
									name : "date",
									fieldLabel : "日期",
									width : 200,
									format : "Y-m-d",
									value : new Date(),
									xtype : "datefield"
								},

								{
									name : "sex",
									inputValue : "0",
									boxLabel : "男",
									allowBlank : false,
									xtype : "radio",
									checked : true
								}, {
									name : "sex",
									inputValue : "1",
									boxLabel : "女",
									allowBlank : false,
									xtype : "radio"
								}, {
									name : "levle",
									inputValue : "1",
									boxLabel : "本科",
									allowBlank : false,
									xtype : "checkbox"
								}, {
									name : "age",
									fieldLabel : "年龄",
									allowBlank : false,
									xtype : "numberfield",
									maxValue : 100,
									minValue : 1
								}, new Ext.form.TimeField({
											fieldLabel : 'Time',
											name : 'time',
											minValue : '8:00am',
											maxValue : '6:00pm',
											format : "H:i"
										}), {
									fieldLabel : 'Email',
									name : 'email',
									vtype : 'email'
								}, {
									name : "ta",
									fieldLabel : "经历",
									xtype : "textarea",
									width : 100,
									height : 50
								}, {
									name : "ta",
									fieldLabel : "个人简历",
									xtype : "htmleditor",
									height : 100,
									width : 500,
									enalbeLists : false,
									enableSourceEdite : true,
									enableColors : false,
									enableLinks : true
								}],
						buttons : [{
							text : "确定",
							lableAlgin : "left",
							tooltip : "密码不能为空！",
							tooltipType : "qtip",
							handler : function() {
								f.getForm().submit({
									success : function(f, action) {
										Ext.MessageBox.alert("SUC",
												action.result.msg
														+ action.result.time);
									},
									failure : function() {
										Ext.MessageBox.alert("ERROR", "提交失败");
									}
								});
							}
						}, {
							text : "重置",
							lableAlgin : "left",
							handler : function() {
								var feilds = f.getForm().items.items;
								for (var i = 0; i < feilds.length; i++) {
									feilds[i].reset();
								}
							}
						}]

					});
			f.render(Ext.getBody());
		});