1. #1
    Sencha User
    Join Date
    Mar 2007
    Location
    Iloilo, Philippines
    Posts
    149
    Vote Rating
    1
    willydee is on a distinguished road

      1  

    Default [Ext 4.1.x] Proposal for listeners enhancement

    [Ext 4.1.x] Proposal for listeners enhancement


    I prefer to use ExtJS components in a declarative manner, but event binding is a bit tricky. Example:
    Code:
    var cmp = Ext.create('Ext.button.Button', {
      text: 'foo',
      renderTo: Ext.getBody(),
      listeners: {
        afterrender: 'onAfterRender'
      },
      onAfterRender: function() {
        console.log(this);
      }
    });
    This raises an error because no scope is given and existence of scope is not tested before accessing the method property. Adding scope: this to the listener declaration is not useful because this refers to globalWindow on construction time. So binding handlers to self is only possible by using initComponent() or another template function, which adds unnecessary code.

    Proposal for a fix:
    Code:
    Index: extjs-4.1.1-rc1/src/util/Observable.js
    ===================================================================
    --- extjs-4.1.1-rc1/src/util/Observable.js	(revision )
    +++ extjs-4.1.1-rc1/src/util/Observable.js	(revision )
    @@ -494,7 +494,7 @@
                         Ext.Error.raise('No method named "' + fn + '"');
                     }
                     //</debug>
    -                fn = scope[fn] || me[fn];
    +                fn = scope && scope[fn] ? scope[fn] : me[fn];
                 }
                 event.addListener(fn, scope, Ext.isObject(options) ? options : {});
    Kind regards,
    WillyDee

    Problems worthy of attack, prove their worth by hitting back.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Iloilo, Philippines
    Posts
    149
    Vote Rating
    1
    willydee is on a distinguished road

      0  

    Default


    If the current behaviour is considered a bug, please move it to the appropriate forum. Thanks!
    Kind regards,
    WillyDee

    Problems worthy of attack, prove their worth by hitting back.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    IMO you should specify the function as the value in that button case.
    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.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Iloilo, Philippines
    Posts
    149
    Vote Rating
    1
    willydee is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    IMO you should specify the function as the value in that button case.
    Mitchell, this was not my intention. I want to be able to add a listener to any component, scoped to itself, but without the need to an extra call to the addListener() method. The code snippet is just a stripped example to show what I want to do, and where it fails. Please review the supplied patch; IMHO it's a small but useful enhancement, especially for MVC applications.

    This is the procedural workflow as of today, binding the listener to the instance after the component is created:
    PHP Code:
    var cmp Ext.create('Ext.button.Button', {
      
    text'foo',
      
    renderToExt.getBody(),
      
    onAfterRender: function() {
        
    console.log(this);
      }
    });
    cmp.addListener('afterrender''onAfterRender'cmp); 
    In a MVC based app it would look like this:
    PHP Code:
    Ext.define('App.view.MyButton', {
      
    extend'Ext.button.Button',
      
    text'foo'
      
    onAfterRender: function() {
        
    console.log(this);
      },
      
    initComponent: function() {
        
    this.callParent();
        
    this.addListener('afterrender''onAfterRender'this);
      }
    }); 
    With the patch applied, the initComponent() call could be omitted, and the event binding would be completely declarative:
    PHP Code:
    Ext.define('App.view.MyButton', {
      
    extend'Ext.button.Button',
      
    text'foo'
      
    onAfterRender: function() {
        
    console.log(this);
      },
      
    listeners: {
        
    afterrender'onAfterRender' // automagically scoped to the component instance
      
    }
    }); 
    Got me?
    Kind regards,
    WillyDee

    Problems worthy of attack, prove their worth by hitting back.

  5. #5
    Sencha User Nom4d3's Avatar
    Join Date
    Sep 2008
    Location
    Araras / SP / Brazil
    Posts
    81
    Vote Rating
    1
    Nom4d3 is on a distinguished road

      0  

    Default


    This trick may solve your problem:

    PHP Code:
    Ext.define('App.view.MyButton', { 
       
    extend'Ext.button.Button'
       
    text'foo',  
       
    onAfterRender: function() { 
          
    console.log(this); 
       }, 
       
    listeners: { 
          
    scopethis//All listeners will have the component as scope
          
    afterrender'onAfterRender'
        
    }
     }); 

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,490
    Vote Rating
    283
    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 Nom4d3 View Post
    This trick may solve your problem:
    I don't think that will work, this will be the global window object, not the component.

    Details aside, the underlying suggestion in this thread for allowing string handler names without an explicit scope is a good one. I definitely wouldn't call it a bug though, it's an enhancement.