ExtJS 4 2つの折りたたみ式スプリッター付きパネル

Question

2つのパネルを持つコンテナがあります。私は両方のパネルを折りたたみ可能にしたい（同時に1つのパネルだけが折りたたまれることはできません）。パネルが折りたたまれていれば、他のパネルは残りのすべてのスペースを取るべきです。また、私はExt.resizer.Splitterで両方のパネルのサイズを変更できるようにしたい。

（h/v）ボックス/ボーダーレイアウトのさまざまな組み合わせを試しましたが、どれも正しく動作しません。

Ext.layout.container.Accordionが必要ですが、私が見ることができるように、Ext.resizer.Splitterをそのまま使用しています。

Check this fiddle

また、私は単一 Ext.resizer.Splitterで両方のパネルを折りたたむことができるようにしたいが、私は箱から出して利用できませんを見ることができますし、私はそれを上書きしてきたように。私は正しい？

私はExtJSバージョン4.2.1を使用しています。

Answer 1

これは役に立ちますか？ここでvbox

Ext.application({ 
name: 'Fiddle', 

launch: function() { 

    Ext.create('Ext.Container', { 
     height: 500, 
     renderTo: Ext.getBody(), 
     width: 500, 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 

     items: [{ 
      xtype: 'panel', 
      reference: 'panel1', 
      title: 'Top panel', 
      collapsible: true, // To allow collapse 
      flex: 1, 
      bodyStyle: 'background: #dadada', 
      listeners: { 
       collapse: function(){ 
        this.up().down("[reference='panel2']").expand(); 
       } 
      } 
     }, 
     { 
      xtype: 'splitter' 
     }, 
     { 
      xtype: 'panel', 
      reference: 'panel2', 
      title: 'Bottom panel', 
      collapsible: true, // To allow collapse 
      flex: 1, 
      bodyStyle: 'background: #999', 
      listeners: { 
       collapse: function(){ 
        this.up().down("[reference='panel1']").expand(); 
       } 
      } 
     }] 

    }); 
}}); 

を垂直にパネルを設定するために使用されている（flex特性が互いにどのくらいのスペースを取るためにそれらを伝えます）。 collapsibleプロパティをtrueに設定すると、折りたたみ可能になります。各パネルには、対象パネルが折りたたまれたときに兄弟パネルを展開するイベントがあります。これにより、少なくとも1つのパネルが常に拡張され、スプリッタでパネルのサイズを変更できます！

---

編集1：

前のコードサンプルは、一般的なものではなく、予想通り、我々はanimCollapse: falseでパネルを設定している場合は反応しません。一般的な解決策は、次のようになります。

// Our extended container 
Ext.define('MyVboxContainer', { 
    extend: 'Ext.Container', 

    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 

    // We do the setup on initiating the component 
    initComponent: function() { 
     var me = this; 
     var panelCount = 0; 

     // For each child component 
     this.items.forEach(function (comp) { 

      // If the component is a panel 
      if (comp.xtype === 'panel') { 

       // We add an unique ref 
       comp.reference = 'panel' + panelCount; 

       // Increment the total number of panels 
       panelCount++ 

       // And listeners for beforecollapse, collapse and expand 
       comp.listeners = { 
        // On collpase, we track the last collapsed panel 
        'collapse': function() { 
         me.closedCount++; 

         me.lastClosed = this.reference; 
        }, 

        // On expand we decrement the total number of panels collapsed 
        'expand': function() { 
         me.closedCount--; 
        }, 

        // If this is the last panel being collapsed, 
        // we expand the previous collapsed panel 
        // Note: this cannot be done on the expand event 
        // if the panel has animCollapse: false 
        'beforecollapse': function() { 
         if (me.closedCount + 1 == me.totalPanels) { 
          me.down("[reference='" + me.lastClosed + "']").expand(); 
         } 
        } 
       }; 
      } 
     }); 

     this.totalPanels = panelCount; // total number of panels 
     this.lastClosed = null; // Last collapsed panel 
     this.closedCount = 0; // How many panels we have closed 

     console.log("Total panels are: " + this.totalPanels) 

     this.callParent(); 
    } 
}); 

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 

     Ext.create('MyVboxContainer', { 
      height: 500, 
      width: 500, 
      renderTo: Ext.getBody(), 

      items: [{ 
       xtype: 'panel', 
       animCollapse: false, 
       title: 'Top panel', 
       collapsible: true, // To allow collapse 
       flex: 1, 
       bodyStyle: 'background: #dadada' 
      }, { 
       xtype: 'splitter' 
      }, { 
       xtype: 'panel', 
       title: 'Middle panel', 
       animCollapse: false, 
       collapsible: true, // To allow collapse 
       flex: 1, 
       bodyStyle: 'background: #999' 
      }, { 
       xtype: 'splitter' 
      }, { 
       xtype: 'panel', 
       title: 'Bottom panel', 
       animCollapse: false, 
       collapsible: true, // To allow collapse 
       flex: 1, 
       bodyStyle: 'background: #999' 
      }] 
     }); 
    } 
}); 

ここでは、垂直パネルを設定するvboxレイアウトを使用して拡張されたコンテナを作成します。 initComponentにあるこのコンテナは、既存の子パネルを設定して、の最後の2つの折りたたみパネルを常に維持します。必要に応じてアルゴリズムを変更する必要があります。

サイドノート：ビューコンテナに変数を設定することは理想的ではありません。これらの変数はコントローラに移動する必要があります。

Answer 2

Ext.resizer.Splitterコードに基づいてコンポーネントを書きました。 1つのスプリッタで両方のパネルを折り畳むことができます。

解決策はまだ生まれていません。this fiddleで確認できます。 ExtJSので

Answer 3

spliterを持っています。

あなたのコンテナの中にいることができます。ここでは、折りたたみ式のパネルでデモを作成しました。

あなたの問題を解決するのに役立つことを願っています。 Sencha Fiddle

Ext.create('Ext.container.Container', { 
    height: 300, 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    width: 400, 
    renderTo: Ext.getBody(), 
    border: 1, 
    items: [{ 
     xtype: 'panel', 
     collapsible: true, 
     title: 'First Panel', 
     flex: 1 
    }, { 
     xtype: 'splitter', 
     height: 20 
    }, { 
     xtype: 'panel', 
     collapsible: true, 
     flex: 1, 
     maintainFlex: true, 
     title: 'Second Panel' 
    }] 
});