Как убрать границы панели? - PullRequest
13 голосов
/ 22 июня 2011

Мне нужно удалить все границы . Я уже добавил 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>'
                        }]

                    }

Ответы [ 5 ]

13 голосов
/ 23 июня 2011

Ваша проблема в том, что вы настроили frame: true.Установите значение false, и оно удалит синюю рамку.

false по умолчанию для рендеринга с простыми квадратными границами 1px.Значение true для отображения с 9 элементами, в комплекте с произвольными закругленными углами (см. также Ext.Element.boxWrap).

Кроме того, синий фон не имеет ничего общего с параметром конфигурации frame

РЕДАКТИРОВАТЬ: При удалении frame: true вам нужно добавить параметр конфигурации для стиля цвета фона ...

bodyStyle: 'background-color:#dfe8f5;'

РЕДАКТИРОВАТЬ 2: Как Elgin упоминается в комментариях,вероятно, лучше использовать прозрачный цвет фона, чтобы облегчить изменение темы ...

bodyStyle: 'background-color: transparent;'

5 голосов
/ 07 мая 2013

Вот мое решение для модели столбцов 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
        })]
}

Вот макет : столбец * Модель 1005 * используется для придания читаемой форме формы.На каждой колонке были границы.После долгого поиска border: 0 у меня работает.

3 голосов
/ 23 июня 2011

Для ExtJS 3.x удалите "frame: true" и установите "bodyCssClass: 'x-panel-mc'".

0 голосов
/ 24 июня 2016

Для тех, кто может иметь эту проблему, я решил ее, добавив следующее в свою панель.(ExtJS 4.x)

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

Как уже упоминалось выше, если у вас есть frame: true, вы получите закругленные углы.

0 голосов
/ 23 июня 2011

Удалить вариант frame : true или поместить туда frame : false.

...