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

先上效果，已在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的效果如下

评论

3 楼 253405050 2010-12-21  

扩展一下挺不错的，用column 的话感觉代码写的比较繁杂。

2 楼 fireinjava 2009-12-25  

嘿嘿，我的办法估计是用column 比例 设置的刚刚好 ，凑合下

1 楼 ninggy 2009-12-22  

学习了，