带验证码和单位的文本框

microboat

先上效果图：


 
源代码和说明：
 
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>