这段时间以来,好久没忙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
