文本输入框增加单位名称的方法-2010-1-13修正

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

原创最新推荐文章于 2023-12-01 17:12:58 发布 · 646 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #IE #Chrome #Firefox #CSS

ExtJS 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何通过重写 Ext.form.TextField 的 onRender 方法，在 ExtJS 中为文本框后添加单位名称，实现自定义单元格的功能，并调整了文本框宽度及错误提示图标位置。

先上效果，已在Firefox3.5、IE7、Chrome3中测试正常

完整应用和代码请转到 http://www.iteye.com/topic/553020

想达到这个效果，可惜ExtJS本身不支持，那么我们就来扩展吧

// 重写Ext.form.TextField的onRender方法以支持文本框后输入单位名称
Ext.override(Ext.form.TextField, {
      unitText : '',
      onRender : function(ct, position) {
        Ext.form.TextField.superclass.onRender.call(this, ct, position);
        // 如果单位字符串已定义 则在后方增加单位对象
        if (this.unitText != '') {
          this.unitEl = ct.createChild({
                tag : 'font',
                html : this.unitText
              });
          this.unitEl.addClass('x-form-unit');
          // 如果当前width存在（当定义为自动宽度或百分比时width不存在）则增加单位名称的同时 按单位名称大小减少文本框的长度
          if (typeof(this.width) != 'undefined' && this.width > 0) {
            this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);
          }
          // 同时修改错误提示图标的位置
          this.alignErrorIcon = function() {
            this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]);
          };
        }
      }
    })

同时要在css文件中增加

.x-form-unit {
	height: 22px;
	line-height: 22px;
	padding-left: 2px;
	display: inline-block;
	display: inline;
}

.x-form-field-wrap {
	float: left;
}

这里要说明一下：IE的BUG，如果只有

display: inline-block;

可惜只能在Firefox和Chrome浏览器，IE里面就成这样了

所以必须是

	display: inline-block;
	display: inline;

注意事项：在实际使用中发现ExtJS中还有一些其他控件是继承了textfield，例如combo，目前使用的情况是在combo中能正常显示单位，其他的控件就没有一一测试。

combo的效果如下