extjscheckboxrenderer

Extjs : How to enable/disable a checkbox using renderer while loading a grid


I need to load a grid based on the query results I get. I am not having any issues with loading the text fields in the grid but there is one particular column which is a check box type. I am using the xtype: 'checkcolumn' for this purpose. The object that returns the query results returns a "Y" or "N" for this particluar column. If it is "Y", I need to enable the checkbox and if it is "N", the checkbox should be disabled. I am using the following code for defining my checkbox field.

 {
        xtype: 'checkcolumn',
        header: "Old User",
        disabled: true,
        disabledCls:'x-item-enabled',
        width: 170,
        dataIndex: 'oldUser',
        itemId: 'oldUser',
        renderer: this.checkOldUser
 }      

checkOldUser: function (oldUser) {
        if(oldUser== 'Y'){
              this.oldUser.setDisabled(false);
        }
    }

This renderer function is not working for me. How should the renderer look like?. Can you please let me know how to resolve this issue?. Thanks....


Solution

  • Wow, I thought this would be easier, but as it turns out.... not so much..

    You will have to do two things:

    1 - Change your checkcolumn renderer

    2 - Add a beforecheckchange listener to return false in case the user clicks on a record that has 'N' as value;

    Your final grid should look something like this:

    Ext.create('Ext.grid.Panel', {
        height: 250,
        width: 579,
        title: 'My Grid Panel',
        defaultListenerScope: true,
        store: myStore,
        columns: [
            {
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Name'
            },
            {
                xtype: 'checkcolumn',
                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                    var cssPrefix = Ext.baseCSSPrefix,
                        cls = cssPrefix + 'grid-checkcolumn';
    
    
                    if (this.disabled || value == 'N') {
                        metaData.tdCls += ' ' + this.disabledCls;
                    }
                    if (value) {
                        cls += ' ' + cssPrefix + 'grid-checkcolumn-checked';
                    }
    
                    return '<img class="' + cls + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
                },
                dataIndex: 'oldUser',
                text: 'OldUser',
                listeners: {
                    beforecheckchange: 'onCheckcolumnBeforeCheckChange'
                }
            }
        ],
    
        onCheckcolumnBeforeCheckChange: function(checkcolumn, rowIndex, checked, eOpts) {
            var row = this.getView().getRow(rowIndex),
                record = this.getView().getRecord(row);
            return (record.get('oldUser') != 'N');
        }
    });
    

    I created a Fiddle: https://fiddle.sencha.com/#fiddle/bqd