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

验证图片客户端控制类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