1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    Answers
    18
    digeridoopoo will become famous soon enough

      0  

    Default Unanswered: Ext.getCmp not working on hide of Youtube Video...

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


    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:

    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:

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

    and this:

    Code:
    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…

    :-)


  2. #2
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    612
    Vote Rating
    28
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


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

Thread Participants: 1

Tags for this Thread