带验证码和单位的文本框

先上效果图：

 

源代码和说明：

 

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>