Results 1 to 2 of 2

Thread: Close Button

  1. #1
    Ext User
    Join Date
    Jul 2007
    Location
    Calgary, AB
    Posts
    10

    Default Close Button

    I am trying to load video into the helloworld dialog box, which works fine. The problem is, when I hit the close button or switch to a new tab, the video keeps playing.

    Is there a way that when you hit the close buttons it could turn off the video, or just load blank data to clear the video from playing.

    dialog box code:
    PHP Code:
      <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
        <
    div class="x-dlg-hd">Video Information</div>
        <
    div class="x-dlg-bd">
            <!-- 
    Auto create tab 1 -->
            <
    div class="x-dlg-tab" title="Video Preview">
                <!-- 
    Nested "inner-tab" to safely add padding -->
                <
    div class="inner-tab" >
        
                    <
    div id="targetDiv">
                          <
    p>The fetched data will go here.</p
                    </
    div
                
                </
    div>
            </
    div>
            <!-- 
    Auto create tab 2 -->
            <
    div class="x-dlg-tab" title="File Info">
                <
    div class="inner-tab">
                ... 
    World!
                </
    div>
            </
    div>
            </
    div>
        </
    div
    Here is how I am calling the video in the first place:

    PHP Code:
    echo "<div id=\"acc-ct\" style=\"width:600px;\">\n";
    echo 
    "<div id=\"panel-$row1[videoID]\">\n";
    echo 
    "<div>$row1[videoTitle]</div>\n";
    echo 
    "<div>\n";
    echo 
    "<div class=\"text-content\">\n";
    echo 
    "<div id=\"target$row1[videoID]\">";
    echo 
    "<p>$row1[videoTitle]</p><a href=\"#\" onClick=\"getData('miniloader.php?id=$row1[videoID]', 'targetDiv')\" id=\"show-dialog-btn$row1[videoID]\">View File Info</a>";
    echo 
    "</div>\n";
    echo 
    "</div>\n";
    echo 
    "</div>\n";
    echo 
    "</div>\n\n"

    Here is the Hello World Script I am using:

    PHP Code:
    /*
     * Ext JS Library 1.1 RC 1
     * Copyright(c) 2006-2007, Ext JS, LLC.
     * [email protected]
     * 
     * http://www.extjs.com/license
     */

    // create the HelloWorld application (single instance)
    var HelloWorld = function(){
        // everything in this space is private and only accessible in the HelloWorld block
        
        // define some private variables
        var dialog, showBtn;
        
        // return a public interface
        return {
            init : function(){
                <?
                
                $result3 = mysql_query("SELECT videoID FROM videos");
      
                  while ($row3 = mysql_fetch_array($result3)) {
      
                  echo "showBtn = Ext.get('show-dialog-btn$row3[videoID]');\n";
                 echo " showBtn.on('click', this.showDialog, this);\n\n";
                 
                 }
                
                ?>
                
            },
            
        
            showDialog : function(){
                if(!dialog){ // lazy initialize the dialog and only create it once
                    dialog = new Ext.BasicDialog("hello-dlg", { 
                            autoTabs:true,
                            width:500,
                            height:400,
                            shadow:true,
                            minWidth:300,
                            minHeight:250,
                            proxyDrag: true
                    });
                    dialog.addKeyListener(27, dialog.hide, dialog);
                    
                    dialog.addButton('Close', dialog.hide, dialog);
                }
                dialog.show(showBtn.dom);
            }
        };
    }();

    // using onDocumentReady instead of window.onload initializes the application
    // when the DOM is ready, without waiting for images and other resources to load
    Ext.onReady(HelloWorld.init, HelloWorld, true);

  2. #2
    Ext User
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    I think that the best way is to set up a event to happen when the dialog is hidden.
    Something like this...
    Code:
    dialog.on('hide', stopVideo, dialog);
    dialog.tabs.on('tabchange', stopVideo, dialog);
    
    function stopVideo() {
      // Code to make the video stop playing.
      // I don't know exactly, but probably a Ext.get(target$row1[videoID]) call and then call some subfunction to stop the video. I have no experience with embedded video.
    }
    Hope this helps a little...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •