Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    468
    Vote Rating
    69
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default Listener Issues with extensions (Define)

    Listener Issues with extensions (Define)


    REQUIRED INFORMATION

    Ext version tested:
    • Touch 2.0.1.1
    Browser versions tested against:
    • FF 12.0
    • Chrome - 20.0.1132.34 beta-m
    • Safari 5.1.2
    DOCTYPE tested against:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Description:
    • Having issues with declaring listeners in an existing touch class extension using define. Example below shows that the show event is not firing. I can get the painted event to fire.
    • Touch API examples of declaring listeners do not work for extensions and documentation isnt clear explaining this.
    Steps to reproduce the problem:
    • See test code - alert doen't run
    The result that was expected:
    • Alert triggered by the show event
    The result that occurs instead:
    • No alert ocurrs listener is not fired
    Test Case:
    Code:
       
    
    Ext.define('MyApp.CustomContainer', {
      extend: 'Ext.Container',
      alias: 'widget.customContainer',    
      config : {
          top : 100,
          left : 100,
          width : 700,
          height : 700,
          style : 'border : 2px dashed red;',
          html : 'Custom container',
          listeners : [{
              fn : 'hasBeenShown',
              event : 'show'
          }]
      },
      hasBeenShown : function(comp, options){
         alert("Show");
      }
    });
    
    Ext.setup({
        onReady : function(){
           var container = Ext.create('widget.customContainer', {
        });
       Ext.Viewport.add(container);
          this;
        }
    });

    HELPFUL INFORMATION

    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Win 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    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


    I personally would not use listeners in the config object. If you instantiate the class and pass in listeners it will attempt a merge but if there are any like properties or array versus object mix match then you will have broken your class. I would use the on method in the initialize method.
    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 suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    468
    Vote Rating
    69
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    Hi Mitchell,

    Docs are a bit of a mess example wize.
    I got the "painted" event firing using the methodology you mentioned, however regardless of listener declaration method I cant get the "show" event to fire with an extension.

    Sencha Architect put the listener in the config object - its works for painted event.

    Either way I cant get the "show" show event to fire with an extension.

  4. #4
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    468
    Vote Rating
    69
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    By the way I tried all the methods outlined in docs and here http://www.sencha.com/forum/showthread.php?176239-HOWTO-Adding-Event-Listeners-to-Component-Elements


    Declarations worked fine for existing sencha components and attaching listeners (I could get the show event to fire) just not for customizations (extended components) via a define.

  5. #5
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    468
    Vote Rating
    69
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    Thanks for the tip re where to place the declaration. Ill make sure I place them in the constructor or initialize method. Sounds like having it in the config object is not the best idea.

  6. #6
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    468
    Vote Rating
    69
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    As a work around.
    Declare a listener in the initialize method of the extension and add.

    Code:
    this.on('show', alert("show"), this, {});
    Has to be the above. The following doesn't work.

    Code:
      this.on({
          show : function (comp, listener) {
            //Call a custom function
            alert("Show event ######");
          }
       });
    Any progress on this? Is it a bug

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


    Code:
    this.on('show', alert("show"), this, {});
    That's going to fire the alert when that line is executed by the browser not when the show event fires.
    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.

  8. #8
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    468
    Vote Rating
    69
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    Thanks - I discovered that today. should be a function.
    i.e.

    Code:
    this.on('show', function(){alert("show");}, this, {});

Thread Participants: 1