CODEWITHSUNDEEP
extjscheckboxrenderer
user3546785
user3546785

Reputation: 177

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

Upvotes: 4

Views: 18241

Answers (4)

Sergey Bogdanov
Sergey Bogdanov

Reputation: 673

As for Extjs versions from 6.0 till 7.6, you can use a defaultRenderer method in renderer in such way:

xtype: 'checkcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    const rowData = store.getAt(rowIndex).getData();
    // Your logic to change value or styles
    if(rowData.name === 'Homer') {
        metaData.tdCls = metaData.tdCls + ' x-item-disabled';
    }
    return this.defaultRenderer(value);
},

To make cell disabled, just add css class x-item-disabled to metadata.

This css will free you from using listeners.

Fiddle

Upvotes: 0

Jani
Jani

Reputation: 31

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {         
        if(record.data.taskStatus == 'Success' || record.data.acknowledgeBak == true){ 
                metaData.css = " x-item-disabled"; 
        }
        return (new Ext.grid.column.CheckColumn).renderer(value);
},
listeners: {
        beforecheckchange: function (the, rowIndex, checked, eOpts) {
                var record = the.up('grid').getStore().getAt(rowIndex);
                return (record.get('taskStatus') != "Success" && record.get("acknowledgeBak") != true);
        }
},

Upvotes: 3

Alex Dzeiko
Alex Dzeiko

Reputation: 866

Slightly simpler way helped me 

           renderer: function(val, metaData, rec) {

              if (rec.get('usersSetId') == -1) {
                metaData.tdCls += ' ' + this.disabledCls;
              }

              return (new Ext.ux.CheckColumn()).renderer(val, metaData);

            },
            listeners: {
              beforecheckchange: function (the, rowIndex, checked, eOpts) {
                var record = the.up('grid').getStore().getAt(rowIndex);
                return (record.get('usersSetId') != -1);
              }
            }

Upvotes: 9

Guilherme Lopes
Guilherme Lopes

Reputation: 4760

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

Upvotes: 9

Related Questions