Как отображать значения в верхнем регистре в текстовом поле ExtJs, не показывая переход буквы пользователя из нижнего в верхний регистр?

Question

Мы создаем приложение с использованием ExtJS 4, которое требует, чтобы запись в текстовом поле формы всегда была в UPPERCASE.

Для этого я обнаружил, что могу вызвать функцию при событии изменения и преобразоватьтекущее значение в верхнем регистре и установить его обратно в поле следующим образом:

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

Это означает, что если пользователь вводит букву в нижнем регистре, он преобразует ее в верхний регистр и помещает обратно вполе.При этом пользователю отображается небольшой переход от нижнего к верхнему регистру.То есть пользователь может видеть букву в нижнем регистре, а через миллисекунду буква становится заглавной.

Вопрос в следующем: есть ли способ избежать этого «перехода / преобразования»?'из нижнего в верхний регистр и показывать буквы в верхнем регистре непосредственно пользователю, как только он что-то печатает?

Я пытался использовать - style = text-transform: uppercase - но не повезло.

Любая помощь будет очень признательна.

Заранее спасибо.

Answer 1

Я пытался использовать - style = text-transform: uppercase - но не повезло.

Вы должны были использовать fieldStyle. Вот демоверсия .
Ура!

Answer 2

Данный ответ работает только для отображения текста в верхнем регистре, но значение остается прежним.Я расширил текстовое поле, чтобы переопределить метод getValue () для возврата значения в верхнем регистре, а не только для отображения, с помощью необязательного флага конфигурации:

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

Затем я могу легко добавить несколько текстовых полей в форму:

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

Работает в EXT 4.2.1.

Answer 3

Это работает для ExtJS 4.2

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

// определить новое настраиваемое текстовое поле

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

// использовать вновь созданное настраиваемое текстовое поле в определении представления с использованием псевдонима

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


 ]

Answer 4

Вы также можете сделать это с помощью плагина.

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

Использование этого плагина в 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;
            }
        });
    }
});

Вдохновлен: https://www.sencha.com/forum/showthread.php?94599-Uppercase-TextField-plugin&p=522068&viewfull=1#post522068

PS: мне пришлось вызвать getValue для прототипа.Если бы я вызвал getValue на cmp, он бы рекурсивно продолжал делать это и никогда не выходил.Я открыт для предложений о том, как изменить метод getValue компонента с помощью плагина.