Disabling a column in a grid in EXTJS 4.0

0
votes

I have a grid with some columns and the last column is 

{
    text     : '',
    id : 'delId',
    width    : 40,
    dataIndex: 'del',
    renderer : function(){
    return '<center><div class="image-hover-delete"></div></center>';
}

I want to disable only this particular column. how can I do this?

1
extjs
What do you mean by 'disable' ? - Lorenz Meyer
for example click on that image, will delete the record. i dont want this happen. so i want to disable that column entirely for all records - caddie

1 Answers

0
votes

You could hook onto the existing Ext.grid.column.Column . disable() by making a check for isDisabled() whenever your event handler is triggered. For example:

var grid = Ext.create('Ext.grid.Panel', {
    // ...
    columns: [
        {
            // ...
        },
        {
            text: '',
            width: 40,
            itemId: 'delCol',
            menuDisabled: true,
            renderer: function(){
                return '<div class="image-delete"></div>';    
            }
        }
    ],
    store: {
        // ...
    }          
});

grid.on('cellclick', function(me, td, x, record){
    if(Ext.fly(td).hasCls('x-grid-cell-delCol')
       && !this.down('#delCol').isDisabled()       // <--- e.g.
      )
        this.getStore().remove(record);
});

ยป fiddle