我的代码

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

                    }

Answer 1

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

默认情况下为false，使用普通的1px方形边框进行渲染。如果使用9个元素进行渲染，则返回true，并使用自定义圆角（也请参见Ext.Element.boxWrap）。

此外，蓝色背景与frame配置选项

无关

编辑：删除frame: true时，您需要添加配置选项以设置背景颜色的样式...

bodyStyle: 'background-color:#dfe8f5;'

编辑2：与评论中提到的埃尔金一样，使用透明背景颜色更容易使主题变化更容易......

bodyStyle: 'background-color: transparent;'

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

这是布局：列模型用于使表单形状可读。每列都有边框。经过长时间搜索 border：0 对我有用。

Answer 3

对于ExtJS 3.x，删除“frame：true”并设置“bodyCssClass：'x-panel-mc'”。

Answer 4

删除frame : true选项或将frame : false放在那里。

Answer 5

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

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

如上所述，如果你有frame：true，你会得到圆角。

如何删除面板边框？

我的代码

5 个答案: