Adding a dhtmlxTabbar to dhtmlxLayout?

Suite and Optimus Suite 5
#1

I’m having trouble adding a simple Tabbar to one of the cells of dhtmlxLayout.

If I use the following code to create the Tabbar…

dhxTabbar = dhxMainLayout.cells(“c”).attachTabbar();

How do I control the “mode”? The tabs are showing up as a “left” orientation when I want it to be “top”.

If I create the tab using:
dhxTabbar = new dhtmlXTabBar(“a_tabbar”, “top”);

then how do I add it to dhxMainLayout?

Also, in the first case, how do I associate it with a div?

Finally, the tabs are not formatting properly, just looks like a bunch of text… I’m thinking it is not finding the skin/image path?

dhxTabbar.setSkin(‘dhx_skyblue’);
dhxTabbar.setImagePath("…/codebase/imgs/");

I’ve tried every combination of path (“codebase/imgs/”, “…/codebase/imgs/”, …/…/codebase/imgs", etc) but it doesn’t seem to work properly.

Please help…!

#2

How do I control the “mode”?

You may pass mode as a parameter of the attachTabbar method:

dhxTabbar = dhxMainLayout.cells(“c”).attachTabbar(“top”);

The tabs are showing up as a “left” orientation when I want it to be “top”.

“top” mode is default. So, attachTabbar couldn’t initialize “left” tabbar.

Also, in the first case, how do I associate it with a div?

tabbar container is created dynamically if you use attachTabbar method.

If you want to place tabbar a certain container, you need to use dhxTabbar = new dhtmlXTabBar(“a_tabbar”, “top”);

And “a_tabbar” could be inside layout cell.

Finally, the tabs are not formatting properly, just looks like a bunch of text… I’m thinking it is not finding the skin/image path?

Check that image path is correct.

The working demo in the Suite package is
dhtmlxLayout/samples/04_components/04_tabbar.html

#3

Still having issues with Tabbar… please see attached screen shot.

Here is the simple code to initialize the tabbar. For test purposes, I’m trying to add the tabbar to region “d” of the 4I layout.

                            var dhxMainLayout = new dhtmlXLayoutObject("parentId", "4I", "dhx_blue");

…
…

                            var dhxTabbar = dhxMainLayout.cells("d").attachTabbar('top');
			dhxTabbar.setSkin('dhx_blue');
			dhxTabbar.setImagePath("codebase/imgs/");
			
			dhxTabbar.addTab("a1", "Tab 1-1", "100px");
			dhxTabbar.addTab("a2", "Tab 1-2", "100px");
			dhxTabbar.addTab("a3", "Tab 1-3", "100px");

On my local system, the images are available at this url, so should be simply “codebase/imgs/” ??
localhost:8080/genesys-brgui/cod … bottom.gif
TabbarScreenShot.zip (33.2 KB)

#4

Make sure that dhtmlxtabbar.css is included in the page.

#5

I had it but had it spelled wrong :blush:

Thanks!

Spasibo rabotaet karasho!