Hi,

I wanted to be able to load external HTML content where tapping on certain elements in that HTML should interact with the application. Here's the solution I came up with in the hope that it is useful to others.

Code:
MyApp.views.HtmlPage = Ext.extend(Ext.Panel, {
    scroll: 'vertical', // set to false to prevent scrolling
    styleHtmlContent: false,
    cls: 'content', // CSS class
    initComponent: function() {
        // Load external content 

        // This is done with an AJAX request, so remember this is done asynchronously! 
        // In many cases the external content has not yet been loaded when the 'afterrender' event fires.
        
        Ext.Ajax.request({
            scope: this,
            url: this.fileName,
            success: function(rs) {
                // console.log("html loaded", this.id);
                this.update(rs.responseText);
            },
            failure: function(rs) {
                // console.log("html loaded", this.id);
                // When loading from file system the response code of the "server" will be 0
                // which is interpreted as a failure, so success and failure do the same...
                this.update(rs.responseText);
            }
        });
        
        // Setup DOM listener
        
        // The listener is added via code and not via "listeners" property as I couldn't get the scope right otherwise.
        // Within the listener, "this" would always end up beeing a DOM element, regardless if "scope: this" is set or not.
        // 
        // The "element" refers to a property of the Panel. AFAIK in general there are (only) two properties you can access:
        // 'el' and 'body', where 'el' is the DOM node of the top level element that represents this component and
        // 'body' is the DOM node within this component that surrounds the actual content.
        //
        // The "delegate" parameter allows to specify a CSS selector to match elements within the "element" specified above.
        // You can also pass an Array here, e.g. ['.clickMe','.clickMeToo']

        this.on('tap', this.onVideoImageTap, this, {element:'body', delegate:'img[video-url]'});

        MyApp.views.HtmlPage.superclass.initComponent.call(this);
    },
    onVideoImageTap: function(event) {
        // Play video in a pop-up when an image with attribute 'video-url' is tapped.
        var el = Ext.get(event.getTarget());
        var url = el.getAttribute("video-url");
        var width = el.getAttribute("video-width") || 800;
        var height = el.getAttribute("video-height") || 600;
        var title = el.getAttribute("title");

        var videoPanel = new Ext.Video({
            url: url,
            width: width,
            height: height
        });

        var overlayPanel = new Ext.Panel({
            floating: true,
            modal: true,
            hideOnMaskTap: true,
            centered: true,
            items: [
                videoPanel
            ],
            html: title,
            listeners: {
                hide: function() {
                    // Important: Clean up
                    // console.log("destroying", this.id);
                    this.destroy();
                }
            }
        });

        // works: pop, slide, fade (somehow)
        // doesn't work: cube, wipe, flip
        overlayPanel.show('pop');
        videoPanel.play();
    }
});

Ext.reg('htmlpage', MyApp.views.HtmlPage);
Use it like this in an arbitrary component:

Code:
    items: [
        {xtype: 'htmlpage', fileName:'lorem.html'}
    ]
If there's something that could be done better or that is explained wrong in the code, please let me know.

Timo