ext js 4.2 vbox中的手風琴佈局

Question

手風琴佈局的面板與另一個項目包含在vbox中。

我有一個2周的煩惱：

1. 當我試圖設置flex與它會導致錯誤「[E]佈局運行失敗」手風琴佈局面板
2. 當高度由constand固定它不能按預期工作：第一個面板不會摺疊。

這裏是例子的代碼：

Ext.create('Ext.panel.Panel', { 
    title: 'Accordion Layout', 
    width: 300, 
    height: 500, 
    layout: 'vbox', 
    items: [{ 
     xtype: 'datefield' 
    }, { 
     defaults: { 
      // applied to each contained panel 
      bodyStyle: 'padding:15px' 
     }, 
     layout: { 
      // layout-specific configs go here 
      type: 'accordion', 
      titleCollapse: true, 
      animate: true 
     }, 
     items: [{ 
      title: 'Panel 1', 
      html: 'Panel content 1!' 
     }, { 
      title: 'Panel 2', 
      html: 'Panel content 2!' 
     }, { 
      title: 'Panel 3', 
      html: 'Panel content 3!' 
     }], 
    }], 
    renderTo: Ext.getBody() 
}); 

http://jsfiddle.net/6DHM4/1/

Answer 1

我無法重現你的錯誤，但事情看起來對我好與flex: 1如果我改變layout: 'vbox'到

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

（見this fiddle）

Answer 2

可能是正確的方法是使用佈局 '錨' 反對 'VBOX'？ 試試這種方式？

Ext.create('Ext.panel.Panel', { 
title: 'Accordion Layout', 
width: 300, 
height: 500,  
layout: 'anchor', 
items: [ 
      {xtype: 'datefield'}, 
      { 
      defaults: { 
       // applied to each contained panel 
       bodyStyle: 'padding:15px' 
       ,anchor: '100%' 
      }, 

    ... 

我不知道爲什麼，但是當我測試它jsfiddle.net它顯示錯誤：「第一屏不垮」。但是，如果我在這裏測試它http://try.sencha.com/例如，它工作正常。