先上效果图:
![](/upload/attachment/75400/90fe6722-d062-335f-a04c-fc4cdc977ab9.jpg)
源代码和说明:
Ext.namespace('Boat.UI');
///带单位的文本框
Boat.UI.UnitField = Ext.extend(Ext.form.TextField,{
/*单位说明文字*/
unitText:'',
onRender: function(ct, position){
Boat.UI.UnitField.superclass.onRender.call(this, ct, position);
this.unitEl = ct.createChild({tag:'span',html:this.unitText});
this.unitEl.addClass('x-form-unit');
},
alignErrorIcon : function(){
this.errorIcon.alignTo(this.unitEl,'tl-tr',[2, 0]);
}
});
Ext.reg('unitfield', Boat.UI.UnitField);
///验证码文本框
Boat.UI.CodeField = Ext.extend(Ext.form.TextField,{
/*获取验证码图片的后台Url*/
codeUrl:Ext.BLANK_IMAGE_URL,
/*是否自动加载验证码图片*/
autoLoad:true,
onRender: function(ct, position){
Boat.UI.CodeField.superclass.onRender.call(this, ct, position);
this.codeEl = ct.createChild({tag:'img',src:Ext.BLANK_IMAGE_URL});
this.codeEl.addClass('x-form-code');
this.codeEl.on('click',this.loadCodeImg,this);
if(this.autoLoad) this.loadCodeImg();
},
alignErrorIcon : function(){
this.errorIcon.alignTo(this.codeEl,'tl-tr',[2, 0]);
},
/*加载验证码图片方法,加上随机数参数让图片刷新*/
loadCodeImg: function(){
this.codeEl.set({src:this.codeUrl+'?id='+Math.random()});
}
});
Ext.reg('codefield', Boat.UI.CodeField);
带注释的代码是扩展的地方
CSS样式代码:
.x-form-code{width:50px;height:22px;vertical-align:middle;padding-left:2px;cursor:pointer;}
.x-form-unit{height:22px;line-height:22px;padding-left:2px;display:inline-block;}
使用方法:
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif';
Ext.form.Field.prototype.msgTarget = 'side';
Ext.QuickTips.init();
Ext.onReady(function(){
var form = new Ext.FormPanel({
title:'验证码和单位文本框',
renderTo:'form1',
labelWidth:60,
labelAlign: 'right',
frame:true,
bodyStyle:'padding:5px',
width:300,
height:200,
items:[
{xtype:'codefield',fieldLabel: '验证码',width:60,allowBlank: false,
codeUrl:'http://localhost/cgi/getCheckCode.ashx'},
{xtype:'unitfield',fieldLabel: '库存数量', unitText:'吨', width:60,allowBlank: false}
]
});
});
</script>
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0007/5400/90fe6722-d062-335f-a04c-fc4cdc977ab9-thumb.jpg)
- 大小: 34.3 KB
分享到:
相关推荐
ImageStyle.TextFontSize:文本字体大小,以像素(pix)为单位,验证码图像大小根据此而变化,如果ImgSize大于由该值指定的大小,则图像大小为ImgSize ImageStyle.ImgSize:验证码图像大小,以像素(pix)为单位,如果...
ImageStyle-TextFontSize:文本字体大小,以像素(pix)为单位,验证码图像大小根据此而变化,如果ImgSize大于由该值指定的大小,则图像大小为ImgSize ImageStyle-ImgSize:验证码图像大小,以像素(pix)为单位,如果...
ImageStyle.TextFontSize:文本字体大小,以像素(pix)为单位,验证码图像大小根据此而变化,如果ImgSize大于由该值指定的大小,则图像大小为ImgSize ImageStyle.ImgSize:验证码图像大小,以像素(pix)为单位,如果...
ImageStyle.TextFontSize:文本字体大小,以像素(pix)为单位,验证码图像大小根据此而变化,如果ImgSize大于由该值指定的大小,则图像大小为ImgSize ImageStyle.ImgSize:验证码图像大小,以像素(pix)为单位,如果...
通过"InPutEditText"这个自定义View,开发者可以创建一个具有独特设计和交互的验证码输入框,增强用户在移动应用中的验证体验。了解和掌握以上知识点,不仅能帮助你理解和使用这个自定义View,还能为你的Android开发...
22. **验证码**:验证码通常以图像形式显示,由服务器生成,用于防止自动化的机器人或恶意软件。 23. **Flash元件**:Flash元件包括图形、按钮和影片剪辑,但不包括图像。 24. **动作触发**:在网页设计中,动作...
// 检查验证码文本框是否有效 console.log($('#email').validatebox('validate')); // 获取验证结果 console.log($('#email').validatebox('isValid')); // 禁用和启用验证 $('#email').validatebox('...
' 修复 - 网页_访问() GET访问带上Cookie无效的BUG 感谢坛友[ldojh]提醒 ' 修复 - 网页_访问() 一直访问句柄数会一直涨的BUG ' 修复 - 时间_取中国星期几 () 感谢坛友[sqdwvf]提醒 ' 修复 - 网页_验证码读取 () 增加...
Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...