uas-platform/frontend/uas-web/overrides/form/field/Base.js

Ext.define('uas.override.form.field.Base', {
    override: 'Ext.form.field.Base',

    labelSeparator: '',
    labelAlign: 'right',
    // 支持labelclick事件
    enableLabelClick: false,
    labelClickCls: Ext.baseCSSPrefix + 'form-item-label-click',

    /**
     * @cfg {String/String[]/Ext.XTemplate} labelableRenderTpl
     * The rendering template for the field decorations. Component classes using this mixin
     * should include logic to use this as their {@link Ext.Component#renderTpl renderTpl},
     * and implement the {@link #getSubTplMarkup} method to generate the field body content.
     * @private
     */
    labelableRenderTpl: [
        '{beforeLabelTpl}',
        '<label id="{id}-labelEl" data-ref="labelEl" class="{labelCls} {labelCls}-{ui} {labelClsExtra} ',
        '<tpl if="enableLabelClick">{labelClickCls} </tpl>',
        '{childElCls} {unselectableCls}" style="{labelStyle}"',
        '<tpl if="inputId && !skipLabelForAttribute"> for="{inputId}"</tpl>',
        ' {labelAttrTpl}>',
        '<span class="{labelInnerCls} {labelInnerCls}-{ui}" style="{labelInnerStyle}">',
        '{beforeLabelTextTpl}',
        '<span id="{id}-labelTextEl" data-ref="labelTextEl" class="{labelTextCls}">',
        '<tpl if="fieldLabel">{fieldLabel}',
        '<tpl if="labelSeparator">{labelSeparator}</tpl>',
        '</tpl>',
        '</span>',
        '{afterLabelTextTpl}',
        '</span>',
        '</label>',
        '{afterLabelTpl}',
        '<div id="{id}-bodyEl" data-ref="bodyEl" role="presentation"',
        ' class="{baseBodyCls} {baseBodyCls}-{ui}<tpl if="fieldBodyCls">',
        ' {fieldBodyCls} {fieldBodyCls}-{ui}</tpl> {growCls} {extraFieldBodyCls}"',
        '<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
        '{beforeBodyEl}',
        '{beforeSubTpl}',
        '{[values.$comp.getSubTplMarkup(values)]}',
        '{afterSubTpl}',
        '{afterBodyEl}',
        // ARIA elements serve different purposes:
        // - ariaHelpEl may contain optional hints about the field, such as
        //   expected format. This text is static and usually does not change
        //   once rendered. It is also optional.
        // - ariaStatusEl is used to convey status of the field. Validation errors
        //   are rendered here, as well as other information that might be helpful
        //   to Assistive Technology users exploring the app in browse mode.
        // - ariaErrorEl is used for announcing dynamic changes in the field state,
        //   so that AT users receive updates while in forms mode.
        //
        // Both ariaHelpEl and ariaStatusEl are referenced by the field's input element
        // via aria-describedby.
        '<tpl if="renderAriaElements">',
        '<tpl if="ariaHelp">',
        '<span id="{id}-ariaHelpEl" data-ref="ariaHelpEl"',
        ' class="' + Ext.baseCSSPrefix + 'hidden-offsets">',
        '{ariaHelp}',
        '</span>',
        '</tpl>',
        '<span id="{id}-ariaStatusEl" data-ref="ariaStatusEl" aria-hidden="true"',
        ' class="' + Ext.baseCSSPrefix + 'hidden-offsets">',
        '{ariaStatus}',
        '</span>',
        '<span id="{id}-ariaErrorEl" data-ref="ariaErrorEl" aria-hidden="true" aria-live="assertive"',
        ' class="' + Ext.baseCSSPrefix + 'hidden-clip">',
        '</span>',
        '</tpl>',
        '</div>',
        '<tpl if="renderError">',
        '<div id="{id}-errorWrapEl" data-ref="errorWrapEl" class="{errorWrapCls} {errorWrapCls}-{ui}',
        ' {errorWrapExtraCls}" style="{errorWrapStyle}">',
        '<div role="presentation" id="{id}-errorEl" data-ref="errorEl" ',
        'class="{errorMsgCls} {invalidMsgCls} {invalidMsgCls}-{ui}" ',
        'data-anchorTarget="{tipAnchorTarget}">',
        '</div>',
        '</div>',
        '</tpl>',
        {
            disableFormats: true
        }
    ],

    getLabelableRenderData: function() {
        var me = this,
            labelAlign = me.labelAlign,
            topLabel = (labelAlign === 'top'),
            rightLabel = (labelAlign === 'right'),
            sideError = (me.msgTarget === 'side'),
            underError = (me.msgTarget === 'under'),
            errorMsgCls = me.errorMsgCls,
            labelPad = me.labelPad,
            labelWidth = me.labelWidth,
            labelClsExtra = me.labelClsExtra || '',
            errorWrapExtraCls = sideError ? me.errorWrapSideCls : me.errorWrapUnderCls,
            labelStyle = '',
            labelInnerStyle = '',
            labelVisible = me.hasVisibleLabel(),
            autoFitErrors = me.autoFitErrors,
            defaultBodyWidth = me.defaultBodyWidth,
            bodyStyle, data;
        if (topLabel) {
            labelClsExtra += ' ' + me.topLabelCls;
            if (labelPad) {
                labelInnerStyle = 'padding-bottom:' + labelPad + 'px;';
            }
            if (sideError && !autoFitErrors) {
                labelClsExtra += ' ' + me.topLabelSideErrorCls;
            }
        } else {
            if (rightLabel) {
                labelClsExtra += ' ' + me.rightLabelCls;
            }
            if (labelPad) {
                labelStyle += me.getHorizontalPaddingStyle() + labelPad + 'px;';
            }
            labelStyle += 'width:' + (labelWidth + (labelPad ? labelPad : 0)) + 'px;';
            // inner label needs width as well so that setting width on the outside
            // that is smaller than the natural width, will be ensured to take width
            // away from the body, and not the label.
            labelInnerStyle = 'width:' + labelWidth + 'px';
        }
        if (labelVisible) {
            if (!topLabel && underError) {
                errorWrapExtraCls += ' ' + me.errorWrapUnderSideLabelCls;
            }
        }
        if (defaultBodyWidth) {
            // This is here to support textfield's deprecated "size" config
            bodyStyle = 'min-width:' + defaultBodyWidth + 'px;max-width:' + defaultBodyWidth + 'px;';
        }
        data = {
            id: me.id,
            inputId: me.getInputId(),
            labelCls: me.labelCls,
            labelClsExtra: labelClsExtra,
            labelStyle: labelStyle + (me.labelStyle || ''),
            labelInnerStyle: labelInnerStyle,
            labelInnerCls: me.labelInnerCls,
            labelTextCls: me.labelTextCls,
            skipLabelForAttribute: !!me.skipLabelForAttribute,
            unselectableCls: Ext.Element.unselectableCls,
            bodyStyle: bodyStyle,
            baseBodyCls: me.baseBodyCls,
            fieldBodyCls: me.fieldBodyCls,
            extraFieldBodyCls: me.extraFieldBodyCls,
            errorWrapCls: me.errorWrapCls,
            errorWrapExtraCls: errorWrapExtraCls,
            renderError: sideError || underError,
            invalidMsgCls: sideError ? me.invalidIconCls : underError ? me.invalidUnderCls : '',
            errorMsgCls: errorMsgCls,
            growCls: me.grow ? me.growCls : '',
            tipAnchorTarget: me.id + '-inputEl',
            errorWrapStyle: (sideError && !autoFitErrors) ? 'visibility:hidden' : 'display:none',
            fieldLabel: me.getFieldLabel(),
            labelSeparator: me.labelSeparator,
            renderAriaElements: !!me.renderAriaElements,
            ariaStatus: '',
            enableLabelClick: !!me.enableLabelClick,
            labelClickCls: me.labelClickCls
        };
        if (me.ariaHelp) {
            data.ariaHelp = Ext.String.htmlEncode(me.ariaHelp);
        }
        me.getInsertionRenderData(data, me.labelableInsertions);
        return data;
    },

    onLabelClick: function(e, eOpts) {
        this.fireEvent('labelclick', this, e, eOpts);
    },

    constructor: function(config) {
        var me = this;
        if (config && config.bind) {
            var fieldName = config.bind.match(/\{(.*)\}/)[1];
            if (!config.name) {
                config.name = fieldName;
            }
            if (!config.itemId) {
                config.itemId = fieldName.replace(/\./g, "_");
            }
        }
        me.callParent(arguments);
    },

    initEvents: function() {
        var me = this,
            labelEl = me.labelEl,
            inputEl = me.inputEl,
            onFieldMutation = me.onFieldMutation,
            events = me.checkChangeEvents,
            len = events.length,
            i, event;
        if (labelEl && me.enableLabelClick) {
            me.mon(labelEl, 'mousedown', me.onLabelClick, me);
        }
        if (inputEl) {
            me.mon(inputEl, Ext.supports.SpecialKeyDownRepeat ? 'keydown' : 'keypress', me.fireKey, me);
            for (i = 0; i < len; ++i) {
                event = events[i];
                if (event === 'propertychange') {
                    me.usesPropertychange = true;
                }
                if (event === 'textInput') {
                    me.usesTextInput = true;
                }
                me.mon(inputEl, event, onFieldMutation, me);
            }
        }
        me.callParent();
    }
});