带单位、验证码文本框

最新推荐文章于 2023-12-01 17:12:58 发布

neekerss

最新推荐文章于 2023-12-01 17:12:58 发布

阅读量959

点赞数

分类专栏： EXT JS 文章标签： function autoload image url html

本文链接：https://blog.csdn.net/neekerss/article/details/5577589

版权

EXT JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 //带单位的文本框
UnitField = Ext.extend(Ext.form.TextField, {
    /*单位说明文字*/
    unitText: '',
    onRender: function(ct, position) {
        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', UnitField);

2 //验证码文本框
CodeField = Ext.extend(Ext.form.TextField, {
    /*获取验证码图片的后台Url*/
    codeUrl: Ext.BLANK_IMAGE_URL,
    /*是否自动加载验证码图片*/
    autoLoad: true,
    onRender: function(ct, position) {
        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', CodeField);

3 使用示例

items:[{xtype:'codefield',fieldLabel: '验证码',width:60,allowBlank:false,codeUrl:'http://localhost/cgi/getCheckCode.ashx'},
{xtype:'unitfield',fieldLabel: '库存数量', unitText:'吨', width:60,allowBlank: false}]