验证图片客户端控制类for Ext

最新推荐文章于 2024-08-26 15:17:18 发布

原创最新推荐文章于 2024-08-26 15:17:18 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #HTML #UI #prototype

extjs 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个用于前端开发的验证图片控件实现方法。该控件可通过点击刷新验证图片，并展示了如何将其集成到登录面板中。提供了详细的代码示例，包括初始化验证图片控件的过程以及相关样式设置。

验证图片客户端控制类for Ext

obj = page = UI = Ext; //注意这句，Ext作用太多，明确一下对象的用途希望代码更清晰：）
/**
* @class Client.Util.html.waterMarkPic
* 验证图片客户端控制类
* @param {Object} config
*/
Client.Util.html.waterMarkPic = function(config){
obj.apply(this, config);
}
Client.Util.html.waterMarkPic.prototype = {
tag: 'img',
alt: '单击刷新验证图片',
cls: 'waterMarkImg',
src: 'demoResources/waterMarkPic.jpg',
vspace: 5,
hspace: 5,
init: function(container){
container.on('render', function(container){
var imgEl = container.getEl().child('img.waterMarkImg');
imgEl.addClass('mouseHoverWithHand');
imgEl.on('click', this.onImgClick, this);
}, this, {
delay: 100
});
},
onImgClick: function(e, el){
el.src = this.src;
}
}

示例：

obj.namespace('global.membership');
global.membership.loginPanel = obj.extend(UI.Window, {
title : 'xxx欢迎您！',
initComponent : function(){
//建立验证图片实例
var waterMarkPic = new Client.Util.html.waterMarkPic();
this.html.children[2].children[2] = waterMarkPic;
global.membership.loginPanel.superclass.initComponent.call(this);
waterMarkPic.init(this);
},
html: {
tag : 'form', children : [
{
tag : 'div', cls: 'global-membership-loginPanel-row', children : [
{
tag : 'span', html : "E-Mail"
},{
tag: 'input', type : 'text',
cls: 'global-membership-loginPanel-inputStyle_1',
value : 'email', name: "email"
}
]
},{
tag : 'div', cls: 'global-membership-loginPanel-row', children : [
{
tag : 'span', html : "密码"
},{
cls : 'global-membership-loginPanel-inputStyle_1',
tag: 'input', type : 'password', value : '', name: "password"
}
]
},{
tag : 'div', cls: 'global-membership-loginPanel-row', children : [
{
tag : 'span', html : "验证码"
},{
tag: 'input', type : 'text',
cls : 'global-membership-loginPanel-inputWaterMarkPic',
value : 'email', name: "waterMarkPic"
}
//应该在这里建立验证图片的实例
]
},
Client.Util.html.CF_br,{
tag :'a', children:[
{
tag : 'input', type: 'checkbox', id: 'global-membership-loginPanel-optionRememberMe'
},{
tag : 'lable', html :'记住我', 'for': 'global-membership-loginPanel-optionRememberMe'
}
]
},{
tag : 'div', children:[
{tag : 'a', html:'忘记了密码？'},
{tag : 'a', html:'还未注册？'}
]
}
]
},
buttons : [{
text: 'submit',
handler : function(){
l(9)
}
}],
title : 'dfdf',
width:270,
height:300
});

样式：

div.global-membership-loginPanel-row {
margin-top: 10px;
}

div.global-membership-loginPanel-row span {
width: 60px;
display: block;
float: left;
clear: left;
color: red;
text-align: right;
padding: 3px;
}
input.global-membership-loginPanel-inputWaterMarkPic{
height: 18px;
width: 60px;
}
input.global-membership-loginPanel-inputStyle_1 {
height: 18px;
width: 120px;
}

转载自：http://www.iteye.com/topic/178064