Make gridpanel checkbox readonly by default - extjs

Question

I have a gridpanel with few items and checkboxes. i want a specific item in the gridpanel to be checked and readonly by default (the checked value cannot be changed by user). How should i do that? My code is as follows:
var MyCheckboxModel = Ext.create('Ext.selection.CheckboxModel', {
mode : 'SIMPLE',
listeners : {
selectionchange : function(selectionModel) {
}
},
});
var userCheckboxContainersStore = Ext.create('Ext.data.Store', {
storeId: 'userCheckboxStore',
fields: ['data'],
data: [
{ data: 'Item 1'},
{ data: 'Item 2' },
{ data: 'Item 3'},
{ data: 'Item 4'},
{ data: 'Item 5'},
]
});
var userCheckboxGridPanel = Ext.create('Ext.grid.Panel', {
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
border : 0,
bodyStyle : {
backgroundColor : 'transparent'
}
},
store: CheckboxContainersStore,
selModel: MyCheckboxModel,
title: 'Item List',
columns: [
{ dataIndex: 'data'},
]
});
I want 'Item 1' to be checked by default and readonly. Any suggestions would be appreciated

Answer 1

You need something like this, here you can try a fiddle
You can't work with readonly true, but instead you can work with selections of the grid, and make sure the item1 will never be unselected.
Ext.application({
name: 'Fiddle',
launch: function () {
var MyCheckboxModel = Ext.create('Ext.selection.CheckboxModel', {
mode: 'SIMPLE',
listeners: {
selectionchange: function (selectionModel) {}
},
});
var userCheckboxContainersStore = Ext.create('Ext.data.Store', {
storeId: 'userCheckboxStore',
fields: ['data'],
data: [{
data: 'Item 1'
}, {
data: 'Item 2'
}, {
data: 'Item 3'
}, {
data: 'Item 4'
}, {
data: 'Item 5'
},
]
});
var userCheckboxGridPanel = Ext.create('Ext.grid.Panel', {
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
border: 0,
bodyStyle: {
backgroundColor: 'transparent'
}
},
store: userCheckboxContainersStore,
selModel: MyCheckboxModel,
title: 'Item List',
columns: [{
dataIndex: 'data'
}],
listeners: {
render: function (gridPanel) {
gridPanel.setSelection(userCheckboxContainersStore.getAt(0));
gridPanel.on('itemclick', function (panel, selected) {
if (selected.id === userCheckboxContainersStore.getAt(0).id) {
var newSelection = gridPanel.getSelection();
if (newSelection.indexOf(selected) === -1)
newSelection.push(selected);
gridPanel.setSelection(newSelection);
}
});
}
},
renderTo: Ext.getBody()
});
}
});

Answer 2

Another way of implementation would be like this.
var MyCheckboxModel = Ext.create('Ext.selection.CheckboxModel', {
mode: 'SIMPLE',
checkOnly: true,
listeners: {
beforedeselect: function(grid, record, index, eOpts) {
if (record.get('data') == "Item 1") {
return false;
}
}
}
});
var userCheckboxContainersStore = Ext.create('Ext.data.Store', {
storeId: 'userCheckboxStore',
fields: ['data'],
data: [{
data: 'Item 1'
}, {
data: 'Item 2'
}, {
data: 'Item 3'
}, {
data: 'Item 4'
}, {
data: 'Item 5'
},
]
});
var userCheckboxGridPanel = Ext.create('Ext.grid.Panel', {
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
border: 0,
bodyStyle: {
backgroundColor: 'transparent'
}
},
listeners: {
'viewready': function(grid) {
grid.selModel.doSelect(grid.store.data.items[0]);
}
},
store: userCheckboxContainersStore,
selModel: MyCheckboxModel,
title: 'Item List',
columns: [{
dataIndex: 'data'
}],
renderTo: Ext.getBody()
});
Updated Fiddle: http://jsfiddle.net/y61yo7sx/1/