ExtJs 3.4 : Enable a button on grid row selection

Question

I have an Ext grid panel as following.

var plannedGrid = new Ext.grid.GridPanel({
store : plannedGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
    sortable : true,
    header : "Drop/Pick Loc",
    dataIndex : 'locationName',
    width : 170,
    renderer : function(value, metaData, record, rowIndex,
            colIndex, store) {
        var refColor = record.data.tourTypeColor;
        //console.log(record);
        metaData.attr = 'style="background-color:' + refColor + ';"';
        return record.get('locationName');
    }
}, {
    xtype : 'actioncolumn',
    header : "GPS",
    items : [ {
        icon : 'images/gps.jpg',
        tooltop : 'Get GPS',
        handler : function(grid, rowIndex, colIndex) {
            var rec = grid.getStore().getAt(rowIndex);
            alert("Edit " + rec.get('locationName'));
        }
    } ]
}, {
    header : "EST.Un/Load Time",
    sortable : true,
    dataIndex : 'estimatedTime',
    width : 100
}, {
    header : "",
    sortable : true,
    dataIndex : 'colorCode',
    width : 30
} ]),

sm : selectModel,
//width : 435,
height : 400,
//autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid'/*,
listener : {
    selectionchange : function() {
        Ext.getCmp('btnHold').enable();
    }
}*/

//renderTo : document.body
});

The data of this grid panel are coming from another grid. And also I have a button in a button group as following.

{
                    text : 'Hold Drop/Pick',
                    id : 'btnHold',
                    iconCls : 'add',
                    width : 120,
                    // textAlign: 'center',
                    //style : 'margin:5px',
                    style : {
                        textAlign: 'center',
                        margin : '5px'
                    },
                    disabled : true
                }

This button is disabled. What I want is, I need to enable this button when user clicks a row of the grid panel.

I am using ExtJs 3.4.

How should I do that ?

Kind regards

Andrew Koshkin Andrew Koshkin · Accepted Answer · 2014-01-20T13:44:13

Use 'rowclick' listener (for grid):

listeners: {
    rowclick: function(grid, idx){
        Ext.getCmp('btnHold').enable();
    }
}

P.S. It's very bad when you use 'id' parameter in your components. Try to remove it and get access to button by using another components. Sorry for my english, guys!

ExtJs 3.4 : Enable a button on grid row selection

1 Answers