Ext.getCmp not working on hide of Youtube Video...

[digeridoopoo]

I'm having difficulty setting the HTML of an element (a panel) on the hide event.

The hide event is working and is being called as I have a Ext.Msg.alert in the hide function that is being called and it works.

Here is my panel code:

Ext.define('TCApp.view.MyPanel0', {
    extend: 'Ext.Panel',
    alias: 'widget.mypanel0',
    config: {
        hideOnMaskTap: true,
        scrollable: false,
        items: [
            {
                xtype: 'panel',
                html: '<iframe width="560" height="315" src="http://www.youtube.com/embed/-gv9RicOHNQ" frameborder="0" allowfullscreen></iframe>',
                itemId: 'videopanel',
                hideOnMaskTap: true
            }
        ]
    }


});

In my controller I have this:

Ext.define('TCApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    config: {
        control: {
            "#dataview": {
                itemtap: 'onDataviewItemTap'
            },
            "mypanel0": {
                hide: 'onVideopanelHide'
            }
        }
    },

etc…

and this:

onVideopanelHide: function(component, options) {
        Ext.Msg.alert('Test onhide event');  <-- working hide event called

        Ext.getCmp('videopanel').setHtml("");  <-- not working
        Ext.getCmp('videopanel').setHtml('<div id="video1"><iframe width="560" height="315" src="http://www.youtube.com/embed/NSUucup09Hc?fs=1&amp;hl=en_US&amp;rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe></div><img src="resources/images/thapelo3Fy.jpg" />');
    }

The Ext.getCmp is not working though, I get the error: 'TypeError: 'undefined' is not an object (evaluating 'Ext.getCmp('videopanel').setHtml')'

The panel I am trying to set the HTML on has an itemid of 'videopanel' so I'm not sure what's wrong. Any ideas?


I'm still getting my iFrame Youtube video playing on the hide event and I want to remove it completely. If anyone has any other ideas please let me know. autoDestroy set to true seems to make no difference.

I think I am using Ext.getCmp incorrectly. Perhaps the best way is to use ExtgetCmp and destroy the popup on hide? Not sure show to do this...

Thanks in advance for any help…

:-)

[bluehipy]

Ext.getCmp uses the component id not itemId, I think.

Try to get references to the videopanel in different ways, maybe relative to the sender of the event...

var vPanel = component.down('panel[itemId=videopanel]')


if(vPanel)
{
vPanel.setHtml(.....);
}