Adding a tap listener to a container's element causes a segfault (Chrome & Safari)

[robert_k]

I've tested the following on OSX 10.6.8 with both Chrome 25.0.1364.172 and Safari 5.1.7 (6534.57.2). The affected build is Sencha Touch 2.1.1. The fastest way to confirm this bug is to go to the Ext.Container documentation and replace the code sample with the following block of code.

var aboutPanel = Ext.create('Ext.Panel', {
  xtype: 'container',
  html: "<p>Just click me to crash the browser.</p>",
  listeners: {
    initialize: function (me, opts) {
      me.element.on('tap', function (e) {
        // this.fireAction('tap', [this, e], 'doTap');
        this.fireEvent('tap', this, e);
      });
    }
  }
});

//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
    fullscreen: true,

    layout: 'hbox',
    defaults: {
        flex: 1
    },

    items: {
        html: 'First Panel',
        style: 'background-color: #5E99CC;'
    }
});

//now we add the first panel inside the second
mainPanel.add(aboutPanel);

For me this will throw a RangeError immediately in either browser. I'm trying to get the Container to fire the "tap" event so that I can listen for it in the controller. I think that Ext.Panel doesn't have the same issue.

[mitchellsimoens]

That's not the preferred way to add an element listener:

var aboutPanel = Ext.create('Ext.Panel', {
    xtype     : 'container',
    html      : '<p>Just click me to crash the browser.</p>',
    listeners : {
        element : 'element',
        tap     : function(e) {
            this.fireEvent('tap', this, e);
        }
    }
});

//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
    fullscreen : true,

    layout   : 'hbox',
    defaults : {
        flex  : 1
    },

    items : {
        html  : 'First Panel',
        style : 'background-color: #5E99CC;'
    }
});

//now we add the first panel inside the second
mainPanel.add(aboutPanel);

With this I don't get a crash.

[robert_k]

It's been rather obnoxious to get this to work. Originally I used code like yours but the event would never fire whether I put it into the controller or the container. So I resorted to the initializer to try and attach the event to the DOM element, which worked but tended to throw a lot of errors. This is basically the same code in 2 not-so-different areas, so why does it effectively segfault when the listener is added during component initialization and not with the "normal" listener? I can't help but think that the same kind of listener code should work no matter how its attached—but I could be wrong.

So now, going back to the original code I tried and adding

console.dir(arguments);
this.fireEvent('tap', this, e);

somehow allows the event to fire, when just a console.dir didn't output anything before.

[mitchellsimoens]

I use the same code I posted in my apps and am able to listen to them in the controller with no problems.