EXT JS学习小记

这段时间以来,好久没忙android了.一直在做JavaEE方面的项目.学习了EXT框架的使用,当然只是一些皮毛.现在记录下来,高手飘过,新手想学的可以看看.

在JavaWeb的项目中对用户不符合业务规则的操作,报出异常等情况的提示有这样一个要求：尽量不要使用alert等弹出框作为提示,而是建议使用浮动框来作为替代.不过我在调试项目的过程中,用alert提示框还是用的比较多的.

这个从用户体验来讲是一个非常好的建议,因为alert提示框会让用户觉得很心烦.项目中现在的浮动框是用div来实现的加入了比较温和的底色设置比较合适的大小,然后再使用时使用此div组件进行提示.设置div要显示的位置和显示的文字还有一个就是要设置多长时间消失,这个很好用也有很好的用户体验.

Ext完全考虑到了这个并且非常优美的进行实现和应用.接下来就针对这个情况来好好学习一下,在EXT中是怎么实现的.

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

#1.初始化tips：js代码

1 Ext.QuickTips.init();  

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

1 var btn3 = new Ext.Button({   
2             renderTo : Ext.getBody(),   
3             text : "Tips",   
4             width : "200",   
5             tooltip : "tipsTest!",   
6             tooltipType : "qtip",
7 });  

测试效果：当鼠标放在button上时会提示"tips Test"
还有当打开tips 提示后,如果textField 组件设置了allowBlank : false则会提示此组件对应的值不能为空.

#2.增加更强大的校验

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

这边举一个简单的例子,代码如下：

1 name : "password",   
2 fieldLabel : "密码",   
3 inputType : "password",   
4 allowBlank : false,   
5 xtype : "textfield",   
6 minLength:6,   
7 minLengthText:"密码长度不能小于6个字符",   
8 maxLength: 10,   
9 maxLengthText: "密码长度不能大于10个字符"  

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

在这里做一个简单的小结：EXT对校验的提示和校验的规则和方式做了很好的实现,更好的用户体验,更简单的编码方式.

下面列出一个比较典型的验证的例子：

感谢博文：http://verran.iteye.com/blog/890893

  1 Ext.onReady(function() {   
  2             Ext.QuickTips.init()   
  3             var f = new Ext.FormPanel({   
  4                         url : 'MyServlet',   
  5                         method : 'post',   
  6                         baseParams : {   
  7                             sex : "男"  
  8                         },   
  9                         defaults : {   
 10                             width : 230   
 11                         },   
 12                         defaultType : 'textfield',   
 13                         title : "Form",   
 14                         width : "700",   
 15                         height : "600",   
 16                         bodyStyle : "padding,6px",   
 17                         frame : true,   
 18                         items : [new Ext.form.TextField({   
 19                                             name : "userName",   
 20                                             allowBlank : false,   
 21                                             fieldLabel : "用户名"  
 22                                         }),    
 23                                 {   
 24                                     name : "password",   
 25                                     fieldLabel : "密码",   
 26                                     inputType : "password",   
 27                                     allowBlank : false,   
 28                                     xtype : "textfield",   
 29                                     minLength:6,   
 30                                     minLengthText:"密码长度不能小于6个字符",   
 31                                     maxLength: 10,   
 32                                     maxLengthText: "密码长度不能大于10个字符"  
 33                                 }, {   
 34                                     name : "photo",   
 35                                     fieldLabel : "照片",   
 36                                     inputType : "file",   
 37                                     allowBlank : false,   
 38                                     xtype : "textfield"  
 39                                 }, {   
 40                                     name : "date",   
 41                                     fieldLabel : "日期",   
 42                                     width : 200,   
 43                                     format : "Y-m-d",   
 44                                     value : new Date(),   
 45                                     xtype : "datefield"  
 46                                 },   
 47   
 48                                 {   
 49                                     name : "sex",   
 50                                     inputValue : "0",   
 51                                     boxLabel : "男",   
 52                                     allowBlank : false,   
 53                                     xtype : "radio",   
 54                                     checked : true  
 55                                 }, {   
 56                                     name : "sex",   
 57                                     inputValue : "1",   
 58                                     boxLabel : "女",   
 59                                     allowBlank : false,   
 60                                     xtype : "radio"  
 61                                 }, {   
 62                                     name : "levle",   
 63                                     inputValue : "1",   
 64                                     boxLabel : "本科",   
 65                                     allowBlank : false,   
 66                                     xtype : "checkbox"  
 67                                 }, {   
 68                                     name : "age",   
 69                                     fieldLabel : "年龄",   
 70                                     allowBlank : false,   
 71                                     xtype : "numberfield",   
 72                                     maxValue : 100,   
 73                                     minValue : 1   
 74                                 }, new Ext.form.TimeField({   
 75                                             fieldLabel : 'Time',   
 76                                             name : 'time',   
 77                                             minValue : '8:00am',   
 78                                             maxValue : '6:00pm',   
 79                                             format : "H:i"  
 80                                         }), {   
 81                                     fieldLabel : 'Email',   
 82                                     name : 'email',   
 83                                     vtype : 'email'  
 84                                 }, {   
 85                                     name : "ta",   
 86                                     fieldLabel : "经历",   
 87                                     xtype : "textarea",   
 88                                     width : 100,   
 89                                     height : 50   
 90                                 }, {   
 91                                     name : "ta",   
 92                                     fieldLabel : "个人简历",   
 93                                     xtype : "htmleditor",   
 94                                     height : 100,   
 95                                     width : 500,   
 96                                     enalbeLists : false,   
 97                                     enableSourceEdite : true,   
 98                                     enableColors : false,   
 99                                     enableLinks : true  
100                                 }],   
101                         buttons : [{   
102                             text : "确定",   
103                             lableAlgin : "left",   
104                             tooltip : "密码不能为空！",   
105                             tooltipType : "qtip",   
106                             handler : function() {   
107                                 f.getForm().submit({   
108                                     success : function(f, action) {   
109                                         Ext.MessageBox.alert("SUC",   
110                                                 action.result.msg   
111                                                         + action.result.time);   
112                                     },   
113                                     failure : function() {   
114                                         Ext.MessageBox.alert("ERROR", "提交失败");   
115                                     }   
116                                 });   
117                             }   
118                         }, {   
119                             text : "重置",   
120                             lableAlgin : "left",   
121                             handler : function() {   
122                                 var feilds = f.getForm().items.items;   
123                                 for (var i = 0; i < feilds.length; i++) {   
124                                     feilds[i].reset();   
125                                 }   
126                             }   
127                         }]   
128   
129                     });   
130             f.render(Ext.getBody());   
131         });  

 

2011.11.16.pm

jack.li

QQ:523072842
Email:523072842@qq.com

转载于:https://www.cnblogs.com/jackxlee/archive/2011/11/16/2251506.html