microboat 发表于 2013-2-7 22:17:39

带验证码和单位的文本框

先上效果图:

http://www.agoit.com/upload/attachment/75400/90fe6722-d062-335f-a04c-fc4cdc977ab9.jpg
 
源代码和说明:
 
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',);    }});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',);    },      /*加载验证码图片方法,加上随机数参数让图片刷新*/    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> 
页: [1]
查看完整版本: 带验证码和单位的文本框