将文本字段转换为大写答案

【问题标题】：Convert textfield to uppercase将文本字段转换为大写
【发布时间】：2013-11-12 15:06:33
【问题描述】：

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

style: 'text-transform: uppercase'

它适用于我 90% 的文本字段，但是对于一个特定的文本字段，它不起作用。它将您输入的任何内容转换为文本字段，但是当您退出文本字段时，由于某种原因，它会恢复为小写。

这里是文本字段的完整代码：

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

【问题讨论】：

当您使用浏览器样式表工具检查该字段时，会显示什么？

标签： javascript extjs textfield

【解决方案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

【讨论】：

我使用 stle 而不是 fieldStyle，因为我使用的是 EXT 4.1.1。另外，我尝试了带有监听器的代码，它似乎根本不起作用。
在 EXT 4.1.1 中的文本字段上支持 fieldStyle，请参阅：jsfiddle.net/6MxTw
对不起，我的意思是 EXT 3.4.1 不是 4.1.1

【解决方案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());
       }
    }
}

【讨论】：

【解决方案3】：

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

【讨论】：