PDA

View Full Version : Problem scrolling a list



xgdlm
4 Jul 2010, 3:00 PM
Hello all,

I cannot figure out how to scroll to the bottom of a list using the following code.
The list scrolls and then scrolls back to the first elements.

What I'm I missing ?

Thanks in advance for help :)




Ext.ns('demos', 'Ext.ux');

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

demos.ListStore = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',
getGroupString : function(record) {
return record.get('firstName')[0];
},
data: [
{firstName: 'Julio', lastName: 'Benesh'},
{firstName: 'Julio', lastName: 'Minich'},
{firstName: 'Tania', lastName: 'Ricco'},
{firstName: 'Odessa', lastName: 'Steuck'},
{firstName: 'Nelson', lastName: 'Raber'},
{firstName: 'Tyrone', lastName: 'Scannell'},
{firstName: 'Allan', lastName: 'Disbrow'},
{firstName: 'Cody', lastName: 'Herrell'},
{firstName: 'Julio', lastName: 'Burgoyne'},
{firstName: 'Jessie', lastName: 'Boedeker'},
{firstName: 'Allan', lastName: 'Leyendecker'},
{firstName: 'Javier', lastName: 'Lockley'},
{firstName: 'Guy', lastName: 'Reasor'},
{firstName: 'Jamie', lastName: 'Brummer'},
{firstName: 'Jessie', lastName: 'Casa'},
{firstName: 'Marcie', lastName: 'Ricca'},
{firstName: 'Gay', lastName: 'Lamoureaux'},
{firstName: 'Althea', lastName: 'Sturtz'},
{firstName: 'Kenya', lastName: 'Morocco'},
{firstName: 'Rae', lastName: 'Pasquariello'},
{firstName: 'Ted', lastName: 'Abundis'},
{firstName: 'Jessie', lastName: 'Schacherer'},
{firstName: 'Jamie', lastName: 'Gleaves'},
{firstName: 'Hillary', lastName: 'Spiva'},
{firstName: 'Elinor', lastName: 'Rockefeller'},
{firstName: 'Dona', lastName: 'Clauss'},
{firstName: 'Ashlee', lastName: 'Kennerly'},
{firstName: 'Alana', lastName: 'Wiersma'},
{firstName: 'Kelly', lastName: 'Holdman'},
{firstName: 'Mathew', lastName: 'Lofthouse'},
{firstName: 'Dona', lastName: 'Tatman'},
{firstName: 'Clayton', lastName: 'Clear'},
{firstName: 'Rosalinda', lastName: 'Urman'},
{firstName: 'Cody', lastName: 'Sayler'},
{firstName: 'Odessa', lastName: 'Averitt'},
{firstName: 'Ted', lastName: 'Poage'},
{firstName: 'Penelope', lastName: 'Gayer'},
{firstName: 'Katy', lastName: 'Bluford'},
{firstName: 'Kelly', lastName: 'Mchargue'},
{firstName: 'Kathrine', lastName: 'Gustavson'},
{firstName: 'Kelly', lastName: 'Hartson'},
{firstName: 'Carlene', lastName: 'Summitt'},
{firstName: 'Kathrine', lastName: 'Vrabel'},
{firstName: 'Roxie', lastName: 'Mcconn'},
{firstName: 'Margery', lastName: 'Pullman'},
{firstName: 'Avis', lastName: 'Bueche'},
{firstName: 'Esmeralda', lastName: 'Katzer'},
{firstName: 'Tania', lastName: 'Belmonte'},
{firstName: 'Malinda', lastName: 'Kwak'},
{firstName: 'Tanisha', lastName: 'Jobin'},
{firstName: 'Kelly', lastName: 'Dziedzic'},
{firstName: 'Darren', lastName: 'Devalle'},
{firstName: 'Julio', lastName: 'Buchannon'},
{firstName: 'Darren', lastName: 'Schreier'},
{firstName: 'Jamie', lastName: 'Pollman'},
{firstName: 'Karina', lastName: 'Pompey'},
{firstName: 'Hugh', lastName: 'Snover'},
{firstName: 'Zebra', lastName: 'Evilias'}
]
});


demos.List = new Ext.Panel({
dockedItems:[new Ext.Toolbar({
dock: 'top',
title: 'Sink',
items: [{
text: 'Retour',
ui: 'action_round',
hidden:true
}]
})],
items: [{
xtype: 'list',
store: demos.ListStore,
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
}]
});


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var viewport = new Ext.TabPanel({
fullscreen:true,
tabBar: {
dock: 'bottom',
ui: 'light',
layout: {
pack: 'center'
}
},
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical',
},
items: [{
title: 'About',
html: '<p>card1</p>',
iconCls: 'info',
cls: 'card card1'
},
{
title: 'Favorites',
items:[demos.List],
iconCls: 'favorites',
//cls: 'card card2',
badgeText: '4'
}]
});
}
});

xgdlm
4 Jul 2010, 6:10 PM
Seems that adding layout:'fit' in defaults of the TabPanel works.

TommyMaintz
5 Jul 2010, 1:59 PM
Yeah, thats because if you don't give the card a layout, the List will just be given an auto height. This makes the list thing that there is nothing to scroll. You could either set scroll: false on the List, and add scroll: 'vertical' to the overall TabPanel or to the card that contains the list. Or like you said layout: 'fit' on the card that contains the list will make the list as high as the card, meaning that the scroll will work. The last (and probably the best option) is to prevent overnesting and add the List directly as a child of the TabPanel. Just move the title, iconCls and badgeText as properties of the List.

xgdlm
7 Jul 2010, 11:39 PM
Thanks for your clear answer