### ExtJs 文本框后附件单位
#### 背景介绍
在使用ExtJS进行界面开发的过程中，常常会遇到需要在文本框后面附加单位的情况。例如，在输入数量时需要显示“个”、“人”等单位。这样的设计不仅提高了用户体验，还使得数据的含义更加清晰明确。然而，默认情况下，ExtJS并未提供直接的支持来实现在文本框后添加单位的需求。本文将详细介绍两种解决方案，并给出具体的实现代码。
#### 解决方案一：重写文本框的实现方法
**步骤1：重写 `onRender` 方法**
我们需要重写 `Ext.form.TextField` 的 `onRender` 方法，以便能够在渲染文本框的同时添加单位。具体实现如下：
```javascript
// 重写 Ext.form.TextField 的 onRender 方法以支持在文本框后添加单位名称
Ext.override(Ext.form.TextField, {
unitText: '', // 单位文本
onRender: function (ct, position) {
// 调用父类的 onRender 方法
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]);
};
}
}
});
```
**步骤2：增加样式**
接下来，为了确保单位能够正确地显示并且与文本框对齐，我们需要添加一些CSS样式：
```css
.x-form-unit {
height: 22px;
line-height: 22px;
padding-left: 2px;
display: inline-block;
}
.x-form-field-wrap {
float: left;
}
```
以上步骤实现了第一种解决方案的核心部分，通过这种方式，我们可以在任何文本框后面轻松地添加单位。
#### 解决方案二：在父节点下创建子节点
第二种方法是通过在文本框的父节点下创建一个子节点来实现单位的显示。这种方法相对简单，但同样可以满足需求。实现代码如下：
```javascript
// 获取文本框元素的父节点
var fwzNumsBit = Ext.getDom("jpzxRecord.fwzNums").parentNode;
var peopleNumsBit = Ext.getDom("jpzxRecord.peopleNums").parentNode;
// 在父节点下创建子节点并设置单位
Ext.get(fwzNumsBit).createChild({
tag: 'span',
html: '<font color="blue">(个)</font>'
});
Ext.get(peopleNumsBit).createChild({
tag: 'span',
html: '<font color="blue">(人)</font>'
});
```
通过这种方式，我们可以为指定的文本框快速地添加单位，而无需重写组件的方法。
### 总结
本文详细介绍了如何在ExtJS开发过程中解决文本框后带单位的问题。通过两种不同的方法——重写组件方法以及直接在父节点下创建子节点，我们成功地实现了这一功能。这些技术不仅可以应用于文本框，还可以扩展到其他类似的场景。对于希望提高应用程序可用性和用户体验的开发者来说，这两种方法都是值得参考的有效手段。
