Selection disappears when scolling in an infinite grid

[marcel.urbanek]

Hi,
I have discovered a problem when using selections and the infinite grid mode.

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.1 Build date: 2012-07-04 21:23:42

Browser versions tested against:

• Google Chrome 20.0.1132.57 m

Description:

• When activating infinite scrolling and selecting a row by mouse click the selection disappears when you scroll the selection far out of the visible area.

Steps to reproduce the problem:

• Use infinite scrolling (buffered: true, pageSize: 100) and select a row. When you scroll down and up again the selection isremoved. If you add a selectionchange listener you see that the selection is actually removed from the Selection Model.

The result that was expected:

• The selection should not be removed from the Selection Model when scrolling down and should be visible when scrolling back to the selected row again.

The result that occurs instead:

• The selection is removed and no longer shown.

[mitchellsimoens]

Have you tried setting pruneRemoved to false on the selection model?

[marcel.urbanek]

Hi,

I am not so sure how to do this. I tried:

grid.getSelectionModel().setPruneRemoved(false)

but there is no such method on my SelectionModel. I can not see a property named "pruneRemoved" in the debugger, either.
However

grid.getSelectionModel().pruneRemoved=false

works (of course) but has no effect.

I found a code snippet that sets the pruneRemoved property when contructing the grid, but the following also seems to have no effect:

        
        var grid = Ext.create('Ext.grid.Panel', {                
                plugins: [cellEditor],
                width: 100,
                height: 100,
                store: store,
                autoScroll:true,
                columns:config.columns,
                renderTo: Ext.get(config.id),
                selModel: {
                    pruneRemoved: true
                }
        });

[andrewx]

Try it like this:

pruneRemoved: false

        var grid = Ext.create('Ext.grid.Panel', {                                 plugins: [cellEditor],                 width: 100,                 height: 100,                 store: store,                 autoScroll:true,                 columns:config.columns,                 renderTo: Ext.get(config.id),                 selModel: {                     pruneRemoved: true                 }         });

[marcel.urbanek]

Hi, you are correct: I copied the wrong state of my JavaScript file. But of course I also tried with pruneRemoved:false .
I just tried "true" to see if it makes any difference - which it doesn't. So both setting don't work: true and false.

[marcel.urbanek]

Maybe one interesting information: When I select a row at the top, scroll down, select additionally a row at the bottom and scroll back to the top the selection at the top remains.
If I select a row at the top scroll down (without selecting additionally a row at the bottom) and scroll up again the selection at the top disappears.

[marcel.urbanek]

Hi,

can I help with additional information? If it is not reproducible for you, I could offer an access to our Showcase Application where this problem occurs.

[marcel.urbanek]

Hi,

the bug can be reproduced in the following example:

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/infinite-scroll-with-filter.html

Select a row at the top, scroll to the bottom and back up to the top: the selection disappears. The example has pruneRemoved: false set.

[marcel.urbanek]

Hm, for me the error is pretty good reproducible in the example. Are you still having problems reproducing the problem?
How can I help?

[Animal]

Yes, there's a bug.

The Record instance that was selected is indeed not being pruned from the SelectionModel's list.

But when that record get scrolled back into view, the actual Record instance is different, so when it looks it up to re-apply the selection, it's not there.

It should probably use the id to match the record to be selected.

Also, if, when refreshing the selection, the record attempting to be re-selected does not exist in the store, it's not replaced back into the selection collection (even though pruneRemoved is false)

Several bugs here.

Try these overrides:

Ext.override(Ext.selection.Model, {
    refresh: function() {
        var me = this,
            store = me.store,
            rec,
            toBeSelected = [],
            toBeReAdded = [],
            oldSelections = me.getSelection(),
            len = oldSelections.length,
            selection,
            change,
            i = 0,
            lastFocused = me.getLastFocused();

        // Not been bound yet.
        if (!store) {
            return;
        }

        // Add currently records to the toBeSelected list if present in the Store
        // If they are not present, and pruneRemoved is false, we must still retain the record
        for (; i < len; i++) {
            selection = oldSelections[i];
            if (store.indexOf(selection) !== -1) {
                toBeSelected.push(selection);
            }
            
            // Selected records no longer represented in Store must be retained
            else if (!me.pruneRemoved) {
                // See if a record by the same ID exists. If so, select it
                rec = store.getById(selection.getId());
                if (rec) {
                    toBeSelected.push(rec);
                }
                // If it does not exist, we have to re-add it to the selection
                else {
                    toBeReAdded.push(selection)
                }
            }
        }

        // there was a change from the old selected and
        // the new selection
        if (me.selected.getCount() != toBeSelected.length) {
            change = true;
        }

        me.clearSelections();

        if (store.indexOf(lastFocused) !== -1) {
            // restore the last focus but supress restoring focus
            me.setLastFocused(lastFocused, true);
        }

        if (toBeSelected.length) {
            // perform the selection again
            me.doSelect(toBeSelected, false, true);
        }

        me.maybeFireSelectionChange(change);

        // If some of the selections were not present in the Store, but pruneRemoved is false, we must add them back
        if (toBeReAdded.length) {
            me.selected.addAll(toBeReAdded);
        }
    }
});

And

Ext.override(Ext.view.AbstractView, {
    onMaskBeforeShow: function(){
        var me = this,
            loadingHeight = me.loadingHeight;

        me.getSelectionModel().deselectAll();
        me.all.clear();
        if (loadingHeight && loadingHeight > me.getHeight()) {
            me.hasLoadingHeight = true;
            me.oldMinHeight = me.minHeight;
            me.minHeight = loadingHeight;
            me.updateLayout();
        }
    }
});