Make gridpanel checkbox readonly by default

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

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/

Answer 2

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()
            });
        }
    });