如何删除面板边框?

I need to remove all borders. I already added border:false but it's not working.

我需要移除所有边界。我已经添加了边框:false，但它不起作用。

Note that I want it to have this blue background so I'm using frame : true.

注意，我想让它有这个蓝色背景所以我用的是frame: true。

My code

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

                    }

5 个解决方案

#1

Your problem is that you have frame: true configured. Set it to false and it will remove the blue border.

你的问题是你有框架:真正的配置。设置为false，它将删除蓝色边框。

false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounded corners (also see Ext.Element.boxWrap).

默认为false，显示为纯1px的正方形边框。真正的渲染有9个元素，完整的自定义圆角(也见Ext.Element.boxWrap)。

Also, the blue background is nothing to do with the frame config option

此外，蓝色背景与框架配置选项无关

EDIT: When removing frame: true you need to add a config option to style the background color...

编辑:删除帧时:true，您需要添加一个配置选项来样式化背景颜色……

bodyStyle: 'background-color:#dfe8f5;'

bodyStyle:“background - color:# dfe8f5;”

EDIT 2: Like Elgin mentioned in the comments, it's probably better to use a transparent background color to make theme changes easier...

编辑2:就像评论中提到的Elgin一样，最好使用透明的背景色使主题更改更容易……

bodyStyle: 'background-color: transparent;'

bodyStyle:背景颜色:透明;

#2

Here is my solution for ExtJs 4.0.7 column model

下面是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
        })]
}

Here is layout:column model is used to make shape of form readable. There was borders on the each column. After long time searching border:0 works for me.

这里是布局:列模型是用来使形状可读的。每一列都有边框。经过长时间的搜索边界:0为我工作。

#3

For ExtJS 3.x remove "frame: true" and set "bodyCssClass: 'x-panel-mc'".

ExtJS 3。删除“frame: true”并设置“bodyCssClass: 'x-panel-mc'”。

#4

Remove frame : true option or put frame : false there.

删除帧:true选项或put frame: false。

#5

For anyone who might have this issue I solved it by adding the following to my panel. (ExtJS 4.x)

对于任何可能有这个问题的人，我通过在我的面板中添加以下内容来解决它。(ExtJS 4. x)

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

As mentioned above, if you have frame:true you get the rounded corners.

如上所述，如果你有框架:正确，你会得到圆角。

#1