What is xhooks?

[LesJ]

Is this a private or a public feature? Can I use it in my custom widgets?

The panel Header is the only place where xhooks is used in Ext.

Ext.define('Ext.panel.Header', {
    ....
    initComponent: function() {
        ...
            me.titleCmp = new Ext.draw.Component({
                width     : 15,
                ariaRole  : 'heading',
                focusable : false,
                viewBox   : false,
                flex      : 1,
                id        : me.id + '_hd',
                autoSize  : true,
                margins   : '5 0 0 0',
                items     : [ me.textConfig ],
                xhooks: {
                    setSize: function (width) {
                        // don't pass 2nd arg (height) on to setSize or we break 'flex:1'
                        this.callParent([width]);
                    }
                },
                // this is a bit of a cheat: we are not selecting an element of titleCmp
                // but rather of titleCmp.items[0]
                childEls  : [
                    { name: 'textEl', select: '.' + me.baseCls + '-text' }
                ]
            });
        ....            
    },
    ...

[mitchellsimoens]

I found Ext.AbstractComponent#constructor is where xhooks is used:

    constructor : function(config) {
        var me = this,
            i, len, xhooks;

        if (config) {
            Ext.apply(me, config);

            xhooks = me.xhooks;
            if (xhooks) {
                me.hookMethods(xhooks);
                delete me.xhooks;
            }
        } else {
            config = {};
        }

.....

hookMethods is on Ext.Base which iterates through the hooks object and executes hookMethod on each:

        hookMethod: function (name, hookFn) {
            var me = this,
                owner = me.self;

            //<debug>
            var className = owner.$className;
            if (className) {
                hookFn.displayName = className + '#' + name;
            }
            //</debug>

            hookFn.$owner = owner;
            hookFn.$name = name;

            if (me.hasOwnProperty(name)) {
                hookFn.$previous = me[name]; // already hooked, so call previous hook
            } else {
                hookFn.$previous = callHookParent; // special "previous" to call on prototype
            }

            me[name] = hookFn;
        },

[LesJ]

When I worked with Dojo, they had the ability to run code before and after the class constructor, so this looks to me like a place to run preamble code.

[mitchellsimoens]

Didn't look more at the constructor of AbstractComponent but the code snippets I posted doesn't look like the hook method is being fired, just placed onto the instance.

[LesJ]

Didn't look more at the constructor of AbstractComponent but the code snippets I posted doesn't look like the hook method is being fired, just placed onto the instance.

This a very good point... that xhooks is mixed into the instance.

[mitchellsimoens]

For an app I use I actually added 4 events that have helped me personally... I fire an event in the start of constructor and initComponent and an event at the end of the constructor and initComponent. This allow a great deal of logic to happen in the Controller for me like the view had no clue what children it should have as that logic was moved into the Controller. This was done with a simple override but IE probably doesn't like it

[skirtle]

If you watch the video of Don's presentation at SenchaCon you'll see he mentions xhooks briefly. They're used to override methods inline in a config object. You could already do this anyway but xhooks ensure that callParent works as expected.

[LesJ]

If you watch the video of Don's presentation at SenchaCon you'll see he mentions xhooks briefly. They're used to override methods inline in a config object. You could already do this anyway but xhooks ensure that callParent works as expected.

Here's a link to this presentation, see pages 149-150.

So, as skirtle explained, xhooks is a config option where you can per instance override methods and it makes easy to call the overridden method (via callParent).

I wonder why this config option is called xhooks... as opposed to let's say overrides

[skirtle]

I wonder why this config option is called xhooks... as opposed to let's say overrides

Good question. I don't know why they're called xhooks but having such an arbitrary name may prove quite helpful in the long run, in a perverse kind of way. It makes it easy to search for them and removes any ambiguity when someone wants to talk about them. There's been a lot of name reuse in ExtJS, it's pretty difficult to be sure what someone means when they use words like 'override' or 'config'.

[LesJ]

Good question. I don't know why they're called xhooks but having such an arbitrary name may prove quite helpful in the long run, in a perverse kind of way. It makes it easy to search for them and removes any ambiguity when someone wants to talk about them. There's been a lot of name reuse in ExtJS, it's pretty difficult to be sure what someone means when they use words like 'override' or 'config'.

I'm in favor of consistent and self-describing identifiers. It's not too late to change that since it's only in Beta and ST2 doesn't use this feature.