extjs4中,如某字段的单位是元,万元,或者公里在等,需要在textfield 后面显示这些字,
一个办法是用如下的方案
{
xtype: "fieldcontainer",
layout: "column",
width: 300,
items: [
{
xtype: "textfield",
fieldLabel: "fieldLabel",
width: 200
},
{
xtype: "displayfield",
value: "公里",
width: 100
}
]
}
由于extjs 的 form 中的 fieldset ,fieldcontainer 生成的dom 层次太复杂,字段一多,在ie 里面会非常的慢,因此我看了一下extjs 的源码,直接把单位加在 textfield 的后面,省去一个container的层。
需要修改的类为 : Ext.form.Labelable,
一共修改二处,
修改好了以后 这样定义: {xtype : 'textfield',
behindText : '公里' } ,即可自动在textfield后面加上 ‘公里‘二个字
第一处:在labelableRenderTpl中加入三行,后面有标记
labelableRenderTpl: [
'<tr role="presentation" id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl> class="{inputRowCls}">',
'<tpl if="labelOnLeft">',
'<td role="presentation" id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>',
'{beforeLabelTpl}',
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>',
' unselectable="on"',
'>',
'{beforeLabelTextTpl}',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'{afterLabelTextTpl}',
'</label>',
'{afterLabelTpl}',
'</td>',
'</tpl>',
'<td role="presentation" class="{baseBodyCls} {fieldBodyCls} {extraFieldBodyCls}" id="{id}-bodyEl" colspan="{bodyColspan}" role="presentation">',
'{beforeBodyEl}',
'<tpl if="labelAlign==\'top\'">',
'{beforeLabelTpl}',
'<div role="presentation" id="{id}-labelCell" style="{labelCellStyle}">',
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>',
' unselectable="on"',
'>',
'{beforeLabelTextTpl}',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'{afterLabelTextTpl}',
'</label>',
'</div>',
'{afterLabelTpl}',
'</tpl>',
'{beforeSubTpl}',
'{[values.$comp.getSubTplMarkup(values)]}',
'{afterSubTpl}',
'<tpl if="behindText">', //加进去的 jfok
'<td width="40">{behindText}</td>', //加进去的 jfok
'</tpl>', //加进去的 jfok
'<tpl if="msgTarget===\'side\'">',
'{afterBodyEl}',
'</td>',
'<td role="presentation" id="{id}-sideErrorCell" vAlign="{[values.labelAlign===\'top\' && !values.hideLabel ? \'bottom\' : \'middle\']}" style="{[values.autoFitErrors ? \'display:none\' : \'\']}" width="{errorIconWidth}">',
'<div role="presentation" id="{id}-errorEl" class="{errorMsgCls}" style="display:none"></div>',
'</td>',
'<tpl elseif="msgTarget==\'under\'">',
'<div role="presentation" id="{id}-errorEl" class="{errorMsgClass}" colspan="2" style="display:none"></div>',
'{afterBodyEl}',
'</td>',
'</tpl>',
'</tr>',
{
disableFormats: true
}
],
第二处 修改类函数getLabelableRenderData ,在里面加入一行
getLabelableRenderData: function() {
var me = this,
data,
tempEl,
topLabel = me.labelAlign === 'top';
if (!Ext.form.Labelable.errorIconWidth) {
tempEl = Ext.getBody().createChild({style: 'position:absolute', cls: Ext.baseCSSPrefix + 'form-invalid-icon'});
Ext.form.Labelable.errorIconWidth = tempEl.getWidth() + tempEl.getMargin('l');
tempEl.remove();
}
data = Ext.copyTo({
inFormLayout : me.ownerLayout && me.ownerLayout.type === 'form',
inputId : me.getInputId(),
labelOnLeft : !topLabel,
hideLabel : !me.hasVisibleLabel(),
fieldLabel : me.getFieldLabel(),
labelCellStyle : me.getLabelCellStyle(),
labelCellAttrs : me.getLabelCellAttrs(),
labelCls : me.getLabelCls(),
labelStyle : me.getLabelStyle(),
bodyColspan : me.getBodyColspan(),
externalError : !me.autoFitErrors,
errorMsgCls : me.getErrorMsgCls(),
errorIconWidth : Ext.form.Labelable.errorIconWidth,
behindText : me.behindText //加进去的 jfok
},
me, me.labelableRenderProps, true);
me.getInsertionRenderData(data, me.labelableInsertions);
return data;
},
修改好了以后 这样定义: {xtype : 'textfield',
behindText : '公里' } ,即可自动在textfield后面加上 ‘公里‘二个字