PDA

View Full Version : 2 lists in one Panel



gerartje
6 Jul 2010, 6:23 AM
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
6 Jul 2010, 12:45 PM
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
6 Jul 2010, 1:40 PM
doesn't seem to work :-(

TommyMaintz
6 Jul 2010, 1:49 PM
Could you provide a bit more source code for us to work with?

gerartje
6 Jul 2010, 2:12 PM
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
6 Jul 2010, 11:03 PM
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.