如何在ExtJs文本字段中以大写形式显示值而不显示用户字母从低到大的转换？

Question

我们正在使用ExtJS 4创建一个应用程序,它要求表单文本字段中的条目应始终为大写.

为此,我发现我可以在change事件上调用一个函数,并将当前值转换为大写,并按以下方式将其设置回字段:

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

这样做的是,如果用户输入小写字母,则将其转换为大写并将其放回字段中.在此过程中,从小写到大写显示给用户的轻微过渡.也就是说,用户能够以小写字母看到该字母,并且在毫秒之后,该字母变为大写.

问题是:有没有办法避免从低级到大写的"转换/转换",并且只要他输入内容就会直接向用户显示大写字母？

我尝试使用--style = text-transform:uppercase - 但没有运气.

任何帮助将非常感激.

提前致谢.

Answer 1

我尝试使用--style = text-transform:uppercase - 但没有运气.

你本应该用fieldStyle.这是演示.
干杯!

Answer 2

给定的答案仅适用于以大写形式显示文本,但值保持不变.我扩展了textfield以覆盖getValue()方法,以大写形式返回值,不仅用于显示,还带有可选的config标志:

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.