extjs4中给字段加上单位的二个办法(behind text)

    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后面加上 ‘公里‘二个字