Ext.getCmp not working on hide of Youtube Video Se

I'm having difficulty setting the HTML of an element (a panel) on the hide event to remove an iFrame Youtube video in Sencha Touch 2.

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, but I can't stop the video on hide.

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("");
    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 'video panel' 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.

I've also tried 'Ext.getCmp('videopanel').destroy();' but I get the same error as above. I only have itemid set as videopanel and no other ids…

Thanks in advance for any help…

Hey @Digeridoopoo just one change into MyPanel0,

your code

itemId: 'videopanel',

to:

id: 'videopanel',

I did a version of you code something like this and same into your onVideopanelHide method on Controller.

Ext.define('myapp.view.MyPanel0', {
   extend: 'Ext.Panel',
   xtype: '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>',
           id: 'videopanel',
           hideOnMaskTap: true
        }, {html: '<br/>'},
        {
           xtype: 'button',
           text: 'Change Video',
           width: '55%',
           handler: function() {
               Ext.getCmp('videopanel').setHtml('')
               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="app/images/home.png" />')
           }
        }, {html: '<br/>'},
        {
          xtype: 'button',
          text: 'Video Stop',
          width: '55%',
          handler: function() {
              Ext.getCmp('videopanel').hide()
          }
        }
     ]
  }
});

I hope this helps. :)