pre-selection grid checkbox

[Ghurdyl]

Hello,

I'm trying to pre-select some rows in a grid when it is rendered.
This is a simple GridPanel with a JsonStore an a local array data source.

No matter what I try, I can't pre-select rows.
Actually, I can set rows as selected in the CheckboxSelectionModel but the view isn't updated.

If I just trigger the view.refresh() method after a short while, then I see the right checked items.

So it's as if there where a synchronization problem, or I don't use the right event.
But until now, I'm stuck ...

Any hint is welcome.
Thanks.

[conorarmstrong]

can we see some code? Are you using the RowSelectionModel methods to select???

Can't help much till we see something

[Ghurdyl]

Here's a piece of code showing the issue :

var MyGrid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        
        this.store = new Ext.data.JsonStore({
            autoDestroy: true,
            storId: 'testStoreId',
            fields: ['id', 'name']
        });
        
        this.selModel = new Ext.grid.CheckboxSelectionModel();
        
        this.colModel = new Ext.grid.ColumnModel({
            defaults: {
                sortable: true
            },
            columns : [{
                header: 'id',
                dataIndex: 'id',
                hidden: true
            }, {
                header: 'Name',
                dataIndex: 'name',
                width: 100
            }, this.selModel]
        });
        
        this.viewConfig = {
            forceFit: true,
            scrollOffset: 18
        };
    
        this.buttons = [{
            text : 'Force Refresh',
            handler: this.btnRefresh_click,
            scope: this
        }];
                    
        this.store.on('load', function(store, record){
            // pre-select records
            this.getSelectionModel().selectRecords([store.getAt(1)], true);
            this.getSelectionModel().selectRecords([store.getAt(2)], true);
            this.getView().refresh();
        }, this);
        
        MyGrid.superclass.initComponent.call(this);
        
        this.on('afterrender', function(){
            this.store.loadData([{
                id: '1',
                name: 'item 1'
            }, {
                id: '2',
                name: 'item 2'                    
            }, {
                id: '3',
                name: 'item 3'                    
            }, {
                id: '4',
                name: 'item 4'                    
            }, {
                id: '5',
                name: 'item 5'                    
            }]);
        }, this);

    },
    
    btnRefresh_click: function(btn, evt) {
        this.getView().refresh();
    }
});

Ext.onReady(function(){
    new Ext.Window({
        title: 'testWindow',
        width: 350,
        height: 200,
        layout: 'fit',
        items: [{
            xtype: 'tabpanel',
            activeItem: 0,
            items: [new MyGrid({
                title: 'MyGrid Panel',
                layout: 'fit',
                width: 'auto'
            })]
        }]
    }).show();
});

When the window opens, record 2 and 3 should be checked but no matter they are set as selected in the SelectionModel, they are not checked.
If you click the button, it will just call refresh() on the view and the checked lines will turn on.
I would like that those lines would automatically be checked without this "refresh" button I added.

[Ghurdyl]

none has any idea ?

[fay]

I think you've got to put your logic into the grid's viewready event:

 
this.on('viewready', function(grid){
  this.getSelectionModel().selectRows([1,2], true);
}

[Ghurdyl]

yay !
Million thanks that works just fine !