Sencha Touch：hbox佈局問題中的vbox

Question

我正在將vbox佈局放入hbox佈局中。但是vbox工作不正常。下面是代碼：

代碼：

var panel = new Ext.Panel({ 
    fullscreen : true, 
    layout : { 
     type : 'hbox', 
     align : 'stretch' 
    }, 
    items : [{ 
     width : 50, 
     layout : { 
      type : 'vbox', 
      align : 'stretch' 
     }, 
     items : [{ 
      flex : 1, 
      html : '1st' 
     }, { 
      height : 50, 
      html : '2nd' 
     }] 
    }, { 
     flex : 1, 
     html : 'Large' 
    }] 
}); 

這裏，VBOX的2個面板是過來彼此。如果我只是創建vbox，它完美的工作。下面是代碼：

代碼：

var panel = new Ext.Panel({ 
    fullscreen : true, 
    layout : { 
     type : 'vbox', 
     align : 'stretch' 
    }, 
    items : [{ 
     flex : 1, 
     html : '1st' 
    }, { 
     height : 50, 
     html : '2nd' 
    }] 
}); 

上午我做錯了什麼？

編輯：

不知怎的，我發現，如果我換了VBOX項目這種方式，那麼它的工作原理：

... 
layout : { 
    type : 'vbox', 
    align : 'stretch' 
}, 
items : [{ 
    height : 50, 
    html : '2nd' 
}, { 
    flex : 1, 
    html : '1st' 
}] 
.... 

不過，我想在底部的小項目。

Answer 1

在你的橫向盒中，VBOX本身缺少彈性或高配置...

var panel = new Ext.Panel({ 
    fullscreen: true, 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 
    items: [{ 
     width: 50, 
     flex:1, // this needs to be flexy as well 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     items: [{ 
      flex: 1, 
      html: '1st' 
     }, { 
      height: 50, 
      html: '2nd' 
     }] 
    }, { 
     flex: 1, 
     html: 'Large' 
    }] 
});