Question

I have a grid within a window. The grid has 3 Actions: Edit, Delete and Disable.I was wondering if it is possible to make the text of the Disable Action (which is currently ‘Disable/Enable’) to be dependent on the Current Status of the record selected. So say the user selects a record whose Current Status is Enabled, then the action’s text should be ‘Disable’. If, however, the user selects a record whose status is Disabled, then the action’s text should be ‘Enable’. Is it possible to do this when using Action? Or do I need to use a button instead of Action?

Answer 1

I am assuming your action button is in a toolbar that is docked to the top of your grid panel. The only tricky thing is getting a reference to the grid (without hardcoding it). The grid’s ‘select’ event only gives you a reference to the rowmodel used.

/* Set a action attribute on the Ext.Action so we can find it */
var action = new Ext.Action({
    text: 'Do something',
    handler: function(){
        Ext.Msg.alert('Click', 'You did something.');
    },
    iconCls: 'do-something',
    itemId: 'myAction',
    action: 'myAction' // I don't like itemId's personally :)
});

/* In the Controller */
init: function() {
    this.control({
        'mygrid': {
            select: this.onRecordSelect
        }
    });
},

onRecordSelect: function(rowModel, record) {
    var grid = rowModel.views[0].ownerCt);
    var action = grid.getDockedItems('toolbar[dock="top"]')[0].down('button[action="myAction"]');
    var enabled = (record.get('CurrentStatus') == "Enabled");
    action.setText(enabled ? 'Disable' : 'Enable');
    action.setIconCls(enabled ? 'myDisableCls' : 'myEnableCls');
}

/* in SASS */
.myDisableCls{
    background-image:url(#{$icon_path}/checkbox.png) !important;
}
.myEnableCls {
    background-image:url(#{$icon_path}/checkbox_ticked.png) !important;
}

Good luck!