ExtJs 4 reference to toolbar button in grid

Question

i want to define a ref inside the controller to enable/disable the delete buitton on selection change. But i don't get it right, so the getDelButton()-Method delivers undefined. PLease help...

Controller:

 refs:[
      { ref: 'tabPanel', selector: 'viewport > tabPanel' },
      { ref: 'grid', selector: 'tabPanel > usermanagementgrid' },
      { ref: 'delButton', selector: 'grid > button #delete'}
],

...

this.getDelButton().setDisabled(false);

View definition:

dockedItems: [{
        xtype: 'toolbar',
        items : [ {
            xtype: 'button',
            id: 'delete',
            iconCls: 'drop-add',
            text: 'Add',
            tooltip: 'Press to add a new user.',
            action: 'addUser',
            scope: this,
        },

Thanks in advance...

Answer 1

You likely have 3 problems with your selector:

1. You should not have a space between the component and the id selector. Use: button#delete.
2. As nscrob mentioned you will likely need to use gridpanel instead of grid.
3. The button is NOT a direct child of grid. It is most likely a direct child of toolbar in this case. What this means is you must do something more like: gridpanel > toolbar > button#delete OR gridpanel button#delete.

In reference to #3 above, the > selector means DIRECT CHILD of parent. That means literally a child of the parent, not just a component somewhere down the nesting chain. If you just want to pull a button in your gridpanel then use gridpanel button. This will search through all of gridpanel's children and within all those children to find anything matching button. Be aware however, that using it this way will return ALL buttons within the gridpanel (unless of course you specify the id).

Lastly, using your console in firebug will help you IMMENSELY. Open firebug, and in the console you can run commands. So, load up the grid and run the following command: Ext.ComponentQuery.query('gridpanel > toolbar > button#delete') and see what gets returned. This way you don't have to keep going back and forth from your code and refreshing the browser window. Keep in mind that query() returns an array.