web-dev-qa-db-ja.com

パネルの境界線を削除するにはどうすればよいですか？

すべての境界線を削除するする必要があります。すでに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>'
                        }]

                    }
extjsborderframe
13
Armance

問題は、frame: trueが構成されていることです。 falseに設定すると、青い境界線が削除されます。

デフォルトではfalseで、プレーンな1pxの正方形の境界線でレンダリングします。 9つの要素でレンダリングする場合はtrueで、カスタムの丸い角があります（Ext.Element.boxWrapも参照）。

また、青い背景はframe構成オプションとは何の関係もありません

編集：frame: trueを削除するときは、背景色のスタイルを設定するための構成オプションを追加する必要があります...

bodyStyle: 'background-color:#dfe8f5;'

編集2：コメントで言及されているエルギンのように、テーマの変更を容易にするために透明な背景色を使用する方がおそらく良いでしょう...

bodyStyle: 'background-color: transparent;'

14
JamesHalsall

これがExtJs4.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：は私のために働きます。

5
efirat

ExtJS 3.xの場合、「frame：true」を削除し、「bodyCssClass： 'x-panel-mc'」を設定します。

3
sdorra

削除する frame : trueオプションまたはputframe : false そこ。

0
Swar

この問題を抱えている可能性のある人のために、私はパネルに以下を追加することで問題を解決しました。 （ExtJS 4.x）

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

上記のように、frame：trueがある場合は、角が丸くなります。

0
C.N