ExtJS 4兩個帶分配器的可摺疊面板

Question

我有一個有兩個面板的容器作爲它的項目。我希望兩個面板都是可摺疊的（同時沒有一個面板或只有一個面板可以摺疊），如果有任何面板摺疊，其他面板應占用所有剩餘空間。另外我想能夠調整這兩個面板與Ext.resizer.Splitter。

我已經嘗試（h/v）框/邊框佈局的不同組合，但它們都不能正常工作。

看起來好像Ext.layout.container.Accordion是我需要的，但是，正如我所看到的，它可以與Ext.resizer.Splitter一起使用。

Check this fiddle

另外，我希望能夠與單 Ext.resizer.Splitter坍塌兩個面板，但我可以看到它的不可開箱，我要覆蓋它。我對嗎？

我使用的是ExtJS 4.2.1版。

Answer 1

這有幫助嗎？

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

    }); 
}}); 

這裏vbox用於豎置面板（該flex屬性告訴他們多少空間相互承擔）。 collapsible屬性設置爲true使它們可摺疊。然後每個面板都有一個事件，當目標面板崩潰時擴展兄弟面板。有了這個，至少有一個面板總是展開，你可以用分離器調整它們的大小！

---

編輯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上，此容器設置了現有的子面板，始終保持倒數第二個摺疊面板展開爲。您應該修改算法以適應您的需求。

旁註：在視圖容器上設置變量並不理想。這些變量應該被移入控制器。

Answer 2

我寫了基於Ext.resizer.Splitter代碼的組件。它允許用單個分離器摺疊兩個面板。

解決方法是原始的，你可以在this fiddle檢查它。

Answer 3

在ExtJs有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' 
    }] 
});