Sencha Touch 2表单面板显示不正确(布局问题？) [英] Sencha Touch 2 FormPanel not showing up properly (layout issue?)

问题描述

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

应该有一个具有VBox布局的面板，其中包含3项：一段文本、一条FormPanel和另一条文本。但是，FormPanel的大小似乎为0x0，并且根本没有显示，所以我只看到了这两个文本。

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

1. 在外面板上设置layout: 'fit'。但之后一切都会重叠。fit实际上不是为多个项目设计的，因此这不是解决方案。

2. 在FormPanel上显式width和height配置。但我希望它自己布局，而不是以像素为单位指定。我为什么需要这样做？

我试过许多其他的随机参数，但我只是在摸索。那么我错过了什么？

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

推荐答案

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

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

更新。请注意，在较新版本的Sencha(2.3)中，您必须使用scrollable: null，如Nathan Do中的Nathan Do所示。但由于中未记录该功能，因此以后可以更改。

这篇关于Sencha Touch 2表单面板显示不正确(布局问题？)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！