extjs - ExtJs-ボーダーレイアウト-スプリッター構成

Question

レイアウトのある私のパネルはborder次のようになります。

var oSplitPanel = Ext.create('Ext.panel.Panel', {
 lid   : 'splitpanel',
 layout: 'border',
 border: 0,
 style: { border: 0 }
 height: 150,
 items: [{
   split: true,
   flex: 1,
   region: 'west',
   xtype: 'panel',
   lid: 'panelwest',
   layout: 'fit',
   minWidth: 200
 }]
});

次に、別のパネルがこのwestリージョンパネルに追加されます。
```
oSplitPanel.query('[lid=panelwest]')[0].add(oExplorerPanel);
```
次に、この分割パネルがメインビューに追加されます。
```
that.getView().add(oSplitPanel);
```

次に、別の関数で、centerパネルを追加します。

var oAddPanelRight = {
       split: true,
       flex: 3,
       region: 'center',
       xtype: 'panel',
       lid: 'panelcenter',
       layout: 'fit',
       border: 0
    };

oSplitPanel.add(oAddPanelRight);

問題：

すべてがこのように完璧に機能しますが、スプリッター自体の幅を変更（制限）したいと思います（このスプリッターはパネルの間にwestあり、centerパネルの幅を変更します）。

私が試したこと：

スプリッターの幅を変更してみてください。

 listeners: {
    afterrender: function() {
       // error following, 'splitters' does not exist
       oSplitPanel.layout.splitters.west.setWidth(1);
       oSplitPanel.doLayout();
    }
 }

centerパネルに負のマージンを追加する：

         // Tried this:
         margin: '0 0 0 -4'

         // And that:
         style: {
            border: 0,
            marginLeft: '-3px'
         }

score 2 · Accepted Answer

または、イベント「追加」を使用します

listeners: {
    add: function (me, item) {
        if (item.xtype == 'bordersplitter') item.width = 2;
    }
},

デモはこちらhttp://ext4all.com/post/extjs-4-border-layout-splitter-width

score 1 · Accepted Answer

oSplitPanelオブジェクト/インスタンスには、分割パラメーターが true に設定されていないため、スプリッターが適用されていません。スプリッターは、oAddPanelRightオブジェクト/インスタンスおよび oSplitPanel のネストされたパネルに適用されます。後で追加するパネルにも適用される場合があります。それはわかりません。

つまり、間違ったクラスを見ただけです。

ところで。クラス自体のスプリッターを取得するには、クラスの小道具をoSplitPanel.layout.splitters見てください。splitter

extjs - ExtJs-ボーダーレイアウト-スプリッター構成

2 に答える 2

Related

Reference