PDA

View Full Version : Grouped List view jumps to last header when scrolled



schvenk
28 Nov 2010, 7:53 PM
I love the built-in grouping / indexBar functionality in the List view, but I'm having an issue: when I scroll the list down (so the first header should stick at the top) it's actually the last header that does. That is, if my list is indexing on the first letter of each item, i.e.


...
getGroupString: function(rec) {
return rec.get('name')[0];
}
...

then instead of the "A" header sticking at the top when I begin to scroll, the "Z" one does. Everything else works fine (the grouping itself, the index bar, etc.)

Any idea what might be happening?

schvenk
10 Jan 2011, 7:20 AM
Hmm...no thoughts on this? Still seeing this problem. And, a further one that may be related: in these same grouped lists, the index bar doesn't work until the list is scrolled. That is, nothing happens when you interact with the index bar at first. If you scroll the list itself even a little bit and then go back to the index bar it works fine.

markguinn
31 Mar 2011, 4:06 AM
No clue on your original question, but the answer to your second issue can be found here: http://www.sencha.com/forum/showthread.php?127735-Indexbar-Scrolling-issue

chrigu
30 Jun 2011, 12:41 PM
I have exactly the same problem and it seems like still not fixed (the problem that the group label is showing the last letter)

MrSlayer
12 Sep 2011, 3:50 PM
I encountered the same problems as described in this post. The grouping header was jumping to Y (my last group) whenever I scrolled and the indexBar was not working until I scrolled at least a pixel.

I tried a variation of the solution provided here (http://www.sencha.com/forum/showthread.php?127735-Indexbar-Scrolling-issue&p=586165&viewfull=1#post586165), and while it didn't fix the indexBar (like it should have), it did resolve the grouping headers. Here is the code to my view, before and after the modification:

Before

App.views.ArtistListPanel = Ext.extend( Ext.Panel,
{
initComponent :
function ( )
{
this.store = new Ext.data.Store(
{
autoLoad : true,
getGroupString :
function ( record )
{
return record.get( 'name' )[0];
},
model : 'Artist',
sorters : ['name']
} );

this.dockedItems = [
{
xtype : 'toolbar',
dock : 'top',
items :
[
{ xtype : 'spacer' },
{ xtype : 'spacer' }
],
title : 'Artists'
} ];

this.list = new Ext.List(
{
itemTpl : '<strong>{name}</strong>',
grouped : true,
indexBar : true,
store : this.store
} );

this.items = [this.list];

App.views.ArtistListPanel.superclass.initComponent.apply( this, arguments );
},
layout : 'fit'
} );

Ext.reg( 'artist-listpanel', App.views.ArtistListPanel );

After

App.views.ArtistListPanel = Ext.extend( Ext.Panel,
{
initComponent :
function ( )
{
this.store = new Ext.data.Store(
{
autoLoad : true,
getGroupString :
function ( record )
{
return record.get( 'name' )[0];
},
model : 'Artist',
sorters : ['name']
} );

this.dockedItems = [
{
xtype : 'toolbar',
dock : 'top',
items :
[
{ xtype : 'spacer' },
{ xtype : 'spacer' }
],
title : 'Artists'
} ];

this.list = new Ext.List(
{
itemTpl : '<strong>{name}</strong>',
grouped : true,
indexBar : true,
store : this.store
} );

if ( this.list.scroller )
{
if ( this.list.scroller.offsetBoundary.top == 0 )
{
this.list.scroller.updateBoundary( );
}
}

this.items = [this.list];

App.views.ArtistListPanel.superclass.initComponent.apply( this, arguments );
},
layout : 'fit'
} );

Ext.reg( 'artist-listpanel', App.views.ArtistListPanel );

Perhaps this can help with your issue.

edspencer
13 Sep 2011, 10:33 PM
Urgh, never seen this issue before... it's scant consolation but the new one in 2.x is looking pretty hot and is receiving a lot more attention than the old 1.x implementation. We'll be releasing the first beta very soon so I hope you can hold on another week or two

topquark
21 Oct 2011, 12:26 PM
if ( this.list.scroller )
{
if ( this.list.scroller.offsetBoundary.top == 0 )
{
this.list.scroller.updateBoundary( );
}
}




Thank you so much. I was having the last header problem and adding your code for this.list.scroller to the initComponenet of the view did the exact trick.

Cheers
Tq

topquark
21 Oct 2011, 12:39 PM
Dang. Spoke too soon. It worked when the list originally appears, but when I click to another panel on the TabPanel, and then back, the original buggy behaviour reappears.

It seems to be related to when I have more than one grouped list in my app. Strange. Maybe fixed in Version 2 (can't wait to try integrating).

priya gupta
14 Dec 2011, 12:32 AM
I have created the group list with index bar. But the list is not behaving in the requiered fashion.
List displays with index bar for the first time but when I reload the window then I am able to see the index bar in my list..

I dont know what is the issue I have created the list again and again from the examples and demos but there is no change.

Please help me what should I do for index bar to be displayed for the first time

tyagi.anuj
23 Apr 2012, 4:25 PM
Thanks a lot MrSlayer... Your solution worked perfectly!!!