Destroy a Modal Pane when it's closed

[scH]

So, I have a video that I'm launching in a floating modal overlay, however when you close the pane the video keeps playing in the background.

I'm not sure whether I need to capture the tap that closes the overlay and create a listener that destroys the pane or if there's an easier way with bubbleEvents

var videoButton = Ext.get('videoButton');
        videoButton.addListener(
            'tap',
            function(){
            
                var vid = new Ext.Panel({
                    floating: true,
                    modal: true,
                    centered: true,
                    items: [
                        {
                            xtype    : 'video',
                            width    : 440,
                            height   : 250,
                            url      : 'movies/test.mov'
                        }
                    ],
                    cls: 'overlay'
                });
        
            
                vid.setCentered(true);
                vid.show();
                }
        ); 

I'm currently declaring the video itself in the overlay function so that once it's destroyed a new version can be created anytime I want, however it might also work to have the video declared outside of the function and simply pause the video when the user closes it. Still I have the same issue with knowing when the overlay is closed.

Any help is appreciated. Thanks.

[xnakxx]

watch on of Ext.Panel's events?
like beforedestroy,destroy,beforehide,beforeremove

[scH]

Can you elaborate on that a bit? Maybe a tiny bit of code?

[scH]

Thanks for the pointer to "beforehide" Just thought I'd post my solution:

var videoButton = Ext.get('videoButton'); 
videoButton.addListener( 
    'tap', 
    function(){ 
     
        var vid = new Ext.Panel({ 
            floating: true, 
            modal: true, 
            centered: true, 
            items: [ 
                { 
                    xtype    : 'video', 
                    width    : 440, 
                    height   : 250, 
                    url      : 'movies/test.mov' 
                } 
            ], 
            cls: 'overlay' 
        }); 
 
     
        vid.setCentered(true); 
        vid.show();
        
        
        vid.addListener(
            'beforehide',
            function (){
                vid.destroy();
                return true;
            }
        );
    } 
); 

[mprovencher]

This helped me SO much. Just a point to add, you have to render the listener (not sure if that's the right language) to either the body or the element:

vid.addListener({
    body: {
        tap: function(){
            // all that other code

        }
    }, scope: this
});

My app wouldn't work until I added the code above.