Sencha Touch 2 FormPanel未正确显示(布局问题？)

Question

我在Sencha Touch 2中使用FormPanel的布局时遇到问题.请参阅下面的示例应用程序.

应该有一个包含'vbox'布局的面板,其中包含3个项目:一段文本,一个FormPanel和另一段文本.然而,FormPanel似乎得到大小0x0并且根本没有显示,所以我只看到两个文本.

我找到了两个让表单面板显示出来的东西:

1. layout: 'fit'在外面板上设置.但随后一切都重叠了. fit并不是真的设计用于多个项目,因此这不是一个解决方案.

2. 在FormPanel上设置explicit width和heightconfig.但是我想要它自己布局而不必以像素为单位指定它.我为什么要这样做？

我尝试了一堆其他的随机参数,但我只是在黑暗中拍摄.那我错过了什么？

Ext.application({
  name: 'TestApp',
  launch: function() {
    return Ext.Viewport.add({
      xtype: 'panel',
      layout: {
        type: 'vbox',
        align: 'center'
      },
      // layout: 'fit'  // This shows the form, but overlaps all 3 panel items.
      items: [
        { html: 'Fill in the form below' },
        {
          xtype: 'formpanel',
          // width: 300,  // These fixed sizes reveal the form, but why?
          // height: 300, // These fixed sizes reveal the form, but why?
          items: [
            {
              xtype: 'fieldset',
              items: [
                {
                  xtype: 'textfield',
                  name: 'username',
                  label: 'Username'
                }
              ]
            }
          ]
        },
        { html: 'Fill in the form above' }
      ]
    });
  }
});

Answer 1

设置对象的scrollable属性,这将解决问题.formpanelfalse

{
  xtype: 'formpanel',
  scrollable: false,
  items: [
    {
      xtype: 'fieldset',
      items: [
        {
          xtype: 'textfield',
          name: 'username',
          label: 'Username'
        }
      ]
    }
  ]
},

更新.请注意,在Sencha(2.3)的新版本中,您必须使用scrollable: null,正如Nathan Do在对此答案的评论中所注意到的那样.但由于未记录的功能未来可以更改.

Answer 2

TracKer的回答是正确的,但他没有提供原因的解释.

以下是我需要可滚动的原因:false ..如果formpanel是可滚动的,那么你需要告诉Sencha有多大(在这个尺寸内,用户可以滚动它).但是,如果它不可滚动,它将占用它允许的整个空间,并且为了变得更大,用户可以滚动来访问它.

有点混乱=\