All geek questions in one place

How do I display a Sencha Touch list in a VBOX layout?

I have a main panel with the layout installed in vbox. I want to add TWO separate lists to the panel. I want these two lists to be displayed vertically, and when they overflow the bottom of the main panel, the panel should just scroll.

However, for display it is necessary that the lists are displayed in the FIT layout. Fitting layouts does not allow vertical stacking of elements.

Am I missing the function of the layout system that allows me to tell that the list is fully displayed inside the parent with the vbox layout?

+6
source share
3 answers

Ext.List component superclass of Ext.DataView , not Ext.Panel .

Therefore, you will need to add two lists to two separate panels and add these two panels inside the super panel.
In addition, you will need to make layout:'vbox' for the super panel and make layout:'fit' for the other two child panels

Here is how you can do it.

 .... .... 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' } ] } ] }); .... ....
+3
source 
 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 } ] });
+1
source

put height: 'auto' in a list item

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

Source: https://habr.com/ru/post/914486/

More articles:


All Articles