VBOXレイアウトでSencha Touchのリスト表示を行うにはどうしたらいいですか？

Question

レイアウトをメインパネルにvboxに設定しました。パネルに別々のリストを2つ追加したいと思います。私は、2つのリストを縦に積み重ねて表示し、それらがメインパネルの下をオーバーフローするので、パネルをスクロールするだけです。

ただし、リストを表示するには、FITレイアウトでリストを設定する必要があるようです。フィットレイアウトではアイテムを垂直に積み重ねることはできません。

vboxレイアウトの親の中に自分自身を完全に表示するようにリストに指示するレイアウトシステムの機能がありませんか？

Answer 1

Ext.ListコンポーネントのスーパークラスはExt.DataViewであり、Ext.Panelではありません。

したがって、2つの別々のパネルに2つのリストを追加し、それらの2つのパネルをスーパーパネル内に追加する必要があります。
また、あなたはここで、あなたがそれを行うことができる方法だ他の二つの子パネル

ためsuperpanelためlayout:'vbox'を作り、layout:'fit'を行う必要があります。

.... 
.... 
var superpanel = new Ext.Panel({ 
    fullscreen: true, 
    layout: 'vbox',    // to vertically stack two list. 
    items: [ 
     { 
      xtype: 'panel', 
      id: 'panel_1', 
      width: '100%', 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'list', 
        flex:1, 
        id: 'list1', 
        store: 'samplestore1' 
       } 
      ] 
     }, 
     { 
      xtype: 'panel', 
      id: 'panel_2', 
      width: '100%', 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'list', 
        id: 'list2', 
        flex:1, 
        store: 'samplestore2' 
       } 
      ] 
     } 
    ] 
}); 
.... 
.... 

Answer 2

var parent = new Ext.Panel({ 
    fullscreen: true, 
    layout: 'vbox', 
    items: [ 
     { 
      xtype: 'list', 
      id: 'list_1', 
      store: 'store1, 
      flex: 1 
     }, 
     { 
      xtype: 'list', 
      id: 'list_2', 
      store: 'store2, 
      flex: 1 
     } 
    ] 
}); 

Answer 3

プット高さ：リスト項目

items: [ 
    { 
     xtype: 'list', 
     height: 'auto' 
    }, 
    { 
     xtype: 'list', 
     height: 'auto', 
    } 
]