Jak utworzyć ekran dotykowy Sencha w układzie VBOX?

Mam główny panel z układem ustawionym na Vbox. Chcę dodać DWIE osobne listy do panelu. Chcę, aby dwie listy były ułożone pionowo, a ponieważ przepełniają dno głównego panelu, panel powinien po prostu przewinąć.Jak utworzyć ekran dotykowy Sencha w układzie VBOX?

Jednak wydaje się, że listy wymagają ustawienia w układzie FIT, aby wyświetlić. Dopasowane układy nie pozwalają na pionowe układanie elementów.

Czy brakuje mi funkcji układu układu, która pozwala mi wyświetlić listę, aby w pełni wyświetlić się w rodzica z układem vbox?

Źródło

2012-04-30 Paul

Ext.List Nadklasa składnika to Ext.DataView, a nie Ext.Panel.

W związku z tym należy dodać dwie listy w dwóch osobnych panelach i dodać te dwa panele w panelu super.
Ponadto, trzeba będzie dokonać layout:'vbox' dla superpanel i uczynić layout:'fit' dla pozostałych dwóch paneli podrzędnych

Oto w jaki sposób można to zrobić.

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

Źródło

2012-04-30 05:25:49

Nie sądzę, trzeba gniazdo każdą listę w panelu owijarki. Szczęśliwie umieszczam przewijane listy jako pierwszorzędne dzieci kontenerów vbox. Chociaż jeśli korzystasz z Vbox, powinieneś mieć wartość flex dla każdego dziecka, chyba że jest zadokowany. – bradgonesurfing

Ahh! Tęskniłem za tą własnością. Zastosowanie 'flex' pomoże obydwu listom uzyskać równą przestrzeń ... –

Sprawdzę to dwukrotnie, ale sądzę, że elastyczne rozwiązanie sprawia, że każda lista zajmuje dokładnie połowę wzrostu rodzica. (pozostawiając elementy listy do przewijania w obrębie każdej listy). Chciałbym, aby każda lista nie przewijała się i aby lista była pełna. Chcę, aby panel nadrzędny przewijał obie listy podrzędne, jako dzieci w systemie Vbox. (lub czy to zrobi twoje rozwiązanie?) – 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 
     } 
    ] 
});

Źródło

2012-04-30 10:40:28 thecodeparadox

wysokość put: 'auto' na elemencie listy

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

Źródło

2012-09-17 21:51:15

Jak utworzyć ekran dotykowy Sencha w układzie VBOX?

Odpowiedz

Powiązane problemy