ExtJS 4 - 文本字段无法正常工作的圆角

Question

我在下面定义了一个文本字段：

xtype: 'textfield',
x: 490,
y: 365,
cls: 'textarea',
height: 40,
width: 300,
fieldLabel: 'Label',
hideEmptyLabel: false,
hideLabel: true

我的CSS定义如下：

.textarea {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

然而，文本字段仍有角落。我认为我做错了什么而且我无法发现它。很感谢任何形式的帮助。感谢。

Answer 1

试试这个： -

.textarea .x-form-text {
   border-radius: 5px;
}

您需要为<input>元素提供border radius属性，但您尝试将其设置为包含<input>元素的component元素。

Answer 2

您还可以尝试fieldStyle：

{
    xtype: 'textfield',
    x: 490,
    y: 365,
    cls: 'textarea',
    height: 40,
    width: 300,
    fieldLabel: 'Label',
    hideEmptyLabel: false,
    hideLabel: true,
    fieldStyle: {
        borderRadius: 5 //here
    }
}

当然，这只适用于您创建的组件。但是，如果您希望这会影响textarea cls的所有字段，请尝试使用fieldCls。