Start Building Professional
Web Apps Today

collapsing a nested layout

Hi

I am trying to make a layout that isn't one of the default patterns. I am trying to make something like a 4H pattern but with the middle column on the left.

To do this i have tried a 3W pattern with a 2E inside the left column. The problem i have is that i am unable to make the cells in the 2E pattern collapsable. Is there another way to do this?

<div id="tools" style="position:absolute; width:100%; height:100%;"></div>
        <script>
        var dhxToolsLayout = new dhtmlXLayoutObject("tools", "2E", "dhx_blue");
        dhxToolsLayout.setEffect("resize", true);
        dhxToolsLayout.setEffect("collapse", true);
        //set the text for each cell
        dhxToolsLayout.cells("a").setText("Calendar");
        dhxToolsLayout.cells("b").setText("To Do List");
    
        </script>
    
    <div id="treeGrid2">
        test content here
    </div>
    
    
    <div id="parentId" style="position:absolute; width:100%; height:100%;"></div>
     <script>
    var dhxLayout = new dhtmlXLayoutObject("parentId", "3W", "dhx_blue");
    //set the text for each cell
    dhxLayout.cells("a").setText("Tools");
    

    dhxLayout.cells("b").setText("Viewer");
    dhxLayout.cells("c").setText("Item");
    //attach a div to a cell
    dhxLayout.cells("a").attachObject("tools");
    dhxLayout.cells("b").attachObject("treeGrid2");
    
        
    </script>


thanks
Scott

Hello,

Pattern name is 4A, will included in future release,
to add please modify your dhtmlxlayout.js file, add:

this.tplData = {
    ...
    "4A": '<layout><autosize hor="d" ver="b;c;d" rows="2" cols="3"/><row><cell obj="a" resize="ver" neighbors="a;b"/><cell sep="ver" left="a,b" right="c;d" dblclick="c" rowspan="3"/><cell obj="c" resize="hor" neighbors="a,b;c;d" rowspan="3"/><cell sep="ver" left="a,b;c" right="d" dblclick="d" rowspan="3"/><cell obj="d" resize="hor" neighbors="a,b;c;d" rowspan="3"/></row><row sep="true"><cell sep="hor" top="a" dblclick="a" bottom="b"/></row><row><cell obj="b" resize="ver" neighbors="a;b"/></row></layout>',

this._availAutoSize = {
    ...
    "4A_hor": new Array("a;b", "c", "d"),
    "4A_ver": new Array("a;c;d", "b;c;d"),