extjs4中给字段加上单位的二个办法(behind text)
extjs4中，如某字段的单位是元，万元，或者公里在等，需要在textfield 后面显示这些字，
一个办法是用如下的方案
{ xtype: "fieldcontainer", layout: "column", width: 300, items: [ { xtype: "textfield", fieldLabel: "fieldLabel", width: 200 }, { xtype: "displayfield", value: "公里", width: 100 } ] }需要修改的类为 ： 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后面加上 ‘公里‘二个字