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

user3546785 picture user3546785 · Oct 14, 2014 · Viewed 15.8k times · Source

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....

Answer

Guilherme Lopes picture Guilherme Lopes · Oct 15, 2014

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