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

Ответ 1

У меня есть немного более короткое решение. Я предлагаю использовать событие формы beforeadd следующим образом:

Ext.define('Ext.ux.form', {
    extend: 'Ext.form.Panel',
    initComponent: function() {
      this.on('beforeadd', function(me, field){
        if (!field.allowBlank)
          field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
      });
      this.callParent(arguments);
    }
});

Вот демонстрация

Ответ 2

Вы все же можете переопределить компонент макета, подобный элементу extjs3, если у вас нет поля fieldLayout, я превысил Ext.layout.Layout. Это очень похоже на решение молекулы человека, но оно более общее. Работа с полями, используемыми в других контейнерах, чем формы.

Ext.override(Ext.layout.Layout, {
    renderItem: function(item, target, position) {
      if (item && !item.rendered && item.isFieldLabelable && item.fieldLabel && item.allowBlank == false) {
        item.fieldLabel += ' <span class="req" style="color:red">*</span>';
      }
      this.callOverridden(arguments);
    }
});

Это проще, чем ваше решение, но не обязательно лучше, например, также используется в полях здесь

Ответ 3

Вы также можете переопределить и расширить ничего и просто создать действие контроллера следующим образом:

Ext.define('MyApp.controller.MyForm', {
    extend: 'Ext.app.Controller',

    markMandatoryFields: function(field, options) {
        if (field && field.isFieldLabelable && field.fieldLabel && field.allowBlank == false) {
            field.fieldLabel += ' <span class="req" style="color:red">*</span>';
        }
    },

    init: function() {
        this.control({
            "field": {
                beforerender: this.markMandatoryFields
            }
        });
    }
});

Ответ 4

Для Ext JS 4.1.1 это работает:

Ext.define('com.ideas.widgets.Base', {
    override : 'Ext.form.field.Base',
    initComponent : function()
    {
        if(this.allowBlank!==undefined && !this.allowBlank)
        {
            if(!this.labelSeparator)
            {
                this.labelSeparator = "";
            }
            this.labelSeparator += '<span style="color:red">*</span>';
        }
        this.callParent(arguments);
    }
});

Ответ 5

Extjs 4.1

Если в поле используется поле fieldLabel:

fieldLabel: 'Name',
allowBlank: false,    
afterLabelTextTpl: "<span style="color:red;font-weight:bold" data-qtip="Required">*</span>"

Если в поле нет поляLabel, используйте комбинацию параметров конфигурации, config hideLabel должен быть false:

//hideLabel: false
name: 'lastName',
emptyText: "Last Name",
allowBlank: false,    
labelWidth: 0,
fieldLabel: '',
hideEmptyLabel: false,
afterLabelTextTpl: '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'

Кроме того, вы можете смешивать это решение с плагином Drasill и иметь простой способ настроить все поля одновременно.

Ответ 6

Подход, который вы можете найти более элегантным, заключается в добавлении класса css к любому метку поля, который помечен allowBlank=false и стиль вашего обязательного индикатора в CSS.

Ext.define('Ext.ux.form', {

    extend: 'Ext.form.Panel',

    listeners: {
        'beforeadd': function(){
            if (!field.allowBlank) {
                field.labelClsExtra = 'x-required';
            }
        }
    }

});

Затем вы можете создать метку поля в CSS с помощью утилиты :after pseudo:

.x-required:after {
    content: ' *';
    color: red;
    font-weight: bold;
}

Ответ 7

Я сделал плагин для этого.

Работает с этим ExtJS 4.1 (по крайней мере).

Используйте, если:

Ext.create('Ext.form.Panel', {
  ...
  plugins : "formlabelrequired"
  ...
});

Или, чтобы настроить "звездочку":

Ext.create('Ext.form.Panel', {
  ...
  plugins : [{ptype:"formlabelrequired", asterisk:" (mandatory)"}]
  ...
});

Вот код для плагина:

/**
 * Plugin (ptype = 'formlabelrequired') that adds "asterisk" to labels
 * for Fields with "allowBlank: false".
 */
Ext.define('Ext.ux.plugin.form.LabelRequired', {

        extend: 'Ext.AbstractPlugin',

        alias: 'plugin.formlabelrequired',

        asterisk: ' <span class="required"> *</span>',

        constructor: function() {

            this.callParent(arguments);

        },

        init: function(formPanel) {
            formPanel.on('beforerender', this.onBeforeRender, this);
        },

        /**
         * @private
         * Adds asterisk to labels.
         */
        onBeforeRender: function(formPanel) {

            var i, len, items;

            items = formPanel.query('[allowBlank=false]');

            for (i = 0, len = items.length; i < len; i++) {
                item = items[i];
                item.afterLabelTextTpl = (item.afterLabelTextTpl || "") + this.asterisk;
            }

            return true;

        }

    });

Ответ 8

На самом деле, я думаю, используя fieldSubTpl и/или labelableRenderTpl, чтобы добавить *, - это более чистый подход, чем использование прослушивателя событий. События могут быть остановлены, слушатели могут быть отсоединены.

Я думаю, что проблема OP (Lionel Chan) заключалась в том, что использование Ext.override является своего рода хаккой, и он на 100% прав. Но если мы передаем пользовательский tpl на уровне конфигурации формы, это не так уж плохо:

Ext.create('Ext.form.Panel',{
    defaults:{
        fieldSubTpl:['<input id="{id}" type="{type}" ', 
        '<tpl if="name">name="{name}" </tpl>', 
        '<tpl if="size">size="{size}" </tpl>', 
        '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 
        'class="{fieldCls} {typeCls}" autocomplete="off" />',
        '<span>',
        '<tpl if="allowBlank==false">*</tpl>',
        '</span>',
        {
            compiled: true, 
            disableFormats: true
    }]},
    items : [{
        xtype : 'textfield',.....

В tpl может быть что-то не так, я не пробовал.

Ответ 9

Если вы не хотите переопределять что-либо, поместите звездочку в labelSeparator:

{
  xtype: 'textfield',
  fieldLabel: 'Name',
  name: 'requestor_name',
  allowBlank: false,
  labelSeparator : ': <span style="color:red">*</span>'
}

Ответ 10

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

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

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
});

Ответ 11

Их так много способов сделать это, и немногие из которых вы можете найти выше, что я предлагаю:

 {
    xtype : 'label',
    html:'<span>First Name</span><span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>',
    width:50,
 }

Просто вы можете поместить оба символа звездочки и ярлыка в одно свойство html.