煎茶觸摸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中沒有顯示正確（佈局問題？）

回答

相關問題