如何移除面板边框？

Question

我需要 去掉所有边框。我已经添加了 border:false 但是它没有生效。

请注意，我想保留这个蓝色的背景，所以我使用了 frame:true。

我的代码

        region: 'north',
        split: true,
        border: false, 
        height: 115,
        layout: 'border',
        items: [ {///Account info
            xtype: 'form',
            region: 'east',
            border: false,
            frame: true,
            //height: 100,
            width: 500, //'49%',//anchor : '50%',
            layout: 'column',

                items: [
                    { columnWidth: .5,
                      border: false, 
                      frame: true, 
                      defaults: { labelStyle: 'font-size:9px' },
                      items: [{
                            xtype: 'displayfield',
                            fieldLabel: 'Customer',
                            value: '<span style="color:blue;font-size:9px">IBM</span>'
                        }, {
                            xtype: 'displayfield',
                            fieldLabel: 'Subscription',
                            value: '<span style="color:blue;font-size:9px">On demand</span>'
                        }, {
                            xtype: 'displayfield',
                            fieldLabel: 'Remaining credits',
                            value: '<span style="color:blue;font-size:9px">23</span>'
                        }]

                    }, {
                        columnWidth: .5, 
                        border: false, 
                        frame: true,
                        margin : '0 0 0 8',
                        defaults: { labelStyle: 'font-size:9px' },
                        items: [{
                            xtype: 'displayfield',
                            fieldLabel: 'Account',
                            value: '<span style="color:blue;font-size:9px">Mike</span>'
                        }, {
                            xtype: 'displayfield',
                            fieldLabel: 'credentials',
                            value: '<span style="color:blue;font-size:9px">User</span>'
                        }]

                    }

- Armance

---

发布有问题组件的代码将有助于诊断问题。 :) - wes

Answer 1

你的问题是已经配置了 frame: true。将其设置为 false，它就可以去除蓝色边框。

false 是默认设置，使用普通的 1px 方形边框进行渲染。true 是使用 9 个元素进行渲染，包括自定义的圆角（还请参阅 Ext.Element.boxWrap）。

另外，蓝色背景与 frame 配置选项无关。

编辑：移除 frame: true 后，你需要添加一个配置选项来设置背景颜色...

bodyStyle: 'background-color:#dfe8f5;'

编辑2：正如评论中 Elgin 所提到的，最好使用透明的背景颜色以便更容易地进行主题更改...

bodyStyle: 'background-color: transparent;'

- JamesHalsall

---

但是当我移除frame;true时，面板内部变成了白色！！而我需要它保持蓝色。 - Armance

即使这样不太优雅，但更好的写法是 "bodyStyle: {background: 'transparent'}"。这样，在更改样式时就不会有意外情况发生。 - Engin

Answer 2

这是我针对ExtJs 4.0.7列模型的解决方案。

{
layout: 'column',
border:0,
defaults:{
    columnWidth:0.5
   ,layout:'anchor'
   ,border:0
},
items: [{ 
    // LEFT COLUMN
    defaults:{anchor:'100%'},
    items: [
        new Prg.checkBox({
            fieldLabel: 'Aktif mi?',
            name: 'activeFlag',
            labelWidth: 60,
            checked: (Ext.isEmpty(this.record)?false:this.record.get('activeFlag'))
        }),
        new Prg.idCombo({
            fieldLabel : 'Dil',
            labelWidth: 60,
            emptyText : 'Dili seçiniz...',
            id: 'langId',
            name : 'langId',
            store : this.ds_language
        })]
}

这里使用了 layout:column 模型来使表单的形状更易读。每一列上都有边框。经过长时间的搜索，我发现 border:0 对我有用。

- efirat

Answer 3

在ExtJS 3.x中，去掉"frame: true"并设置"bodyCssClass: 'x-panel-mc'"。

- sdorra

---

同时将背景颜色设置为您选择的颜色： bodyStyle: 'background-color:COLOR;' - luca76

同时将背景颜色设置为您选择的颜色：bodyStyle: 'background-color:COLOR;' - luca76

Answer 4

对于任何可能遇到这个问题的人，我通过在我的面板中添加以下内容解决了它。（ExtJS 4.x）

bodyCls: 'x-panel-body-default-framed'

如上所述，如果您设置了frame:true，则会获得圆角。

- C.N

Answer 5

移除 frame : true 选项或将其替换为 frame : false。

- Swar

---

但我想要框架，我想要蓝色主题，如果我设置frame:false，它就会变成白色！ - Armance