如何删除面板边框？ [英] How do I remove panel borders?

问题描述

我需要删除所有边框。我已经添加了 border：false ，但它不起作用。

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

请注意，我希望它具有这样的蓝色背景我正在使用 frame：true 。

Note that I want it to have this blue background so I'm using 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>'
                        }]

                    }

推荐答案

您的问题是您有 frame：true 配置。将它设置为false，它将删除蓝色边框。

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

默认情况下为false，以简单的1px方形边框呈现。真实的渲染与9个元素，完成与自定义圆角（也请参阅Ext.Element.boxWrap）。

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).

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

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

编辑：删除框架时：true 你需要添加一个配置选项来设置背景颜色...

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

bodyStyle：'background-color： ＃dfe8f5;'

编辑2：与评论中提到的Elgin一样，使用透明背景颜色可能会更好地使主题更改更容易...

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

bodyStyle：'background-color：transparent;'

这篇关于如何删除面板边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！