Results 1 to 10 of 23

Thread: What is xhooks?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,932
    Vote Rating
    548
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,932
    Vote Rating
    548
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,932
    Vote Rating
    548
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •