2 lists in one Panel

Hello,

is it true that you can't define 2 lists in one panel?
I've made 2 custom lists and want them to put below each other.
But there's only 1 visible.

Any thoughts?

Code:

---


var onStageData = [
{"img":"img/t/1.png","name":"I qsdf qsdf", "time":"Vr 9/7 17:35 - 18:25"},
{"img":"img/t/2.png","name":"qsdf", "time":"Vr 9/7 18:55 - 19:55"},
{"img":"img/t/3.png","name":"qsdf", "time":"Vr 9/7 20:25 - 21:25"},
{"img":"img/t/4.png","name":"qsdf qsdf & qdsf", "time":"Vr 9/7 21:55 - 23:05"},
{"img":"img/t/5.png","name":"qsdf qsdf", "time":"Vr 9/7 23:35 - 01:00"}
]

var offStageData = [
{"img":"img/t/1.png","name":"Het qsdf - Les Frères d'Epinière", "time":"Vr 9/7 16:00 - 00:00"},
{"img":"img/t/1.png","name":"Eef qsdf", "time":"Vr 9/7 doorlopend"},
{"img":"img/t/1.png","name":"B-qsdf", "time":"Vr 9/7 doorlopend"},
{"img":"img/t/1.png","name":"qdsf zoals qsdf qsdf", "time":"Vr 9/7 doorlopend"},
{"img":"img/t/1.png","name":"qsdf", "time":"Vr 9/7 doorlopend"},
{"img":"img/t/1.png","name":"qsdf", "time":"Vr 9/7 doorlopend"}
]



var onStageComp = new Ext.Component({
        cls: 'list',   
        scroll: 'vertical',
        tpl: [             
          '<tpl for=".">',
            '<div class="artist_day">',
              '<div class="avatar"><img src="{img}" />',
              '<div class="artist_day_content">',
                '<h2>{name}</h2>',
                '<p>{time}</p>', 
              '</div>',
            '</div>',
        '</tpl>'
      ]
    });
       
       
var offStageComp = new Ext.Component({
        cls: 'list',   
        scroll: 'vertical',
        tpl: [             
          '<tpl for=".">',
            '<div class="artist_day">',
              '<div class="avatar"><img src="{img}" />',
              '<div class="artist_day_content">',
                '<h2>{name}</h2>',
                '<p>{time}</p>', 
              '</div>',
            '</div>',
        '</tpl>'
      ]   
         
        });

       

       

ns.dagenDetail1 = new Ext.Panel(
{
        layout:
        {
                type:"vbox"
        },
        title:"info", 
        items: [
                onStageComp,offStageComp
        ] 
});


onStageComp.update(onStageData);
offStageComp.update(offStageData);

---

Try setting a vbox layout on the container that contains both the lists. Then give each one a flex of 1 to have them take up half the space. You could also just set scroll: 'vertical' on the container and scroll: false on both lists.

doesn't seem to work :-(

Could you provide a bit more source code for us to work with?

I have a mainPanel which has a cardLayout.
The code in the first post is one of the cards.

I've only added your possible solutions to the code above, but they don't seem to work.
I can't get 2 different lists in one panel.

Tnx!

Here's an example of putting 2 lists in a panel:

Code:

---

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function(){
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });
       
        var groupingBase = {
            tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
            itemSelector: 'div.contact',
           
            singleSelect: true,
            grouped: true,
            indexBar: true,
            flex: 1
        };
       
        var list1 = new Ext.List(Ext.apply({
            store: new Ext.data.Store({
                model: 'Contact',
                sorters: 'firstName',
               
                getGroupString: function(record){
                    return record.get('firstName')[0];
                },
               
                data: [{
                    firstName: 'Tommy',
                    lastName: 'Maintz'
                }, {
                    firstName: 'Ed',
                    lastName: 'Spencer'
                }, {
                    firstName: 'Jamie',
                    lastName: 'Avins'
                }]
            })
        }, groupingBase));
       
        var list2 = new Ext.List(Ext.apply({
            store: new Ext.data.Store({
                model: 'Contact',
                sorters: 'firstName',
               
                getGroupString: function(record){
                    return record.get('firstName')[0];
                },
               
                data: [{
                    firstName: 'Aaron',
                    lastName: 'Conran'
                }, {
                    firstName: 'Abe',
                    lastName: 'Elias'
                }, {
                    firstName: 'Michael',
                    lastName: 'Mullany'
                }]
            })
        }, groupingBase));
       
        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items:[list1, list2]
        });
    }
});

---

To put them side by side, use an hbox layout instead.