Does the infinite scrolling grid remember row selections?

[dukeyboy]

If I scroll around using the infinite scrolling grid and select rows in various ways using control click or shift click, does the infinite scrolling grid remember the selected rows?

[aconran]

No, infinite scrolling does not currently support maintaining selection across the entire dataset. This feature will be coming in the future.

[jump23]

As a temporary workaround for this, I just did this:

In the grid config:

    viewConfig: {
        listeners: {'refresh': function(view, opt){
        	var grid = Ext.getCmp('searchgrid');
        	var store = grid.store;

        	for (var i in grid.persistedSelections) {
        		var index = store.findExact('_id',i);
        		if (index != -1) {
        			grid.getSelectionModel().select(index,true,true);
        		}
        	}
        }}
    },

And a listener for the grid itself:

		
'selectionchange': function(view, arr, options){
			var grid = Ext.getCmp('searchgrid');
			if (grid.persistedSelections == undefined) {
				grid.persistedSelections = {};
			}

			Ext.Array.each(arr,function(rec) {
				grid.persistedSelections[rec.get('_id')] = 1;
			});
		},

Obviously, if you need to get all of the ids of ALL selected records, you can't just use the selectionmodel - it has to be grid.persistedSelections. You could also save the records themselves there.

[stevil]

That's a clever way of handling it!

stevil

[slemmon]

Any idea if "coming in the future" mean 4.1?
Don't worry. I won't hold you to it.

[matukas]

I hope somebody could use it

var dataUrl = 'www.example.com/pagable/data';

Ext.define('StoreModel', {
    extend: 'Ext.data.Model',
    fields: ['id','value']
});


var bufferedStore = Ext.create('Ext.data.Store',{

     model: 'StoreModel',

    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    // The topics-remote.php script appears to be hardcoded to use 50, and ignores this parameter, so we
    // are forced to use 50 here instead of a possibly more efficient value.
    pageSize: 50,
    // This web service seems slow, so keep lots of data in the pipeline ahead!
    leadingBufferZone: 1000,

    proxy: {
        type: 'ajax',
        url: dataUrl,
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});


Ext.define('ScrollPagingGridWithMultiSelect', {
    alias: 'widget.ScrollPagingGridWithMultiSelect',
    extend:'Ext.grid.Panel',
 
    store: bufferedStore,

    // checkbox selection column
    selModel: Ext.create('Ext.selection.CheckboxModel'),

    //selected record collection
    persistedSelections:  Ext.create('Ext.util.MixedCollection', false, function(rec){return rec.getId()}),

    initComponent:function(){
        var me = this;
        me.addEvents('persistedselectionsadd', 'persistedselectionsremove', 'persistedselectionsclear')
        Ext.apply(me, {
            columns:[
                { text:'Id'   , dataIndex: 'id'   },
                { text:'Value', dataIndex: 'value'}
            ],
            viewConfig: { listeners: { refresh : me.onViewRefreshHandler, scope   : me} },
            listeners:{
                beforeselect  : function(selModel, record) { me.persistedSelections.add(record);   },
                beforedeselect: function(selModel, record) { me.persistedSelections.remove(record);}
            }
        });
        me.mon(me.persistedSelections,{
            add     : function(index, record, key, eOpts){me.fireEvent('persistedselectionsadd'   , me, me.persistedSelections, record, index, key)},
            remove  : function(record, key, eOpts)       {me.fireEvent('persistedselectionsremove', me, me.persistedSelections, record, key)},
            clear   : function(eOpts)                    {me.fireEvent('persistedselectionsclear' , me, me.persistedSelections)               }
        });
        me.callParent(arguments);

        me.on({
            'persistedselectionsadd'   : function(){console.log(arguments)},
            'persistedselectionsremove': function(){console.log(arguments)},
            'persistedselectionsclear' : function(){console.log(arguments)}
        });
    },

    onViewRefreshHandler: function(view, opt){
        var grid = this;

        if( !grid.persistedSelections.length ) return;

        var store = grid.store,
            selModel = grid.getSelectionModel(),
            persistedSelectionsLn = grid.persistedSelections.length,
            storeLn = store.getCount(),
            index, eachFn, eachFnScope, indexFn, indexFnScope, getIndexFromStore;

        if( persistedSelectionsLn > storeLn ){
            eachFn = store.data.eachKey;
            eachFnScope = store.data;
            indexFn = grid.persistedSelections.indexOfKey;
            indexFnScope = grid.persistedSelections;
            getIndexFromStore = true;
        }else{
            eachFn = grid.persistedSelections.eachKey;
            eachFnScope =  grid.persistedSelections;
            indexFn = store.indexOfId;
            indexFnScope = store;
            getIndexFromStore = false;
        }

        eachFn.call(eachFnScope, function(key){
            var key = key >>> 0;

           if( -1 < (index = indexFn.call(indexFnScope, key)) ){
                if(getIndexFromStore){
                    index = store.indexOfId(key);
                }
                selModel.select(index,true,true);
            }
        });
    },

    getSelectedRecords:function(){
        return this.persistedSelections.getRange();
    },
    clearSelectedRecords:function(){
        if(this.persistedSelections){
            this.persistedSelections.clear();
        }
        this.selModel.clearSelections();
    }
});

Server response could be:

{"success":true,"total":499,"items":[{"id":"1","value":"name-1"}, {"id":"2","value":"name-2"}]}

[kaslakhanova]

Are there any improvements added to Ext JS 4.1.3 to resolve the infinite scrolling grid with CheckboxModel?

Is the solution suggested by jump23 (Big Thanks!) a best way to go about it at this time?

Thank you.