PDA

View Full Version : How to Scroll a list to the top that's inside a TabPanel?



ed.canas
3 Dec 2010, 1:15 PM
I'm calling the following function when I refresh my list long after it has been rendered, itemXref.scroller.scrollTo(0,0) - I get an error TypeError: Result of expression 'itemXref.scroller' [undefined] is not an object.
I only get this error when my list is inside a TabPanel, since I use it on other list outside a TabPanel. Am I missing some setting on the List or TabPanel, I tried setting scroll: 'vertical' on the tab where I have the list, or should I be calling some other method for scrolling inside the tab?

Also can this feature be added to Sencha, so that whenever the lists gets refreshed to auto scroll to the top since if you refresh a list and you are at the bottom of a large list and the refresh data only has a few lines it won't display at all if you did not scrolled it back to the top before refreshing.

See Code below:


var itemXref = new Ext.List({
store: OISiMobile.ItemXrefStore,
itemTpl: '<div class="itemXrefList">' +
'<div>[{code}] {name}</div>' +
'<span>QTY: {qty}</span>' +
'<span>PRC: {price}</span>' +
'<total>{total}</total>' +
'</div>',
singleSelect: true,
grouped: false,
indexBar: false,
listeners: {
"itemtap": itemXrefTab
}
});

OISiMobile.Order = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
},
listeners: {
change: function(tabbar, tab, card) {
if (tab.getText() == 'Items') showEditButton(true);
else {
if (tab.getText() == 'Total') calcTotal();
showEditButton(false);
}
}
}
},
cardSwitchAnimation: {
type: 'slide',
cover: true
},
items: [{
title: 'Account',
iconCls: 'user',
cls: 'tabGrayBack',
scroll: 'vertical',
dockedItems: [searchAccountToolbar],
items: [accounts]
},
{
title: 'Items',
iconCls: 'icnPage',
cls: 'tabGrayBack',
layout: 'fit',
dockedItems: itemXrefToolbar,
items: [itemXref]
},
{
title: 'Total',
iconCls: 'icnCalc',
cls: 'tabGrayBack',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
height: Ext.is.Phone ? 40: undefined,
items: [
{
xtype: "spacer"
},
{
text: 'Menu',
xtype: 'button',
handler: showordermenu
},
{
text: 'Save',
xtype: 'button',
id: 'btnSave',
ui: 'action',
handler: saveOrder
}]
}],
items: [tplTotal]
}]
});

Steffen Hiller
3 Dec 2010, 6:05 PM
Can't see anything wrong with your code. Though can't see where you refresh or call that scroller code.
Try to build a standalone example to reproduce your problem. Either you find the reason yourself while building it, or someone here can help.

ed.canas
3 Dec 2010, 9:01 PM
Thanks for the tip, it's hard taking down your code down to basics. Found out if I tried to scroll without first adding any data to the list is when it fails, now I check to mare sure that the list has been initialized ounce before I try to scroll to the top.