Disable docked button in a view from controller

Question

I have a MVC app built with extJS 4. I want to disable a docked button in a grid panel from a controller Here is my grid panel view:

Ext.define('SDI.view.MissionsGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.missionsGridPanel',
width: 688,
title: 'Missions',
store: 'MissionsStore',
tbar:[
                {
                    text:'Delete mission',,
                    icon: '/images/delete.png',
                    itemId: 'removeMissionButton',
                    disabled: true,
                    action :'delete'
                }
            ]...

Here is my controller :

Ext.define('SDI.controller.MissionsController', {
extend: 'Ext.app.Controller',
views: ['SDI.view.MissionsGridPanel'],
refs: [
    {
            selector:'missionsGridPanel',
            ref:'missionsGridPanel'
      },
    {
            selector:'missionsGridPanel button[action=delete]',
            ref:'missionsGridPanelToolbarDelButton'
      }
    ],
init: function() {

     this.control({
        'missionsGridPanel': {
            selectionchange: this.onMissionSelect
        }

})
},

onMissionSelect: function(pTarget,pRecord,pOptions){
    console.log("Mission is selected")
    this.getMissionsGridPanelToolbarDelButton().setDisabled(false);
}

});

I don't understand why this doesn't work. "Mission is selected" is logged but the button remains disabled.

Answer 1

Here is how to troubleshoot this -

Go to the Firebug console, type this:

Ext.ComponentQuery.query('missionsGridPanel button[action=delete]')

and see if anything is being returned. I would recommend installing Illuminations for Developers firebug plugin to further help you figure out whats what on your page.