Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Swapnil Deshmukh on Jan 20, 2009 22:58
open dhtmlx forum
Problem In resizing layout

Hi,

I am using dhtmlxLayout, where I getting a problem regarding the resizing the layout. Whenever I resize the window it resize the width of layout but not the height of it. If I refresh the page after resizing the window, layout is resizing properly as per window width and height. Please find the below code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FMEA Details</title>
<link rel="stylesheet" href="CSS/whirlpool.css" type="text/css"/>
<%--<link rel='STYLESHEET' type='text/css' href='dhtmlx/dhtmlxTree/samples/common/style.css' />--%>
<link rel="STYLESHEET" type="text/css" href="dhtmlx/dhtmlxTree/codebase/dhtmlxtree.css" />
<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.css"/>
<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css"/>
<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.css"/>
<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_blue.css"/>


<script src="dhtmlx/dhtmlxTree/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlx/dhtmlxTree/codebase/dhtmlxtree.js"></script>
<script src="dhtmlx/dhtmlxTree/codebase/ext/dhtmlxtree_start.js"></script>

    <script src="dhtmlx/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
    <script src="dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
    <script src="dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script src="dhtmlx/dhtmlxWindows/codebase/ext/dhtmlxwindows_wtb.js"></script>
<style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0px;
        }
</style>
</head>

<body style="">
<input type="hidden" name="project_id" id="project_id" value="<%=project_id%>" />
<input type="hidden" name="subclass_id" id="subclass_id" value="<%=subclass_id%>" />
<input type="hidden" name="project" id="project" value="<%=project%>" />

<!--<div id="pid" style="width:100%; height:100%"></div>-->
<iframe id="sampleframe" style="background-color:#89B2F5; border:0px; " name="sampleframe" width="100%" height="100%" frameborder="0" src=""></iframe>

<%--search_fmea_new.jsp?subclass_id=<%=subclass_id%><div id="parentId" style="width: 100%; height: 100%; margin:0px; border:0px"></div>--%>
    
<script>

    var dhxLayout = new dhtmlXLayoutObject(document.body,"3T","dhx_blue");
            
            dhxLayout.cells("a").setHeight(80);
            dhxLayout.cells("b").setWidth(275);
            dhxLayout.cells("c").layout = null;

            //dhxLayout.setEffect('collapse',false);
            dhxLayout.setEffect("resize", true);;
            //dhxLayout.setAutoSize(null, "c");
            
            dhxLayout.cells("a").hideHeader();
            dhxLayout.cells("a").attachObject("headId");
            //dhxLayout.cells("a").fixSize(true, true);
            
            
            var tree = dhxLayout.cells("b").attachTree(0);
            dhxLayout.cells("b").setText("Project Requirements");
            
            //dhxLayout.cells("b").fixSize(true, true);
            tree.setImagePath("dhtmlx/dhtmlxTree/samples/images/");
            tree.enableMultiLineItems(true);
            tree.enableSmartXMLParsing(true); //enable smart parsing
            tree.enableAutoTooltips(true);
            tree.enableCheckBoxes(false);
            tree.enableTreeLines(false);
            tree.preventIECaching(true);
            tree.enableAutoTooltips(true);
            tree.enableIEImageFix(true);
            tree.setOnClickHandler(function(id){openPathDocs(id);});
            tree.setXMLAutoLoading("XML/fmea_new_tree.jsp?project_id=<%=project_id%>&mydate="+(new Date()).valueOf());
            tree.loadXML("XML/fmea_new_tree.jsp?project_id=<%=project_id%>&mydate="+(new Date()).valueOf(),autoselectNode);
            
            dhxLayout.cells("c").attachObject("sampleframe");
            dhxLayout.cells("c").hideHeader();
                        //dhxLayout.setAutoSize("b;c", "a;c");
                        

            String.prototype._dhx_trim = function(){
return this.replace(/ /g," ").replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g,"");
}
        /* get node as incoming parameter */
        var node=null;
        var t=document.location.href.split("?");
        var type=null;
        var base=t[0].replace("/index.s?html","");
        if(t[1]!=null){
            var u=t[1].split("&");
            for(var q=0;q<u.length;q++){
                if((node==null)&&(u[q].split("=")[0]=="node")){
                    node=(u[q].split("=")[1]!=null?u[q].split("=")[1]:null);
                    if(node!=null){
                        if(node.length==0){
                            node=null;
                        }
                    };
                }
                if((type==null)&&(u[q].split("=")[0]=="type")){
                    type=(u[q].split("=")[1]!=null?u[q].split("=")[1]:null);
                }
            };
        };
            
            
            function openPathExamples(itemId){
            //debugger;
            var url = (tree.getUserData(itemId, "url")!=null?tree.getUserData(itemId, "url").toString()._dhx_trim():"");
            if (url=="" && !tree.hasChildren(itemId)) {
                url = url+"#"+itemId;
            }
            var itemIdTmp = itemId;
            var i = 0;
            do {
                itemIdTmp = tree.getParentId(itemIdTmp);
                if (tree.getUserData(itemIdTmp, "url") != null) {
                    url = tree.getUserData(itemIdTmp, "url").toString()._dhx_trim() + ((url.indexOf("#")!==0)?"/":"") + url;
                }
                i++;
            } while (itemIdTmp != 0)
            window.frames.sampleframe.location.href = url;
        }
        function openPathDocs(id){
            if(tree.getUserData(id,"thisurl")!=null){
                window.frames.sampleframe.location.href = tree.getUserData(id,"thisurl");
                return;
            }
            var entUrl = "";
            var getFileFl = true;
            var suffix = "#"+id
            
            do{
                var url = tree.getUserData(id,"url");
                if(url!=null){
                    if(getFileFl){
                        entUrl = url.toString()._dhx_trim()+suffix;
                        getFileFl = false;
                    }else{
                        var arTmp = url.split("/");
                        if(arTmp[arTmp.length-1].indexOf(".")!=-1){
                            arTmp[arTmp.length-1] = "";
                            url = arTmp.join("/");
                        }
                        if(url!="")
                            entUrl = url.toString()._dhx_trim()+"/"+entUrl;
                    }
                }
                id = tree.getParentId(id);
            }while(id!="0")
            
            window.frames.sampleframe.location.href = entUrl
        }
        
        function updateTreeSize(){
            this.allTree.style.overflow = "visible";
            this.allTree.style.height = this.allTree.scrollHeight+"px";
            
        }
        
        function autoselectNode(){
            if(type=="smpl"){
                tree.selectItem(node,true);tree.openItem(node)
            }else{
                tree.selectItem(node,true);tree.openItem(node)
            }
        }
        
        

</script>



<div style="height:80px; width:100%" id="headId"><jsp:include page="includes/sep.html" flush="true"/></div>

<div style="position:absolute; left: 685px; top: 31px; width: 300px;" align="right"><font color="white" style="font:bold 70% Arial"><strong>Welcome: <%=reqName%></strong></font></div>


</body>
</html>
Answer posted by Support on Jan 21, 2009 03:52
Hello,

Regarding the layout - all works (resize) fine on our side.
Note: your script recursively creates layouts and trees. Here is a screenshot.
Attachments (1)
sceenshot.zip67.56 Kb
Answer posted by Swapnil Deshmukh on Jan 21, 2009 04:09

Please find the attachec screen snaps.

In FirstScreen.jpg, the window size is small, whenever I maximize the screen the width of layout has been changed but hight remain as it is. After I maximize the window the layout looks like SecondScreen.jpg.

Attachments (2)
First Screen.jpg81.53 Kb
Second Screen.jpg114.60 Kb
Answer posted by Support on Jan 21, 2009 05:38
It still works fine on our side, here is a demo.
Attachments (1)
demo.zip122.56 Kb