在 ExtJS 5 中：如何移除文本框的边框

Question

在 ExtJS 5 中，我想删除文本字段的边框并使其像这样：

当然可以通过两个标签来完成，但不是很干净。我在 ExtJS5 官网上尝试了以下两种方法，但是不行：

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
    // here 1
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'Name',
    border: 0,    // set border = 0 or false
    hideBorders: true
}, {
    // here 2
    xtype: 'textfield',
    name: 'email',
    fieldLabel: 'Email Address',
    style: 'border: none;background-image:none;'   // set style border none
}]

});

结果：

有人有任何想法吗？谢谢。

Answer 1

如果您绝对需要使用文本字段 xtype，您可以通过清除inputWrapCls配置来删除边框。一些 Ext JS 主题会为环绕输入元素（和任何触发器按钮）的 div 添加边框，因此您可能还需要清除triggerWrapCls配置。

您可能还想修改fieldStyle配置以删除输入元素的背景：

{
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'Name',
    // remove default styling for element wrapping the input element
    inputWrapCls: '',
    // remove default styling for div wrapping the input element and trigger button(s)
    triggerWrapCls: '',
    // remove the input element's background
    fieldStyle: 'background:none'
}