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

        // 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

        // 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();


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


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.