ExtJS 4 - пометьте красную звездочку в обязательном поле - PullRequest
Новая
       59

ExtJS 4 - пометьте красную звездочку в обязательном поле

23 голосов
/ 31 октября 2011

У меня есть проблема, когда мне нужно добавить красную звездочку рядом с fieldLabel, когда поле помечено как «обязательное» (или allowBlank: false)

В ExtJS3 мы можем легко получить этот хак, переопределив Ext.layout.FormLayout следующим образом: 

Ext.override(Ext.layout.FormLayout, {
    getTemplateArgs: function(field) {
        var noLabelSep = !field.fieldLabel || field.hideLabel;
        var labelSep = (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator);
        if (!field.allowBlank) labelSep += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
        return {
            id: field.id,
            label: field.fieldLabel,
            labelStyle: field.labelStyle||this.labelStyle||'',
            elementStyle: this.elementStyle||'',
            labelSeparator: noLabelSep ? '' : labelSep,
            itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
            clearCls: field.clearCls || 'x-form-clear-left'
        };
    }
});

Но это невозможно в ExtJS4. FormLayout больше не применяется, и метки фактически отображаются с помощью Ext.form.field.Base с использованием миксинов, называемых Ext.form.Labelable.

К сожалению, ни расширение Ext.form.Labelable, ни переопределение Ext.form.Labelable не работает для меня. Расширенные компоненты из Ext.form.field.Base не получают никакого эффекта от него. Даже если я поменяю местами миксины, шаблоны все равно не будут работать.

Итак, вот мое решение, где я сделал очень резкое переопределение над Ext.form.field.Base, и оно работает следующим образом ( Посмотрите мой пример )

Это только для ExtJS 4.0.7. Чтобы использовать его в ExtJS 4.0.2a, вам нужно изменить labelableRenderTpl в соответствии с тем, который найден в 4.0.2a /src/form/Labelable.js

(function() {

    var overrides =  {
        labelableRenderTpl: [
            '<tpl if="!hideLabel && !(!fieldLabel && hideEmptyLabel)">',
                '<label id="{id}-labelEl"<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
                    '<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
                    '<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
                    '<tpl if="!allowBlank"><span style="color:red">*</span></tpl>',
                '</label>',
            '</tpl>',
            '<div class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" role="presentation">{subTplMarkup}</div>',
            '<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none"></div>',
            '<div class="{clearCls}" role="presentation"><!-- --></div>',
            {
                compiled: true,
                disableFormats: true
            }
        ],

        /**
         * @protected
         * Generates the arguments for the field decorations {@link #labelableRenderTpl rendering template}.
         * @return {Object} The template arguments
         */
        getLabelableRenderData: function() {
            var me = this,
                labelAlign = me.labelAlign,
                labelCls = me.labelCls,
                labelClsExtra = me.labelClsExtra,
                labelPad = me.labelPad,
                labelStyle;

            // Calculate label styles up front rather than in the Field layout for speed; this
            // is safe because label alignment/width/pad are not expected to change.
            if (labelAlign === 'top') {
                labelStyle = 'margin-bottom:' + labelPad + 'px;';
            } else {
                labelStyle = 'margin-right:' + labelPad + 'px;';
                // Add the width for border-box browsers; will be set by the Field layout for content-box
                if (Ext.isBorderBox) {
                    labelStyle += 'width:' + me.labelWidth + 'px;';
                }
            }

            return Ext.copyTo(
                {
                    inputId: me.getInputId(),
                    fieldLabel: me.getFieldLabel(),
                    labelCls: labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls,
                    labelStyle: labelStyle + (me.labelStyle || ''),
                    subTplMarkup: me.getSubTplMarkup(),
                    allowBlank: me.allowBlank
                },
                me,
                'hideLabel,hideEmptyLabel,fieldBodyCls,baseBodyCls,errorMsgCls,clearCls,labelSeparator',
                true
            );
        }
    };


    //Both field.Base and FieldContainer are affected, so need to cater for.
    Ext.override(Ext.form.field.Base, overrides);
    Ext.override(Ext.form.FieldContainer, overrides);


})();

Итак, у меня есть хорошая звездочка, добавленная во все обязательные поля.

Вопрос в том, есть ли более простой способ добиться чего-то подобного? Переопределение довольно резкое, лучше всего, если мы можем использовать миксины, но миксины не могут переопределить поведение

Примечание

Причина этого заключается в том, что у меня есть настраиваемые поля, которые необходимо расширить от базы Text, Combo, FieldContainer. Миксины в расширенном поле даже не связываются с шаблоном . Они просто слишком упрямы. Возможно, лучший способ на данный момент - переопределить базовый класс ... Проверьте рабочий пример

Ответы [ 11 ]

0 голосов
/ 18 июня 2014

Если вы хотите, чтобы красный * отображался для метки поля, мы можем использовать fieldlabel, который делает это.

Например, приведенный ниже код создает новое текстовое поле с именем метки «Имя» и отображается красная звездочка 

var name = new Ext.form.TextField({
    fieldLabel : 'Label<span style=\"color:red;\" ext:qtip=\"This field is required\"> *</span>',
    name : 'name',
    id: 'Name',
    maxLength : 40,
    width : 205,
    allowBlank : false
});
Страница:
...