ExtJS 4-marquer un astérisque rouge sur un champ obligatoire

Vous pouvez toujours remplacer le composant de mise en page similaire à extjs3 Bun étant donné qu'il n'y a pas fieldLayout, j'ai remplacé Ext.layout.Layout. C'est assez similaire à la solution de molecule man, mais c'est plus général. Travailler pour les champs utilisés dans d'autres conteneurs que les formulaires.

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

C'est plus simple que votre solution mais pas nécessairement mieux, se exemple également utilisé dans fieldsets ici

Vous pouvez également remplacer et étendre rien et simplement créer une action de contrôleur comme ceci:

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

Pour Ext JS 4.1.1 cela fonctionne:

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

Extjs 4.1

Lorsque le champ a une étiquette de champ, utilisez:

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

Si le champ n'a pas de fieldLabel, utilisez une combinaison d'options de configuration, la configuration hideLabel doit être 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>'

En outre, vous pouvez mélanger cette solution avec le plugin Drasill et avoir un moyen facile de personnaliser tous les champs à la fois.

Une approche que vous pourriez trouver plus élégante consiste à ajouter une classe css à toute étiquette de champ marquée par allowBlank=false et à styliser votre indicateur obligatoire en CSS.

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

    extend: 'Ext.form.Panel',

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

});

Vous pouvez ensuite styliser votre étiquette de champ en CSS avec un pseudo utilitaire :after:

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

J'ai fait un plugin pour cela.

Fonctionne avec ExtJS 4.1 (au moins).

Utilisez si comme ceci:

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

Ou, pour personnaliser l '"astérisque":

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

Voici le code du plugin:

/**
 * 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;

        }

    });

En fait, je pense que l'utilisation de fieldSubTpl et / ou labelableRenderTpl pour ajouter le * est une approche plus propre que l'utilisation de l'écouteur d'événement. Les événements peuvent être arrêtés, les auditeurs peuvent être détachées.

Je pense que la préoccupation de L'OP(Lionel Chan)était que l'utilisation de L'Ext.override est un peu hacky et il a raison à 100%. Mais si nous passons le tpl personnalisé au niveau de la configuration du formulaire, ce n'est pas si mal:

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',.....

Il pourrait y avoir quelque chose de mal avec le tpl, Je n'ai pas essayé.

Si vous ne voulez rien remplacer, placez l'astérisque dans labelSeparator:

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

Si vous voulez que le rouge * soit affiché pour une étiquette de champ, nous pouvons utiliser fieldlabel qui le fait.

Par exemple le code ci-dessous crée un nouveau champ de texte avec le nom de l'étiquette "Nom" et astérisque rouge s'affiche

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

Ils sont tellement de façons de le faire et peu dont vous pouvez trouver ci-dessus, ce que je suggère est:

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

Vous pouvez simplement mettre à la fois un astérisque et un texte D'étiquette dans une seule propriété html.