iframe - Ext.getCmp无法在Youtube Video Sencha Touch的隐藏上工作

Question

我很难在hide事件上设置元素(面板)的HTML，以删除Sencha Touch 2中的iFrame Youtube视频。

当我在hide函数中有一个Ext.Msg.alert时，hide事件正在工作并被调用，并且可以正常工作，但是我无法停止隐藏视频。

这是我的面板代码:

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
        }
    ]
}

});

在我的 Controller 中，我有:

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

等等…

还有这个:

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" />');

}

Ext.getCmp无法正常工作，但出现错误:'TypeError:'undefined'不是对象(正在评估'Ext.getCmp('videopanel')。setHtml')'

我尝试在其上设置HTML的面板的itemid为“视频面板”，所以我不确定这是怎么回事。有任何想法吗？

在隐藏事件中，我仍在播放iFrame Youtube视频，我想将其完全删除。

我也尝试过'Ext.getCmp('videopanel')。destroy();'但我收到与上述相同的错误。我只有itemid设置为视频面板，没有其他ID…

预先感谢您的任何帮助…

Answer 1

嘿@Digeridoopoo只是对MyPanel0进行了一次更改，

您的代码

itemId: 'videopanel',

至:

id: 'videopanel',

我为您编写了一个类似的代码，并将其编码到Controller的onVideopanelHide方法中。

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()
          }
        }
     ]
  }
});

我希望这会有所帮助。 :)