2 lists in one Panel

[gerartje]

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?

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

[TommyMaintz]

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.

[gerartje]

doesn't seem to work :-(

[TommyMaintz]

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

[gerartje]

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!

[evant]

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

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.