在ExtJS 5中：如何删除文本字段的边框

Question

在ExtJS 5中，我想删除textfield的边框并使其像这样：

当然可以通过两个标签完成，但它不是很干净。我尝试在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

尝试使用显示字段代替文本字段 供参考通过链接。 http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.form.field.Display.html

Answer 2

如果您绝对需要使用textfield 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'
}