Question

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

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

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

在外部面板上设置layout: 'fit'。但随后一切都重叠了。 fit并非真正针对多个项目设计，因此这不是解决方案。
在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' }
      ]
    });
  }
});

Answer 1

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

{
  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它有多大（并且在该尺寸内，用户可以滚动它）。但是，如果它不可滚动，它将占用允许的整个空间，并且为了变得更大，用户可以滚动来访问它。

有点混乱= \

Answer 3

我稍微改变了你的代码，但这就是我想出的：

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布局的正确方法。我不完全确定为什么会这样，但它确实看起来像中心＆＃39;不是您可以赋予align属性的有效值。我认为你正在寻找中间的＃39;如果它没有给你你想要的东西，也许可以尝试在你的面板中添加一个类或id并控制与css的对齐。希望这会有所帮助。

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

3 个答案: