4

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

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

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

它的作用是,如果用户以小写字母输入字母,则将其转换为大写字母并将其放回字段中。在此期间,会向用户显示从小写到大写的轻微转换。也就是说,用户能够看到小写字母,并且可能在一毫秒后,字母变为大写字母。

问题是:有没有办法避免这种从小写到大写的“转换/转换”,并在用户输入内容后直接向用户显示大写字母?

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

任何帮助将非常感激。

提前致谢。

4

4 回答 4

8

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

你应该fieldStyle改用。这是演示
干杯!

于 2011-08-31T08:32:29.773 回答
6

给定的答案仅适用于以大写形式显示文本,但值保持不变。我已经扩展了文本字段以覆盖 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 中工作。

于 2014-05-01T20:31:58.000 回答
0

它适用于 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
  },


 ]
于 2017-08-08T13:17:04.193 回答
0

您也可以使用插件来完成。

{
    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 。如果我在 cmp 上调用 getValue ,它将递归地继续这样做并且永远不会退出。我愿意接受有关如何通过插件更改组件的 getValue 方法的建议。

于 2015-11-01T10:13:06.253 回答