煎茶触摸2 FormPanel中没有显示正确（布局问题？）

我有麻烦了FormPanel中的煎茶触摸2.布局参见下面的示例应用程序。煎茶触摸2 FormPanel中没有显示正确（布局问题？）

应该有与含有3项“VBOX”布局的面板：一段文字，FormPanel中，和另一块文字。然而，FormPanel似乎获得大小0x0并且根本不显示，所以我只能看到两个文本。

我发现2个东西，拿到表格面板展现出来：

外面板上设置layout: 'fit'。但是，然后一切重叠。 fit并非真正为多个项目设计，所以这不是一个解决方案。
设置显式width和height在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' } 
     ] 
    }); 
    } 
});

来源

2012-02-27 dkamins

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

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

更新。请注意，在煎茶（2.3）的新版本，你将不得不使用scrollable: null，如Nathan Do在his comment注意到了这个答案。但由于它没有记录的功能在未来可以改变。

来源

2012-12-05 16:01:02

请参阅下面的@ pfrank的答案，了解其原因。 – dkamins 2013-07-29 19:18:20

在Sencha 2.3上，'scrollable：false'不适用于我。 'scrollable：null'是。 – 2014-04-04 03:34:42

不能使用false。由于这没有记录，所以在将来可以改变，因为使用null – 2014-06-06 08:30:27

我在你的代码类型的切换一点，但这里是我想出了：

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的对齐。希望这可以帮助。

来源

2012-02-28 14:07:37 jb1785

Tracker的答案是正确的，但他没有提出为何作出解释。

这里是我为什么需要滚动：假。如果formpanel是可滚动的，那么你需要告诉Sencha有多大可以制作它（并且在这个尺寸内用户可以滚动它）。但是，如果它不可滚动，则它将占用允许的整个空间，并且要变得更大，用户可以滚动以访问它。

有点令人困惑= \

来源

2013-07-29 16:24:32 pfrank

煎茶触摸2 FormPanel中没有显示正确（布局问题？）

回答

相关问题