Sencha Touch 2 FormPanelが正しく表示されない（レイアウトの問題？）

Question

Sencha Touch 2のFormPanelのレイアウトに問題があります。下記のサンプルアプリケーションを参照してください。

「vbox」レイアウトのパネルには、テキスト、FormPanel、および別のテキストの3つのアイテムが含まれている必要があります。しかし、FormPanelはサイズ0x0を得て、まったく表示されないので、私は2つのテキストしか見ません。アウターパネルにlayout: 'fit'を設定

1. ：

   は、私が2つのに表示するために、フォームのパネルを得る事を発見しました。しかし、すべてが重なる。 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' } 
     ] 
    }); 
    } 
}); 

Answer 1

formpanelオブジェクトのscrollableプロパティをfalseに設定すると、問題が解決されます。

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

更新。 Sencha（2.3）の新しいリリースでは、scrollable: nullをNathan Doに表示し、この回答はhis commentであることに注意してください。しかし、それは将来的に変更することができる機能が記載されていないので。

Answer 2

は、私は一種のあなたのコードの周りを少し切り替えが、ここで私が思い付いたものです：

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' 

私はまたあなたの要素にフレックスを追加しました。これは、vboxおよびhboxレイアウトを使用する適切な方法です。私は完全にはなぜこれが動作するかはわかりませんが、 'center'はalign属性を与えることができる有効な値ではないように見えます。私はあなたが「中」を探していると思います。それがあなたの望むものを与えない場合は、クラスやIDをパネルに追加してCSSで整列をコントロールしてみてください。お役に立てれば。

Answer 3

TracKerの答えは正しいですが、理由を説明していません。

ここで私はスクロールが必要な理由を説明します：false .. formpanelがスクロール可能な場合は、Senchaにどのくらいの大きさを伝える必要があります。ただし、スクロールできない場合は、許可されているスペース全体を占有し、ユーザーがスクロールしてアクセスできるように大きくなるようにします。

少し混乱= \