1. #1
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,299
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default What is xhooks?

    What is xhooks?


    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.

    Code:
    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' }
                    ]
                });
            ....            
        },
        ...

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


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

    Code:
        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:

    Code:
            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;
            },
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,299
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default


    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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,299
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,506
    Vote Rating
    287
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      2  

    Default


    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.

  8. #8
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,299
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default


    Quote Originally Posted by skirtle View Post
    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

  9. #9
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,506
    Vote Rating
    287
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Quote Originally Posted by LesJ View Post
    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'.

  10. #10
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,299
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default


    Quote Originally Posted by skirtle View Post
    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.