Start Building Professional
Web Apps Today

Undock Tab

Ok, I'm trying to implement an example dock/undock tab sample sent me:
http://dhtmlx.com/docs/products/kb/index.shtml?cat=search&page=1&q=10423


I've wrapped the code as I need it, but while the tabs display with the undock icon showing, double-click doesn't appear to do anything. Hope you can shed some light on this. Thanks in advance.

Here's the code:

...
<script type="text/javascript" src="js/common.js"></script>
<script src="js/dhtmlxcommon.js"></script>

<link rel='STYLESHEET' type='text/css' href='common/style.css'>

<!-- dhtmlxWindows -->
<link rel="stylesheet" type="text/css" href="js/dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_blue.css">
<script src="js/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>

<!-- dhtmlxTabbar -->
<script src="js/dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
<link rel="stylesheet" type="text/css" href="js/dhtmlxTabbar/codebase/dhtmlxtabbar.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlxTabbar/codebase/skins/dhtmlxtabbar_dhx_blue.css">

<!-- dhtmlxLayout -->
<script src="js/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<link rel="stylesheet" type="text/css" href="js/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">



<script type="text/javascript">
var myPICanvasWidth = determineCanvasSizeWidth();
var myPICanvasHeight = determineCanvasSizeHeight();

window.onload = function() {
//    determineCanvasSize();
    //alert(myCanvasWidth); //1280
    //alert(myCanvasHeight); 734

    var myPICanvasX = 0;
    var myPICanvasY = 0;
    var myPICanvasHorzPad = 0;
    var myPICanvasVertPad = 0;

    var myPICanvasWidthSize = myPICanvasWidth-(myPICanvasHorzPad*2);
    var myPICanvasHeightSize = myPICanvasHeight-(myPICanvasVertPad*2);
//    alert(myPICanvasWidthSize);
//    alert(myPICanvasHeightSize);

    dPI = document.getElementById('myPIVP');
//    dPI.style.width=myPICanvasWidthSize+"px";
//    dPI.style.height=myPICanvasHeightSize+"px";

    var dhxPIWins = new dhtmlXWindows();
    dhxPIWins.enableAutoViewport(true);
//    dhxPIWins.setViewport(10, 10, 800, 400, document.getElementById("myPIVP"));
    dhxPIWins.setViewport(myPICanvasX, myPICanvasY, myPICanvasWidthSize, myPICanvasHeightSize, document.getElementById("myPIVP"));
    dhxPIWins.vp.style.border = "#909090 1px solid";
    dhxPIWins.setImagePath("js/dhtmlxWindows/codebase/imgs/");
    dhxPIWins.attachViewportTo("myPIVP");
    var w1PI = dhxPIWins.createWindow("w1", myPICanvasX, myPICanvasY, myPICanvasWidthSize, myPICanvasHeightSize);
//    w1PI.setToFullScreen(true);    
    
    w1PI.setText("Anglian Water - High Level Visual Concept");
    w1PI.hideHeader();

    var dhxPILayout = w1PI.attachLayout("2U");
    dhxPILayout.cells("a").setText("(a)Picture Search");
    dhxPILayout.cells("b").setText("(b)Pictures");
    dhxPILayout.cells("a").setWidth(400);
    dhxPILayout.cells("b").hideHeader();
//    dhxPILayout.cells("a").attachURL("picture-search.php");
//    dhxPILayout.cells("b").attachURL("picture-tabs.php");


    var dhxPFTabbar = dhxPILayout.cells("a").attachTabbar();
    dhxPFTabbar.setImagePath("js/dhtmlxTabbar/codebase/imgs/");
dhxPFTabbar.setHrefMode("iframe");

dhxPFTabbar.addTab("pictureSearch","Picture Search","*");
dhxPFTabbar.setContentHref("pictureSearch","xpicture-search.php");
dhxPFTabbar.addTab("pictureTree","Picture Tree","*");
dhxPFTabbar.setContentHref("pictureTree","xpicture-tree.php");

    dhxPILayout.cells("a").collapse();


    var dhxPXTabbar = dhxPILayout.cells("b").attachTabbar("top");
//    tabbar=new dhtmlXTabBar("a_tabbar","top");
    dhxPXTabbar.setImagePath("js/dhtmlxTabbar/codebase/imgs/");
    dhxPXTabbar.addTab("t1","Tab 1 <img src='js/dhtmlxTabbar/codebase/imgs/btn_dock.gif' onclick='unDock(\"t1\")'>")
    dhxPXTabbar.setContentHTML("t1","<div id='content1'><b>TEST</b></div>");

    dhxPXTabbar.addTab("t2","Tab 2 <img src='js/dhtmlxTabbar/codebase/imgs/btn_dock.gif' onclick='unDock(\"t2\")'>")
    dhxPXTabbar.setContentHTML("t2","<div id='content2'><b>TEST 2</b></div>");

    dhxPXTabbar.addTab("t3","Tab 3 <img src='js/dhtmlxTabbar/codebase/imgs/btn_dock.gif' onclick='unDock(\"t3\")'>")
    dhxPXTabbar.setContentHTML("t3","<div id='content3'><b>TEST 3</b></div>");


    dhxPXTabbar.setTabActive("t1")
    var dhxXWins = new dhtmlXWindows();
    dhxXWins.enableAutoViewport(true);
    
    dhxXWins.setImagePath('codebase/imgs/');
    
    var winds = [];
    
    function unDock(id){
        
        if(typeof(winds[id])){
            winds[id] = dhxXWins.createWindow(id, 10, 10, 400, 350);
            winds[id].button("close").hide();
            winds[id].addUserButton("dock", 99, "Dock", "dock");
            winds[id].button("dock").attachEvent("onClick", function(win) {
                dhxPXTabbar.showTab(id)
                dhxPXTabbar.setTabActive(id)
                winds[id].hide()
            });
        }
        
        winds[id].show();
        
        dhxPXTabbar.hideTab(id)
        winds[id].attachHTMLString(dhxPXTabbar._content[id].innerHTML)    
    }



}

</script>
</head>

<body>
<div id="myPIVP" select="true" style="position: relative; width: 1000px; height: 500px; border: 1px #ffff00; ">
...