View Full Version : pre-selection grid checkbox

25 Mar 2011, 8:43 AM

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.

25 Mar 2011, 8:59 AM
can we see some code? Are you using the RowSelectionModel methods to select???

Can't help much till we see something

27 Mar 2011, 11:48 PM
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);


this.on('afterrender', function(){
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) {

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'
});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.

30 Mar 2011, 2:14 AM
none has any idea ? :((

30 Mar 2011, 2:36 AM
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);

30 Mar 2011, 3:21 AM
yay !
Million thanks that works just fine ! :D