DHTMLX

Start Building Professional
Web Apps Today

dhtmlxSuite 4.2
dhtmlxScheduler 4.3
dhtmlxVault 2.4
dhtmlxGantt 3.2
dhtmlxSuite 4.2

Categories

Question details Back To List

Question posted by Bernard on Nov 03, 2009 07:26

open dhtmlx forum

Layout attach on 2 cells

Dear All,

i have succed attach tree in cell a (using 2U layout) now i want to attach to cell b an accordion, i have try several way to make it, but always fail. here is my code :

Thanks for your help
regards

<!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>
    <title>CCBDG Application Suit</title>

    <link rel="stylesheet" type="text/css" href="dhtmlxLayout/codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
    <script src="dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
    <script src="dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>

    <link rel="STYLESHEET" type="text/css" href="./dhtmlxTabbar/codebase/dhtmlxtabbar.css">
    <script src="./dhtmlxTabbar/codebase/dhtmlxcommon.js"></script>
    <script src="./dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
    <script src="./dhtmlxLayout/codebase/dhtmlxlayout.js"></script>

    <link rel="STYLESHEET" type="text/css" href="./dhtmlxTree/codebase/dhtmlxtree.css">
    <script src="./dhtmlxTree/codebase/dhtmlxcommon.js"></script>
    <script src="./dhtmlxTree/codebase/dhtmlxtree.js"></script>

    <script language="JavaScript" src="./dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
    <script language="JavaScript" src="./dhtmlxMenu/codebase/ext/dhtmlxmenu_ext.js"></script>

    <script src="./dhtmlxAccordion/dhtmlxcommon.js"></script>
<script src="./dhtmlxAccordion/dhtmlxaccordion.js"></script>
<link rel="stylesheet" type="text/css" href="./dhtmlxAccordion/dhtmlxaccordion_dhx_blue.css">


    <div id="parentId" style="width:100%; height:100%; aborder: #B5CDE4 1px solid;"></div>

    <style>
            html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script>
    var dhxLayout;
        dhxTree;
        dhxTabbar;
        dhxText;
        dhxAccord;

    function doOnLoad()
    {
    dhxTabbar=new dhtmlXTabBar("parentId","top");
dhxTabbar.setSkin('dhx_skyblue');
dhxTabbar.setImagePath("./dhtmlxTabbar/codebase/imgs/");

    dhxTabbar.addTab("a1","Service Control","150px");
    dhxTabbar.setTabActive("a1");
    dhxTree = dhxTabbar.cells("a1").attachLayout("2U").cells("a").attachTree();
    dhxTree.setImagePath("./dhtmlxTree/codebase/imgs/csh_vista/");
dhxTree.loadXML("./dhtmlxTree/samples/common/tree.xml?etc=" + new Date().getTime());

    dhxTabbar.addTab("a2","Service Support","150px");
    dhxTabbar.setTabActive("a2");
    dhxTree = dhxTabbar.cells("a2").attachLayout("2U").cells("a").attachTree();
dhxTree.setImagePath("./dhtmlxTree/codebase/imgs/csh_vista/");
dhxTree.loadXML("./dhtmlxTree/samples/common/tree.xml?etc=" + new Date().getTime());

    dhxTabbar.addTab("a3","Service Operation","150px");
    dhxTabbar.setTabActive("a3");
    dhxTree = dhxTabbar.cells("a3").attachLayout("2U").cells("a").attachTree();
dhxTree.setImagePath("./dhtmlxTree/codebase/imgs/csh_vista/");
dhxTree.loadXML("./dhtmlxTree/samples/common/tree.xml?etc=" + new Date().getTime());

    dhxTabbar.addTab("a4","Complain Handling","150px");
    dhxTabbar.setTabActive("a4");
    dhxTree = dhxTabbar.cells("a4").attachLayout("2U").cells("a").attachTree();
dhxTree.setImagePath("./dhtmlxTree/codebase/imgs/csh_vista/");
dhxTree.loadXML("./dhtmlxTree/samples/common/tree.xml?etc=" + new Date().getTime());


    }

Answer posted by Alex (support) on Nov 03, 2009 07:35

Hello.

here is the possible method:

var layout = dhxTabbar.cells("a4").attachLayout("2U");

var dhxTree = layout.cells("a").attachTree();
dhxTree.setImagePath("./dhtmlxTree/codebase/imgs/csh_vista/");
dhxTree.loadXML("./dhtmlxTree/samples/common/tree.xml?etc=" + new Date().getTime());

var accordion = layout.cells("b").attachAccordion();

Answer posted by Bernard on Nov 03, 2009 07:51

Dear Alex,

I try like this, but still cannot run, which part i'm wrong ?

dhxTabbar.addTab("a4","Complain Handling","150px");
dhxTabbar.setTabActive("a4");
//dhxTree = dhxTabbar.cells("a4").attachLayout("2U").cells("a").attachTree();
//dhxTree.setImagePath("./dhtmlxTree/codebase/imgs/csh_vista/");
//dhxTree.loadXML("./dhtmlxTree/samples/common/tree.xml?etc=" + new Date().getTime());

var layout = dhxTabbar.cells("a4").attachLayout("2U");
var dhxTree = layout.cells("a").attachTree();
dhxTree.setImagePath("./dhtmlxTree/codebase/imgs/csh_vista/");
dhxTree.loadXML("./dhtmlxTree/samples/common/tree.xml?etc=" + new Date().getTime());
var accordion = layout.cells("b").attachAccordion();
accordion.addItem("b","item a");

}

Answer posted by Alex (support) on Nov 03, 2009 08:17

Please have a look at the attached sample. Possibly it'll help to resolved the issue

Attachments (1)

sample.zip

113.33 Kb

Answer posted on Nov 04, 2009 07:29

Ok alex, it's very helpful

Thanks a lot,

BR,

Bernard