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

Question

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

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

我发现有两件事可以让表单面板显示:

1. 在外部面板上设置layout: 'fit'。但随后一切都会重叠。 fit 并不是真正为多个商品设计的，因此这不是一个解决方案。

2. 在 FormPanel 上设置显式宽度和高度配置。但我希望它能够自行布局，而不必以像素为单位指定。为什么我需要这样做？

我尝试了一些其他随机参数，但我只是在黑暗中拍摄。那么我错过了什么？

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

将 formpanel 对象的 scrollable 属性设置为 false，这将解决问题。

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

更新。请注意，在较新版本的 Sencha (2.3) 中，您必须使用 scrollable: null，如 Nathan Do 所注意到的那样。在 his comment对于这个答案。但由于它没有记录在案，因此将来可以更改该功能。