在ExtJS 5中：如何删除textfield的边框

在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
}]

})

结果:

---

有人知道吗？谢谢。

尝试用DisplayField代替TextField

---

请浏览链接以供参考

尝试用DisplayField代替TextField

---

请浏览链接以供参考

如果您确实需要使用textfield xtype，可以通过清除配置来删除边框。一些ExtJS主题在div中添加了一个边框，用于包装输入元素和任何触发器按钮，因此您可能还需要清除配置

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

{
    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'
}

---

如果您确实需要使用textfield xtype，可以通过清除配置来删除边框。一些ExtJS主题在div中添加了一个边框，用于包装输入元素和任何触发器按钮，因此您可能还需要清除配置

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

{
    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'
}

---

谢谢你，普拉卡什！我以前不知道这个显示字段。Hi Prakash，还有一件事，如何设置其标签粗体，我尝试添加标签样式：“font-weight:bold；”，但是不起作用。你知道吗？试着用粗体标记ANKS Prakash！我以前不知道这个显示字段。Hi Prakash，还有一件事，如何设置其标签粗体，我尝试添加标签样式：“font-weight:bold；”，但是不起作用。你知道吗？试着把标签用粗体字写上