如何在VBOX佈局中製作Sencha觸摸列表顯示？

我有一個佈局設置爲vbox的主面板。我想添加兩個單獨的列表到面板。我希望這兩個列表垂直堆疊顯示，並且當它們溢出主面板的底部時，面板應該簡單地滾動。如何在VBOX佈局中製作Sencha觸摸列表顯示？

但是，列表似乎需要在FIT佈局中設置，才能顯示。適合的佈局不允許垂直堆疊物品。

我是否缺少佈局系統的功能，該功能允許我通過vbox佈局告訴列表完全顯示在父級內部？

2012-04-30 Paul

Ext.List組件的超類是Ext.DataView而不是Ext.Panel。

因此，您需要在兩個單獨的面板中添加兩個列表，並在超級面板中添加這兩個面板。
此外，您將需要使layout:'vbox'爲superpanel並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' 
       } 
      ] 
     } 
    ] 
}); 
.... 
....

來源

2012-04-30 05:25:49

我不認爲你需要窩在一個包裝面板每個列表。我很高興地將可滾動列表作爲vbox容器的頭等子項。雖然如果你使用的是vbox，你應該爲每個孩子都有flex的值，除非停靠。 – bradgonesurfing

啊！我錯過了那個財產。應用'flex'將有助於這兩個列表獲得相等的空間... –

我會仔細檢查這一點，但我認爲flex解決方案使每個列表佔用父母高度的一半。（讓列表項目在每個列表中滾動）。我希望每個列表都不要滾動，並且要全部列出他們的項目。我希望父面板同時滾動子列表，作爲vbox兒童。（或者你的解決方案是否會這樣做？） – Paul

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 
     } 
    ] 
});

來源

2012-04-30 10:40:28 thecodeparadox

放高度：在列表項「自動」

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

來源

2012-09-17 21:51:15

如何在VBOX佈局中製作Sencha觸摸列表顯示？

回答

相關問題