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,306
    Vote Rating
    125
    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
    5,080
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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