PDA

View Full Version : How to position list on a panel



konki_vienna
22 Oct 2010, 12:50 AM
Hi,
i want to have three lists vertically next to each other. Each list shall have a certain height and each width shall be approximately 1/3 of the screen-width.

How can I manage to position three lists next to each other (vertically)?
THANK YOU VERY MUCH FOR AN ANSWER!

Stuart-SwarmOnline
22 Oct 2010, 1:07 AM
You could use an hbox layout?

konki_vienna
22 Oct 2010, 1:11 AM
In theory this would work, but unfortunately I do not manage to do so. Do you have some code to provide?

Stuart-SwarmOnline
22 Oct 2010, 1:25 AM
Something like...



// replace plain panels with lists
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
html: 'FIRST',
flex: 1
}, {
xtype: 'panel',
html: 'SECOND',
flex: 1
}, {
xtype: 'panel',
html: 'THIRD',
flex: 1
}]
}




Completely untested I'm afraid...

konki_vienna
22 Oct 2010, 3:20 AM
Hi Stoot98,
thanx for your fast and helpful reply.

I managed to get something similar I wanted to, but the list is still not scrollable.

The list (left block) should behave like the buttons-list (right block) -> be scrollable vertically...

Any suggestions?

I add my code:

var tabPanel;
var cardTwo;

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',

getGroupString : function(record) {
return record.get('lastName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});

cardTwo = new Ext.Panel({
fullscreen: true,
layout: 'card',
title: 'Card 1',
iconCls: 'bwinMyBets',
defaults:{
scroll:'vertical'
},
items: [{
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
cls: 'borderRed',
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
flex: 1,
scroll:'vertical',
cls: 'borderGreen'
},
items: [{items: [{
xtype: 'list',
html: 'FIRST',
tpl: '<tpl for="."><div class="contact">{firstName} <strong>{lastName}</strong></div></tpl>',

itemSelector: 'div.contact',
singleSelect: true,

store: store
}]
},{
items: []
},{
items: [{xtype: 'button', ui: 'action', text: 'Line 1'},{xtype: 'container', html: 'Line 1'},{xtype: 'button', ui: 'action', text: 'Line 2'},{xtype: 'container', html: 'Line 2'},{xtype: 'button', ui: 'action', text: 'Line 3'},{xtype: 'container', html: 'Line 3'},{xtype: 'button', ui: 'action', text: 'Line 4'},{xtype: 'container', html: 'Line 4'},{xtype: 'button', ui: 'action', text: 'Line 5'},{xtype: 'container', html: 'Line 5'},{xtype: 'button', ui: 'action', text: 'Line 6'},{xtype: 'container', html: 'Line 6'},{xtype: 'button', ui: 'action', text: 'Line 7'},{xtype: 'container', html: 'Line 7'},{xtype: 'button', ui: 'action', text: 'Line 8'},{xtype: 'container', html: 'Line 8'},{xtype: 'button', ui: 'action', text: 'Line 9'},{xtype: 'container', html: 'Line 9'},{xtype: 'button', ui: 'action', text: 'Line 10'},{xtype: 'container', html: 'Line 10'},{xtype: 'button', ui: 'action', text: 'Line 11'},{xtype: 'container', html: 'Line 11'},{xtype: 'button', ui: 'action', text: 'Line 12'},{xtype: 'container', html: 'Line 12'},{xtype: 'button', ui: 'action', text: 'Line 13'},{xtype: 'container', html: 'Line 13'},{xtype: 'button', ui: 'action', text: 'Line 14'},{xtype: 'container', html: 'Line 14'},{xtype: 'button', ui: 'action', text: 'Line 15'},{xtype: 'container', html: 'Line 15'},{xtype: 'button', ui: 'action', text: 'Line 16'},{xtype: 'container', html: 'Line 16'},{xtype: 'button', ui: 'action', text: 'Line 17'},{xtype: 'container', html: 'Line 17'},{xtype: 'button', ui: 'action', text: 'Line 18'},{xtype: 'container', html: 'Line 18'},{xtype: 'button', ui: 'action', text: 'Line 19'},{xtype: 'container', html: 'Line 19'},{xtype: 'button', ui: 'action', text: 'Line 20'},{xtype: 'container', html: 'Line 20'},{xtype: 'button', ui: 'action', text: 'Line 21'},{xtype: 'container', html: 'Line 21'},{xtype: 'button', ui: 'action', text: 'Line 22'},{xtype: 'container', html: 'Line 22'},{xtype: 'button', ui: 'action', text: 'Line 23'},{xtype: 'container', html: 'Line 23'},{xtype: 'button', ui: 'action', text: 'Line 24'},{xtype: 'container', html: 'Line 24'},{xtype: 'button', ui: 'action', text: 'Line 25'},{xtype: 'container', html: 'Line 25'},{xtype: 'button', ui: 'action', text: 'Line 26'},{xtype: 'container', html: 'Line 26'},{xtype: 'button', ui: 'action', text: 'Line 27'},{xtype: 'container', html: 'Line 27'},{xtype: 'button', ui: 'action', text: 'Line 28'},{xtype: 'container', html: 'Line 28'},{xtype: 'button', ui: 'action', text: 'Line 29'},{xtype: 'container', html: 'Line 29'},{xtype: 'button', ui: 'action', text: 'Line 30'},{xtype: 'container', html: 'Line 30'},{xtype: 'button', ui: 'action', text: 'Line 31'},{xtype: 'container', html: 'Line 31'},{xtype: 'button', ui: 'action', text: 'Line 32'},{xtype: 'container', html: 'Line 32'},{xtype: 'button', ui: 'action', text: 'Line 33'},{xtype: 'container', html: 'Line 33'},{xtype: 'button', ui: 'action', text: 'Line 34'},{xtype: 'container', html: 'Line 34'},{xtype: 'button', ui: 'action', text: 'Line 35'},{xtype: 'container', html: 'Line 35'},{xtype: 'button', ui: 'action', text: 'Line 36'},{xtype: 'container', html: 'Line 36'},{xtype: 'button', ui: 'action', text: 'Line 37'},{xtype: 'container', html: 'Line 37'},{xtype: 'button', ui: 'action', text: 'Line 38'},{xtype: 'container', html: 'Line 38'},{xtype: 'button', ui: 'action', text: 'Line 39'},{xtype: 'container', html: 'Line 39'},{xtype: 'button', ui: 'action', text: 'Line 40'},{xtype: 'container', html: 'Line 40'}]
}]
}]
}, {
flex: 2,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
cls: 'borderRed',
html: 'EVENTS'
}]
}]
}]
});

tabPanel = new Ext.TabPanel({
fullscreen: true,
ui: 'dark',
animation: { type: 'slide', direction: 'left' },//'fade',
activeItem: 0,
defaults:{
scroll:'vertical'
},
dockedItems:[{
dock: 'top',
id: 'titleBar_id',
xtype: 'toolbar',
title: 'Standard Titlebar',
items: [
/*{text: 'Back', ui: 'back', id:'prevBtn_id', handler: onPrevBtn, disabled: true},
{xtype: 'spacer'},
{text: 'Forward', ui: 'forward', id:'nextBtn_id', handler: onNextBtn}*/
]
}],
tabBar: {
centered:true,
dock:'bottom',
layout: {
type: 'hbox',
pack:'center'
}
},
animation: 'fade',
items: [
cardTwo
],
});
}
});

konki_vienna
22 Oct 2010, 3:51 AM
I found the answer: you have to add a height-parameter for the list... :)