Question

我正在尝试强制文本字段将您输入的内容转换为大写。这是我一直在使用的线

style: 'text-transform: uppercase'

它正在处理我文本字段的90％，但对于一个特定的文本字段，它将无法正常工作。它会将您键入的内容转换为文本字段，但是当您从文本字段中跳出时，它会因某种原因恢复为小写。

这是textfield的完整代码：

    {
    id: 'conditionValue',
    header: "Condition Value",
    dataIndex: 'condValue',
    width: 100,
    editor: newExt.form.TextField({
        style: 'text-transform: uppercase'
    }
})
}

Answer 1

你可以在不需要jQuery的情况下直接在Ext JS中执行此操作：

{
    id: 'conditionValue',
    header: "Condition Value",
    dataIndex: 'condValue',
    width: 100,
    editor: newExt.form.TextField({
        listeners:{
           change:function(field){
                field.setValue(field.getValue().toUpperCase());
           }
        }
    })
}

也就是说，在ExtJS中执行此操作的最佳方法是使用fieldStyle，例如在你的texfield上：

fieldStyle: 'text-transform:uppercase'

而不是您当前设置style

的位置

请参阅此FIDDLE

Answer 2

尝试设置文本字段的fieldStyle（自ExtJS 4.0以来可用），然后处理其change事件。

id: 'conditionValue',
header: "Condition Value",
dataIndex: 'condValue',
width: 100,
editor: newExt.form.TextField({
    fieldStyle: 'text-transform:uppercase;',
    listeners: {
       change: function(field, newValue, oldValue) {
           field.setValue(newValue.toUpperCase());
       }
    }
}

Answer 3

原因是，一旦您从文本字段中聚焦，字段本身就会被隐藏，其内容将被复制到表格单元格（有点，实际上它会通过记录和列渲染器）。将相同的CSS style添加到列中，应该这样做。如果这还不够，请自定义列renderer。

将文本字段转换为大写

3 个答案: