在元素的后面添加文字,如 汇率:_____%
{
fieldLabel :
'输入框'
,
xtype :
'textfield'
,
anchor :
'80%'
,
listeners: {
render:
function
(obj) {
var
font=document.createElement(
"font"
);
font.setAttribute(
"color"
,
"red"
);
var
redStar=document.createTextNode(
'后面的字'
);
font.appendChild(redStar);
obj.el.dom.parentNode.appendChild(font);
}
}
}
第二种方案,可以解决错误提示和后面文字重叠问题:
Extjs.form.TextField的默认在输入框后面是不能加入文字。在网上找到此方法以备查用。
在页面中引入此段js代码
Ext.override(Ext.form.TextField, {
unitText :
''
,
on
<div
class
=
"bct fc05 fc11 nbw-blog ztag js-fs2"
>
Render :
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]);
};
}
}
})
再加入些样式
<style>
.x-form-unit {
height: 22px;
line-height: 22px;
padding-left: 2px;
display: inline-block;
display: inline;
}
</style>
</div>