1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    53
    Vote Rating
    0
    dukeyboy is on a distinguished road

      0  

    Default Does the infinite scrolling grid remember row selections?

    Does the infinite scrolling grid remember row selections?


    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?

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    No, infinite scrolling does not currently support maintaining selection across the entire dataset. This feature will be coming in the future.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Posts
    20
    Vote Rating
    1
    jump23 is on a distinguished road

      1  

    Default Workaround

    Workaround


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

    In the grid config:


    Code:
        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:



    Code:
    		
    '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.

  4. #4
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    That's a clever way of handling it!

    stevil

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    1
    matukas is on a distinguished road

      1  

    Default


    I hope somebody could use it
    Code:
    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:

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

  7. #7
    Ext Premium Member
    Join Date
    Oct 2010
    Posts
    7
    Vote Rating
    0
    kaslakhanova is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. Replies: 5
    Last Post: 3 Aug 2011, 11:23 AM
  2. grid remember selection
    By pex in forum Ext 1.x: Help & Discussion
    Replies: 11
    Last Post: 22 Feb 2011, 9:46 AM

Thread Participants: 6