Pinch event on iFrame Extjs 5

Question

I want to detect pinch event on an IFrame (Extjs 5 Component). What's wrong with this code??

Ext.create('Ext.ux.IFrame', {
        autoScroll: true,
        src: 'resources/docs/doc1.html',
        cls: 'iframeStyle',
        listeners: {
            pinch: function (event) {
                alert('event.scale= ' + event.scale);
            }
        }
    })

Answer 1

Out of the box, Ext.ux.Iframe does not have "pinch" as an event. Only the events listed on the API can be added using the "listeners" syntax. http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.ux.IFrame

You'd want something along the lines of:

Ext.create('Ext.ux.IFrame', {
    autoScroll: true,
    src: 'resources/docs/doc1.html',
    cls: 'iframeStyle',
    listeners: {
        afterrender: function(container) {
            container.addManagedListener(container.el, "touchstart", function (event) {
                alert('event.scale= ' + event.scale);
            });
        }
    }
})

The code is untested but addManagedListener is what you'll want!