ExtJs 3.4：删除字段集的边框答案

【问题标题】：ExtJs 3.4 : Remove border of a fieldsetExtJs 3.4：删除字段集的边框
【发布时间】：2014-01-23 19:28:20
【问题描述】：

我有一个 ExtJs 字段集。

{
                xtype : 'fieldset',
                layout : 'hbox',

                defaults : {
                    layout : 'hbox',
                    labelAlign : 'left',
                    border : false,
                    frame : false
                },
                items : [ {
                    xtype : 'label',
                    id : 'idDrop',
                    text : '',
                    width : 120,
                    height : 25,
                    style : {
                        //background : 'yellow',
                        color : 'black',
                        textAlign: 'center',
                        border: '1px solid black',
                        'font-weight':'bold'
                    }
                }, {
                    xtype : 'label',
                    text : '',
                    id : 'idPickup',
                    width : 120,
                    height : 25,
                    style : {
                        //background : 'green',
                        color : 'black',
                        textAlign: 'center',
                        border: '1px solid black',
                        'font-weight':'bold'
                    }
                }, {
                    xtype : 'label',
                    text : '',
                    id : 'idMix',
                    width : 120,
                    height : 25,
                    style : {
                        //background : 'blue',
                        color : 'black',
                        textAlign: 'center',
                        border: '1px solid black',
                        'font-weight':'bold'
                    }
                } ]
            }

我已尝试删除此字段集的框架，如下所示。

defaults : {
                    layout : 'hbox',
                    labelAlign : 'left',
                    border : false,
                    frame : false
                }

但没有运气。

我该如何解决？

【问题讨论】：

改用容器

标签： javascript extjs fieldset

【解决方案1】：

defaults 配置对象中的属性将应用于字段集的所有项目，而不是字段集本身。

为了去除那里的边框，只需在字段集上设置border: false：

{
    xtype: 'fieldset',
    border: false,
    // ...
}

【讨论】：

我将我的代码复制到这个小提琴中。它工作正常。但它在我的应用程序中不起作用。为什么？
如果不深入了解您的应用程序，这很难说。也许这是您的 CSS 的问题？尝试使用 Firebug/Chrome DevTools 检查字段集。字段集应该有一个类x-fieldset-noborder。如果是这种情况，是否还有其他应用边框的 CSS 类/内联样式？
是的，它有 .x-fieldset-noborder {border:0px none transparent; }
在这种情况下，如果您的字段集仍然有边框，那么某处必须有另一种样式再次覆盖边框样式。您应该能够在 DOM 检查器工具中看到实际设置边框的样式。