EXTjs学习笔记（5）

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

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

?

1. 初始化tips

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());});

?