Start Building Professional
Web Apps Today

toolbar on top and tree below in tabbar

Hi!

I am not smart enough to get a toolbar on top and a tree below it to show up in a tabbar.
The tree should get alle the space below the toolbar.

nvTab.setHrefMode("iframes");
nvTab.addTab("nav","Navi","*");

var aDiv="<div id=\"nav_all\">";
var tDiv="<div id=\"nav_tool\" style=\"width: 100%; height: 100%; margin: 0px; overflow: hidden; position: relative;\"></div>";
var nDiv="<div id=\"nav_tree\" style=\"width: 100%; height: 100%; margin: 0px; overflow: hidden; position: relative;\"></div>";
var eDiv="</div>";
nvTab.setContentHTML("nav",aDiv+tDiv+nDiv+eDiv);
var aBar = new dhtmlXToolbarObject("nav_tool","standard");
var aTree = new dhtmlXTreeObject("nav_tree","100%","100%",0);
nvTab.setContent("nav","nav_all");

If i wrap in table,tr,td like the examples i get scrollbar problems.

var aTab="<table id=\"nav_all\" width=\"100%\" height=\"100%\">";
var tDiv="<tr><td valign=\"top\" width=\"100%\" height=\"20px\"><div id=\"nav_tool\" style=\"width: 100%; height: 100%; margin: 0px; overflow: hidden; position: relative;\"></div></td></tr>";
var nDiv="<tr><td valign=\"top\" width=\"100%\" height=\"100%\"><div id=\"nav_tree\" style=\"width: 100%; height: 100%; margin: 0px; overflow: hidden; position: relative;\"></div></td></tr>";
var eTab="</table>";
nvTab.setContentHTML("nav",aTab+tDiv+nDiv+eTab);
var aBar = new dhtmlXToolbarObject("nav_tool","standard");
var aTree = new dhtmlXTreeObject("nav_tree","100%","100%",0);
nvTab.setContent("nav","nav_all");

Can you please give me a hint how to achieve this.
Thanks in advance.
aphily

If you are using layouts - you can use tab content as cell and use attachToolbar and attachTree to take whole space of the tab. 

Hi,

Thanks for the answer, but I dont get it.

 var dhxLayout = new dhtmlXLayoutObject(document.body, "3L");
 var nvTab = dhxLayout.cells("a").attachTabbar();
 var dhxBar = dhxLayout.cells("a").attachToolbar();

Gives me the toolbar above the Tab not in the Tab

 var dhxLayout = new dhtmlXLayoutObject(document.body, "3L");
 var nvTab = dhxLayout.cells("a").attachTabbar();
 var dhxBar = dhxLayout.cells("a").attachToolbar();
 var dhxTree = dhxLayout.cells("a").attachTree();

Gives me an out of memory error. ( which doesnt matter here)

 var dhxLayout = new dhtmlXLayoutObject(document.body, "3L");
 var nvTab = dhxLayout.cells("a").attachTabbar();
 var dhxBar = dhxLayout.cells(nvTab).attachToolbar();
 var dhxTree = dhxLayout.cells(nvTab).attachTree();

Gives me an javascript error.

I want the toolbar and the tree in the tab and give tree the whole space of the tab minus the toolbar.

Best regards,

aphily

 

 

 var dhxLayout = new dhtmlXLayoutObject(document.body, "3L");
 var nvTab = dhxLayout.cells("a").attachTabbar();
nvTab.addTab("a1","some","100")
nvTab.cells("a1").attachToolbar();
nvTab.cells("a1").attachTree();

don't forget to include dhtmlxtabbar/ext/dhtmlxtabbar_wins.js , it necessary for such functionality 

Great! Thanks a lot!

Just for others trying:

Path is dhtmlxtabbar/codebase/ext/dhtmlxtabbar_wins.js

aphily