PDA

View Full Version : Ext.list item height for menu navigation



JoshP
24 Jan 2011, 8:55 PM
Hi,

I've been trying to come up with a very simple list layout for navigation (user clicks on an item it goes to another page and there is a back button). After searching through the forums I've been playing around with the example below. It shows 3 records in the list however they are all scrunched up on the top of the screen. How would I go about centering them and dynamically changing the list height to fill up the screen depending on how many are there? Is there an easier way to do such a layout? Thanks!



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


var list = new Ext.List({
itemTpl: '<tpl for="."><div class="test"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.test',
singleSelect: true,

disclosure: {
scope: 'test',
handler: function(record, btn, index){
alert('Disclose more info for ' + record.get('firstName'));
}
},

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'
}]
}),
listeners: {
itemtap: function(list, index, item){
var rec = list.store.getAt(index),
cardId = 'card-' + rec.get('firstName'),
details = main.getComponent('details'),
card = details.getComponent(cardId);

if(!card){
card = details.add({
itemId: cardId,
html: rec.get('lastName')
});
}
main.getLayout().setActiveItem(1);
details.doLayout();
}
}

});

var main = new Ext.Panel({
fullscreen: true,
layout: 'card',
items:[list, {
layout: 'card',
itemId: 'details',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: {
text: 'Back',
handler: function(){
main.getLayout().setActiveItem(0);
}
}
}]
}]
});
}
});