Disable selected checkboxes in checkcolumn of ExtJSTreeGrid?

I have recenty faced interesting problem. I needed TreeGrid component with checkcolumn. Easy, just add tree with column config.

Problems occurred when I needed to disable checkboxes in certain rows. ExtJS doesn't allow this. You can only disable whole column. I needed a solution, that will disable selected items (block checkchange event and change look of this elements - so the look like rest disabled things in ExtJS) and won't break checkcolumn used in other places of application

Using own renderer for checkcolumn wasn't possible. It would break whole column and it wasn’t recommended by Sencha devs. On Internet I have found similar problems and a lot solution, but none of them suited me. So after few tries I managed to solve this problem. Below I describe fix for ExtJS 5.1 (soon I will prepare 4.2 version).

For start I have create override for Ext.grid.column.CheckColumn class. For  processEvent (event proccessing for checkbox element) and second for defaultRenderer.

Ext.grid.column.CheckColumn.override({  
           processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {  
                var me = this,  
                  key = type === 'keydown' && e.getKey(),  
                  mousedown = type == 'mousedown';  
                if (!me.disabled && (mousedown || (key == e.ENTER || key == e.SPACE))) {  
                  var checked = !me.isRecordChecked(record);  
                  if(record.get(me.dataIndex) === null){  
                      return false;  
                  }  
                  if (me.fireEvent('beforecheckchange', me, recordIndex, checked) !== false) {  
                     me.setRecordCheck(record, checked, cell, row, e);  
                     me.fireEvent('checkchange', me, recordIndex, checked);  
                     if (mousedown) {  
                       e.stopEvent();  
                     }  
                     if (!me.stopSelection) {  
                       view.selModel.selectByPosition({  
                          row: recordIndex,  
                          column: cellIndex  
                       });  
                     }  
                     return false;  
                  } else {  
                     return !me.stopSelection;  
                  }  
                } else {  
                  return me.callParent(arguments);  
                }  
           },  
           defaultRenderer : function(value, cellValues) {  
                var cssPrefix = Ext.baseCSSPrefix,  
                cls = cssPrefix + 'grid-checkcolumn';  
                if (this.disabled) {  
                     cellValues.tdCls += ' ' + this.disabledCls;  
                }  
                if (value === null) {  
                    cellValues.tdCls += ' ' + this.disabledCls;                     
                }  
                if (value) {  
                     cls += ' ' + cssPrefix + 'grid-checkcolumn-checked';  
                }  
                return '<img class="' + cls + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';  
           }  
      });  

I have marked red colour changes. Condition in proccessEvent return false if field related to checkcolumn has null (so checkchange event is not fired and elemnt doesn't change look when user click on it). Change in defaultRenderer adds CSS class (class for disabled elemnts) if value of rendered cell is null.

Now all we need is to create store and Tree Panel.

 var store = Ext.create('Ext.data.TreeStore', {  
           root: {  
                expanded: true,  
                children: [  
                     { text: "Office", leaf: true, isWorking: true },  
                     { text: "Finances", expanded: true, isWorking: false, children: [  
                          { text: "Personal", leaf: true, isWorking: null},  
                          { text: "Corporate", leaf: true, isWorking: false}  
                          ] },  
                     { text: "Legal Department", leaf: true , isWorking: null}  
                ]  
           }  
      });  
      Ext.create('Ext.tree.Panel', {  
           title: 'CheckColumn Tree',  
           store: store,  
           height: 400,  
           rootVisible: false,  
           renderTo: Ext.getBody(),  
           columns: [{  
                xtype: 'treecolumn',  
                text: 'Name',  
                flex: 2,  
                sortable: true,  
                dataIndex: 'text'  
           },{  
                xtype: 'checkcolumn',  
                text: 'Working',  
                flex: 1,  
                sortable: true,  
                dataIndex: 'isWorking',  
                align: 'center',  
                listeners: {  
                     checkchange: {  
                       fn: function(checkcolumn, rowIndex, checked, eOpts ){ console.log('Row %s checked change', rowIndex); }  
                     }  
                }  
           }]  
      });  

In this example checkcolunm is bind to isWorking field from root config from store. If I need to disable selected checkbox, I just to assign null value to certain field.

Normaly for Tree I would use store with model defintion (I'm lazy). So for tree with configured model there must be one change. 'isWOrking' field's config must have useNull set tu true (so null won't be converted to false).

 Ext.define('MyExampleApp.model.tree.exampleTreeModel', {  
   extend: 'Ext.data.Model',  
   requires: [  
     'Ext.data.Field'  
   ],  
   fields: [  
     {  
       name: 'text',  
       type: 'string'  
     },  
     {  
       name: 'leaf',  
       type: 'boolean'  
     },  
     {  
       name: 'expanded',  
       type: 'boolean'  
     },  
     {  
       name: 'isWorking',  
       type: 'boolean',  
       useNull: true  
     },  
   ]  
 });  

Below screenshoot with disabled checkboxes of selected rows.

Source files for this example: disable-tree-checkcolumn.zip