Sencha touch Sencha Touch 2 FormPanel未正确显示（布局问题？）

我在Sencha Touch 2中的模板布局有问题。请参阅下面的示例应用程序

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

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

设置外部面板上的布局：“安装”。但一切都是重叠的

fit

并不是为多个项目设计的，因此这不是一个解决方案

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

---

我稍微改变了一下你的代码，但我想到的是：

Ext.application({
name : 'TestApp',
requires: ['Ext.form.Panel', 'Ext.form.FieldSet'],
launch : function() {
    var paneltest = Ext.create('Ext.Panel', {
        fullscreen: true,
        layout: 'vbox',
        // layout: 'fit'  // This shows the form, but overlaps all 3 panel items.
        items : [
            {
                html : 'Fill in the form below',
                flex: 1
            },
            {
                xtype: 'formpanel',
                flex: 1,
                items : [
                    {
                        xtype : 'fieldset',
                        items : [{
                            xtype : 'textfield',
                            name : 'username',
                            label : 'Username'
                        }]
                    }
                ]
            }, 
            {
                html : 'Fill in the form above',
                flex: 1
            }
        ]
    });

    Ext.Viewport.add(paneltest);
}
});

我对代码的主要更改是删除了

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

我把它改成了

layout: 'vbox'

---

我还为元素添加了一个flex。这是使用vbox和hbox布局的正确方法。我不完全确定为什么会这样，但是看起来“中心”不是一个有效的值，您可以给align属性。我想你在找“中间人”。如果这不能满足您的需要，可以尝试向面板添加类或id，并使用css控制对齐。希望这有帮助。

将

窗体面板

对象的

可滚动属性设置为
false
，这将解决问题

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

更新。请注意，在Sencha（2.3）的较新版本中，您必须使用
scrollable:null
，这一点在回答这个问题时已经注意到。但由于没有文档记录，该功能可以在将来更改。
TracKer的回答是正确的，但他没有解释原因

下面是我对为什么需要滚动的理解：false。。如果formpanel是可滚动的，那么您需要告诉Sencha它有多大（用户可以在该大小内滚动）。然而，如果它不可滚动，它将占用它允许的全部空间，并且为了变得更大，用户可以滚动访问它

有点让人困惑=\
在Sencha 2.3上，“scrollable:false”对我不起作用“可滚动：null”是。@marco marsala，因为这没有文档记录，所以可以在将来更改。在写答案的时候，
false
value工作得很好，但是，正如我所说，它是在Sencha的旧版本中，而不是在2.3中。谢谢你的“减号”，顺便说一句。