Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by bryan on Dec 22, 2008 12:32
open dhtmlx forum
layout resizing

I"m having some resizing issues I'm trying to figure out.

At first I had a 3W layout taking over document.body. I had resizing working fine using dhxLayout.setAutoSize("b", "b");

Now I've added a toolbar to the top by setting a toolbar div to be at the top of the page. I then created a new div called container for the 3W layout. Now the 3W layout doesnt resize when I resize my page.
<body style="width:100%; height:100%; margin:0px; overflow:hidden;">
<div id="toolbar"></div>
<div id="container" style="width:100%; height:100%; margin:0px; overflow:hidden;">
<div id="calendar"></div>
</div>
<script>
var dhxLayout = new dhtmlXLayoutObject('container', "3W", "dhx_blue");
dhxLayout.cells("a").setWidth(200);
dhxLayout.cells("c").setWidth(200);
dhxLayout.cells("a").setText("test");
dhxLayout.cells("b").setText("test2);
dhxLayout.cells("c").setText("test3");
dhxLayout.cells("b").attachURL(index.php");
dhxLayout.cells("c").attachObject("calendar");
dhxLayout.setAutoSize("b", "b");
dhxLayout.setEffect("resize", true);
var dhxTree = dhxLayout.cells("a").attachTree(0);
dhxTree.setImagePath("path to images");
    dhxTree.loadXML("includes/tree.xml");
dhxTree.attachEvent("onClick",onNodeSelect);
function onNodeSelect(nodeId){
changeFormAction (nodeId);
}
     var bar = new dhtmlXToolbarObject('toolbar');
    bar.setIconsPath("path to icons");
    bar.loadXML("includes/toolbar.xml");
bar.attachEvent("onClick", function(id){
if (id == 'print') {
window.print();
}
if (id == 'logout'){
location.href='includes/users/logout.php';
}
}
);

</script>
Answer posted by Support on Dec 23, 2008 00:36
You have some errors in code, please view the online samples:
1. full-screened init
    http://dhtmlx.com/docs/products/dhtmlxLayout/samples/init/fullscreen.html?un=1230021234000
2. attach toolbar
    http://dhtmlx.com/docs/products/dhtmlxLayout/samples/global/toolbar.html?un=1230021301000
    http://dhtmlx.com/docs/products/dhtmlxLayout/samples/components/toolbar.html?un=1230021362000
Answer posted on Dec 23, 2008 07:28
For anyone else running into this, the examples helped figure out what I was doing wrong.  The key is to not attach the Toolbar to a cell. I haven't seen it in documentation anywhere but the Layout then assumes the toolbar needs to be at the top.  So you would use an example like this.  You would use document.body instead of attaching it to a div like so:

<script>
    var dhxLayout = new dhtmlXLayoutObject(document.body, "3W", "dhx_blue");
    dhxLayout.cells("a").setWidth(200);
    dhxLayout.cells("c").setWidth(200);
    dhxLayout.cells("a").setText("test");
    dhxLayout.cells("b").setText("test");
    dhxLayout.cells("c").setText("test");
    dhxLayout.cells("b").attachURL("test.php");
    dhxLayout.cells("c").attachObject("calendar");
    dhxLayout.setAutoSize("b", "b");
    dhxLayout.setEffect("resize", true);

    var dhxTree = dhxLayout.cells("a").attachTree(0);
    dhxTree.setImagePath("Path To Images");
    dhxTree.loadXML("includes/tree.xml");
    dhxTree.attachEvent("onClick",onNodeSelect);
    function onNodeSelect(nodeId){
        changeFormAction (nodeId);
    }

    var dhxbar = dhxLayout.attachToolbar()
    dhxbar.setIconsPath("Path To Icons");
    dhxbar.loadXML("includes/toolbar.xml");
    dhxbar.attachEvent("onClick", function(id){
                                   if (id == 'print') {
                                    window.print();
                                   }
                                   if (id == 'logout'){
                                     location.href='includes/users/logout.php';
                                   }
                                }
                    );

</script>
Answer posted by Support on Dec 24, 2008 01:46
It all ok on our side. Here is a demo.
Attachments (1)
demo.zip143.86 Kb