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