如何在ExtJs文本字段中以大写显示值,而不显示用户字母从小写到大写的转换?
我们正在使用ExtJS4创建一个应用程序,它要求表单textfield中的条目始终为大写 为此,我发现我可以在change event上调用函数,并将当前值转换为大写,然后按以下方式将其设置回字段:如何在ExtJs文本字段中以大写显示值,而不显示用户字母从小写到大写的转换?,extjs,transform,textfield,uppercase,lowercase,Extjs,Transform,Textfield,Uppercase,Lowercase,我们正在使用ExtJS4创建一个应用程序,它要求表单textfield中的条目始终为大写 为此,我发现我可以在change event上调用函数,并将当前值转换为大写,然后按以下方式将其设置回字段: change: function(field, newValue){ field.setValue(newValue.toUpperCase()); } 这样做的目的是,如果用户输入小写字母,则会将其转换为大写字母并将其放回字段中。在此期间,会向用户显示从小写到大写的轻微转换。也就是说,用
change: function(field, newValue){
field.setValue(newValue.toUpperCase());
}
这样做的目的是,如果用户输入小写字母,则会将其转换为大写字母并将其放回字段中。在此期间,会向用户显示从小写到大写的轻微转换。也就是说,用户能够看到小写字母,在一毫秒后,字母变成大写
问题是:有没有办法避免这种从小写到大写的“转换/转换”,并在用户键入内容时直接向用户显示大写字母?
我尝试使用-style=text-transform:uppercase,但没有成功
任何帮助都将不胜感激
提前谢谢
我尝试使用-style=text-transform:uppercase,但没有成功
你应该用干杯 给定答案仅适用于以大写显示文本,但值保持不变。我扩展了textfield以覆盖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
},
在ext4.2.1中工作。您也可以使用插件来完成
{
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;
}
});
}
});
灵感来自:
PS:我必须在原型上调用getValue。如果我在cmp上调用getValue,它将递归地继续这样做,并且永远不会退出。我愿意接受关于如何通过插件更改组件的getValue方法的建议。它适用于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
},
]
同意:)我也算明白了。但是谢谢你的回答。尝试在这样的字段中输入一些文本,然后将插入符号设置为输入的开头,并尝试在那里添加一些文本,你会感到惊讶。