Comment faire pour afficher les valeurs en majuscule et en ExtJs textfield sans montrer de l'utilisateur de lettre de transition de la baisse des majuscules?

Nous sommes en création d'une application à l'aide de ExtJS 4 qui a une exigence que l'entrée dans une forme de champ de texte doit toujours être en MAJUSCULE.

Pour cela, j'ai trouvé que je peux appeler une fonction sur événement de changement et de convertir la valeur actuelle de majuscules et de le définir de la manière suivante:

change: function(field, newValue){
   field.setValue(newValue.toUpperCase());
}

Ce que ce n'est que si un utilisateur entre une lettre en minuscule, alors il le convertit en majuscule et le remet dans le domaine. Pendant ce temps, il y a une légère transition affiché à l'utilisateur de l'inférieur au supérieur de cas. Autrement dit, l'utilisateur est en mesure de voir la lettre en minuscule et après une milliseconde peut-être, la lettre devient majuscules.

La question est: Est-il un moyen pour éviter cette "transition/transformation" de l'inférieur au supérieur de cas et de montrer les lettres en majuscules directement à l'utilisateur dès qu'il tape quelque chose?

J'ai essayé d'utiliser style=text-transform:uppercase - mais pas de chance.

Toute aide serait vraiment appréciée.

Merci d'avance.

OriginalL'auteur netemp | 2011-08-31

8

J'ai essayé d'utiliser style=text-transform:uppercase - mais pas de chance.

Vous devriez avoir utilisé fieldStyle à la place. Voici la démo.

Cheers!

D'accord 🙂 juste pensé à elle aussi. Mais merci pour la réponse.

OriginalL'auteur Molecular Man

La réponse donnée ne fonctionne que pour l'AFFICHAGE du texte en majuscules, mais la valeur reste la même. J'ai étendu le champ de texte pour remplacer le getValue() permet de retourner la valeur de majuscules, pas uniquement pour l'affichage, avec une option de config drapeau:

Ext.define('Dev.ux.UpperTextField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.uppertextfield',

    //configuration
    config: {
        uppercaseValue: true //defaults to true
    },

    constructor: function (config) {
        this.initConfig(config);
        this.callParent([config]);
    },

    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            fieldStyle: 'text-transform:uppercase',
        });

        me.callParent();
    },

    //overriden function
    getValue: function () {
        var val = this.callParent();
        return this.getUppercaseValue() ? val.toUpperCase() : val;
    }
});

Alors je peux ajouter facilement plusieurs objets textfield à un formulaire:

{
     xtype: 'uppertextfield',
     uppercaseValue: false, //custom cfg available (default is true)
     name: 'Descricao',
     fieldLabel: 'Nome da Cidade',
     allowBlank: false,
     enforceMaxLength: true,
     maxLength: 80
},

Travaille en EXT 4.2.1.

Cela devrait être la bonne solution.

OriginalL'auteur Jone Polvora

Vous pouvez le faire avec un plugin.

{
    xtype: 'textfield',
    plugins: ['uppertextfield']
}

À l'aide de ce que le plugin dans ExtJS 4.2.1

Ext.define('App.plugin.UpperTextField', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.uppertextfield',

    init: function (cmp) {
        Ext.apply(cmp, {
            fieldStyle: (cmp.fieldStyle ? cmp.fieldStyle + ';' : '') + 'text-transform:uppercase',
            getValue: function() {
                var val = cmp.__proto__.getValue.apply(cmp, arguments);
                return val && val.toUpperCase ? val.toUpperCase() : val;
            }
        });
    }
});

Inspiré par: https://www.sencha.com/forum/showthread.php?94599-Uppercase-TextField-plugin&p=522068&viewfull=1#post522068

PS: j'ai dû appeler getValue sur le prototype. Si je l'aurais appelé getValue sur le cmp il serait récursivement continuer à le faire et ne jamais quitter. Je suis ouvert aux suggestions sur la façon de changer le composant de la méthode getValue par le plugin.

OriginalL'auteur Christiaan Westerbeek

Il Travaille pour ExtJS 4.2

Si vous souhaitez uniquement en majuscules d'entrée pour votre champ de texte, puis étendre la base de champ de texte pour modifier le champ style de majuscules et aussi attacher un écouteur pour mettre à jour la valeur brute à tout changement de texte en majuscules.

//définition d'un nouveau champ texte personnalisé

Ext.define('IN.view.item.UpperCaseTextField', {
    extend: 'Ext.form.field.Text',
    alias : 'widget.myUpperCaseTextField',
    fieldStyle: {
        textTransform: "uppercase"
    },
    initComponent: function() {
        this.callParent(arguments);
    },
    listeners: {
        change: function (obj, newValue) {
            console.log(newValue);
            obj.setRawValue(newValue.toUpperCase());
        }
     }
});

//utiliser le nouveau champ texte personnalisé dans votre définition de la vue à l'aide de l'alias

xtype: 'form',
 items: [
  {
   xtype: 'myUpperCaseTextField',
   itemId: 'itemNumber',
   name : 'item',
   allowBlank: false,
   msgTarget: 'side',
   fieldLabel: 'Item Number',
   size: 11,
   maxLength: 10
  },


 ]

Essayer de mettre du texte dans ce champ, puis définissez signe le début de l'entrée et essayez d'ajouter un peu de texte, vous serez surpris.

OriginalL'auteur chanchal sakarde

Vous devez vous connecter pour publier un commentaire.