Wie kann ich eine Sencha Touch-Liste in einem VBOX-Layout anzeigen lassen?

Ich habe ein Hauptpanel mit Layout auf vbox eingestellt. Ich möchte dem Panel ZWEI separate Listen hinzufügen. Ich möchte, dass die zwei Listen vertikal gestapelt erscheinen und wenn sie die Unterseite des Hauptfeldes überlaufen, sollte das Panel einfach scrollen.Wie kann ich eine Sencha Touch-Liste in einem VBOX-Layout anzeigen lassen?

Allerdings müssen Listen in einem FIT-Layout angezeigt werden, damit sie angezeigt werden können. Angepasste Layouts erlauben kein vertikales Stapeln von Artikeln.

Fehle ich eine Funktion des Layout-Systems, die es mir erlaubt, die Liste vollständig in einem Elternteil mit einem Vbox-Layout angezeigt anzuzeigen?

Quelle

2012-04-30 Paul

Ext.List Die Superklasse der Komponente ist Ext.DataView und nicht Ext.Panel.

Daher müssen Sie zwei Listen in zwei separaten Panels hinzufügen und diese zwei Panels in einem Super Panel hinzufügen.
Außerdem müssen Sie die layout:'vbox' für die superpanel machen und layout:'fit' für die beiden anderen Kind Platten

Hier machen, wie Sie es tun können.

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

Quelle

2012-04-30 05:25:49

Ich glaube nicht, Sie nisten müssen jede Liste in einem Wrapper-Panel. Ich stelle Scrolllisten sehr gerne als erste Klasse von Vbox-Containern zur Verfügung. Wenn Sie jedoch vbox verwenden, sollten Sie einen Wert für flex für jedes Kind haben, sofern nicht angedockt. – bradgonesurfing

Ahh! Ich vermisste diese Eigenschaft. Das Anwenden von "flex" hilft der Liste, den gleichen Platz zu bekommen ... –

ich werde dies überprüfen, aber ich denke, dass die Flex-Lösung jede Liste genau die Hälfte der Elternhöhe einnimmt. (Verlassen der Listenelemente, um in jeder Liste zu blättern). Ich möchte, dass jede Liste nicht scrollt und ihre Elemente vollständig auflistet. Ich möchte, dass das übergeordnete Bedienfeld die untergeordneten Listen als vbox untergeordnete Elemente durchläuft. (Oder wird Ihre Lösung das tun?) – 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 
     } 
    ] 
});

Quelle

2012-04-30 10:40:28 thecodeparadox

put Höhe: 'auto' auf der Liste Artikel

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

Quelle

2012-09-17 21:51:15

Wie kann ich eine Sencha Touch-Liste in einem VBOX-Layout anzeigen lassen?

Antwort

Verwandte Themen