Grouped List view jumps to last header when scrolled

[schvenk]

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]

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]

No clue on your original question, but the answer to your second issue can be found here: http://www.sencha.com/forum/showthre...crolling-issue

[chrigu]

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]

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, 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]

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]

            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]

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]

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]

Thanks a lot MrSlayer... Your solution worked perfectly!!!