Extjs NumberField添加单位的实现方法

在ExtJS开发中，数字输入框后面直接显示单位（例如金额后加“元”、数量后加“个”）是常见需求，但官方组件并未直接提供该功能。如何实现？思路很简单：通过扩展TextField，在渲染时动态追加一个单位元素。下面详细分享具体实现方法。

首先，定义一个单位文本扩展类，保存为UnitText.js：

// 输入框textfield后面放字unitText定义:
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: 'div',
                html: this.unitText
            });
            this.unitEl.addClass('x-form-unit');
            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]);
            };
        }
    }
});

这段代码的核心在于重写onRender方法：在输入框渲染完成后，通过createChild动态创建一个包含单位文本的div，并为其添加样式类x-form-unit。同时，自动调整输入框宽度，减去单位占用的空间，避免布局错位。此外，错误图标（errorIcon）的对齐方式也被重新定位到单位元素上。

接下来，在JSP页面中引入这个JS文件，并补充对应的CSS样式：

样式设计很简单：让单位文本与输入框处于同一行，高度对齐，并保留少量内边距。注意这里使用了两个display声明——第一个inline-block是标准写法，第二个inline用于兼容某些旧版IE浏览器。

完成上述准备后，使用时只需在NumberField配置中添加unitText属性即可：

var jine = new Ext.form.NumberField({
    id: 'je',
    fieldLabel: '金额',
    allowDecimals: true, // 允许小数点
    allowNegative: false, // 允许负数
    width: 100,
    style: 'text-align:right',
    unitText: ' 元'
});

实际效果是：金额输入框后自动显示“元”字，输入的数字右对齐，整个组件看起来非常自然。当然，你也可以将单位换成“个”“人”“件”等任意文本，甚至保留一个空格以提升视觉舒适度。

这个思路不仅适用于NumberField，所有继承自TextField的组件都可以直接使用。如果需要更灵活的单位展示（例如带图标的单位），也可以在此基础上继续扩展。希望这个小技巧能对你有所帮助。