Can tabs be placed directly in the layout header?

Hi,

I am using a layout. One of the cells contains a tab bar. The problem is that the layout cell has a header, which I use to collapse/expand the cell, and the tab bar header, which of course is used to change tabs. The two headers take up too much space and look ugly.

Is it possible for me to have one header that contains the tabs and also contains the triangle icon for collapsing/expanding the cell?

Thanks.

Hi
Attach a fine approach for you. See the sample in attachment.
sample.rar (139 KB)

Thanks - your approach worked, with a couple of modifications. First, in order to show the proper image (and not the text ‘<’), I had to break out individual icons from your dhxlayout_btns.gif - I don’t think there is a way to work with sprites using .addButton.

Second, I had to attach to the onExpand event of my layout to hide the outer header. I also removed the theme specification from the dhtmlXToolbarObject initializer.

My code is as follows:

var t = document.createElement(“DIV”);
t.style.position = “absolute”;
t.style.height = “24px”;
t.style.top = “6px”;
t.style.right = “4px”;
t.style.zIndex = 1001;
t.style.marginTop = “0px”;
t.style.cursor = “pointer”;

tabBar._tabAll.appendChild(t);

var tb = new dhtmlXToolbarObject(t);
tb.setIconsPath(dhx_icon_path);
tb.addButton("open", 0, "", "dhxlayout_dhx_web/dhxlayout_gt.gif", "dhxlayout_dhx_web/dhxlayout_gt.gif");
tb.attachEvent("onClick", function (id) {
    dhxLayout.cells("b").showHeader();
    dhxLayout.cells("b").collapse();
});

dhxLayout.attachEvent("onExpand", function (id) {
    if (id == "b") {
        dhxLayout.cells("b").hideHeader();
    }
});

Here is the collapsed view:


And the expanded view:


Thanks again!

I just gave you signal to start, and you already received from it everything you need.
So you are welcome!