Retrieving the header checkbox in Ext

The checkbox in a grid / tree panel header is a somewhat challenging to get a hold of in Ext.

I was attempting to add validation to the checkbox in a header column (basically saying "You need to check something dummy"). I needed access to the DOM object to simultaneously add a class and apply a notification message at the position of the checkbox.

So to accomplish this I did the following:

Ext.define('App.view.browser.FolderPanel', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.browser-folderpanel',

    store: 'browser.Folders',

    height: 300,

    emptyText: 'There are no folders',

    selType: 'checkboxmodel',
    selModel: {
        checkOnly: true,
        pruneRemoved: false,
        mode: 'SIMPLE'
    },

    columns: [
        {
            xtype: 'treecolumn',
            dataIndex: 'Path',
            text: localize('Folders'),
            sortable: false,
            flex: 1
        }
    ],

    initComponent: function initComponent() {

        // call initComponent so we have access to selModel
        this.callParent(initComponent);

        // bind change events to clear any validation
        this.selModel.on('selectionchange', this.clearCheckboxValidationError, this);
    },

    /** 
     * Adds a validation error message to the checkbox column header
     */
    checkboxValidationError: function (errorMessage) {
        var me = this,
            headerCheck = me.getHeaderCheckbox();

        // add checkbox style
        headerCheck.addCls('x-column-header-checkbox-invalid');

        // create validation over checkbox
        Ext.create('App.view.NotificationTip', {
            html: errorMessage,
            target: headerCheck,
            anchorOffset: 7,
            offsetY: 0,
            type: 'failure',
            maxWidth: 275,
            scope: this
        });
    },

    /**
     * Removes a validation error message from the checkbox column header
     */
    clearCheckboxValidationError: function () {
        var me = this,
            headerCheck = me.getHeaderCheckbox();

        headerCheck.removeCls('x-column-header-checkbox-invalid');
    },

    /**
     * Retrieves the checkbox in the header 
     */
    getHeaderCheckbox: function () {
        var me = this;

        return Ext.fly(me.headerCt.items.items[0].el.dom);
    }
});

In this panel, the getHeaderCheckbox method will retrieve teh dom object for the checkbox. There is likely a better way to do this... feel free to comment.

Once I have access to the checkbox I can manipulate it however I want, which is done in the checkboxValidationError and clearCheckboxValidationError methods.

Of note is that we watch the selModel for its selectionchange event. This event will fire when any checkbox is clicked in your panel. In this case, I'm using it to clear out any validation error messages that are shown.