Here's a piece of code showing the issue :
Code:
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.