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

    extjs4中,如某字段的单位是元,万元,或者公里在等,需要在textfield 后面显示这些字,

extjs4中给字段加上单位的二个办法(behind text)_第1张图片


一个办法是用如下的方案

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




你可能感兴趣的:(extjs4中给字段加上单位的二个办法(behind text))