Ext.getCmp 无法隐藏 Youtube Video Sencha Touch

Question

我在隐藏事件中设置元素（面板）的 HTML 以在 Sencha Touch 2 中删除 iFrame Youtube 视频时遇到困难。

隐藏事件正在工作并且正在被调用，因为我在隐藏函数中有一个 Ext.Msg.alert 正在被调用并且它工作，但我无法停止隐藏视频。

这是我的面板代码：

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

});

在我的控制器中，我有这个：

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' is not an object (evalating 'Ext.getCmp('videopanel').setHtml')'

我尝试在其上设置 HTML 的面板的 itemid 为“视频面板”，所以我不确定出了什么问题。有什么想法吗？

我的 iFrame Youtube 视频仍然在 hide 事件中播放，我想完全删除它。

我也试过'Ext.getCmp('videopanel').destroy();'但我得到与上面相同的错误。我只有 itemid 设置为 videopanel 而没有其他 ids...

提前感谢您的帮助……

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

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