Start Building Professional
Web Apps Today

Problem with resizing tabbar in layout in tabbar in layout (whew)

I am using a 2U layout with a tabbar in the right cell, and one of the tabs contains another 2U layout with another tabbar in its right cell.

When this tab is active and I resize the outer layout, the content of the inner tabbar does not resize itself.

Snippets of the code:

layout1 = new dhtmlXLayoutObject("mainObj", "2U");
accordion = layout.cells("a").attachAccordion();
tabbar1 = layout.cells("b").attachTabbar();
tabbar1.setHrefMode("ajax-html");
tabbar1.addTab("a","Tab 1","75px");
tabbar1.addTab("b","Tab 2","75px");

When tabbar1 tab "b" is clicked...

tabbar1.forceLoad("b","appt.do");

This loads a jsp that has the following code:

apptLayout = new dhtmlXLayoutObject("apptLayout", "2U");
apptLayout.cells("a").setWidth(173);
apptLayout.cells("a").attachObject("calTable");

apptTabs=apptLayout.cells("b").attachTabbar();
apptTabs.setHrefMode("ajax-html");
apptTabs.addTab("day","Day","75px");
apptTabs.addTab("week","Week","75px");
apptTabs.setContentHref("day", "something.do");

...

All jsp files that are loaded have body tags with "width=100%". When any tab is clicked in the inner tabbar (apptTabs), whatever size apptTabs is at this time doesn't change when splitter in the outer layout is moved. If it's moved to the left, apptTabs doesn't fill cell "b" of the inner layout, and when the outer splitter is move to the right, a horizontal scrollbar is created in cell "b" of the inner layout and apptTabs scrolls off the screen.

I have tried using setSize, enableAutoSize and enableAutoReSize without any good results. Hopefully I have explained this problem well enough.

Thanks.

Attached is a simplified version of the code that shows the problem.  We are using a full compiled version of your suite.  Open "main.html", click on the "Appointments" tab and then try to resize the layout.

Thanks,

Geoff

Hello,
try to apply attachLayout() method for outer tabbar. Please, see the modified main.html
You need to include dhtmlxtabbar_wins.js to use method presented in attached example.

Your example works fine with everything in the same file, but when I try to make it work with the separate files, I get a "Invalid Pointer" exception at "win._content.childNodes[2].appendChild(obj)" when the code executes 'apptLayout.cells("a").attachObject("calTable")'.  What am I doing wrong?  I have attached my example again with the changes.

The problem is in next sequence of commands

apptLayout = tabbar._cells(wins,"appointments").attachLayout("2U");
...
apptLayout.cells("a").attachObject(obj);


when attachLayout called - all previous content of the cell destroyed, which includes <table id="calTable", so on next step when attachObject called, the table can't be located anymore. 

Issue can be easily workarounded by using.

var obj = document.getElementById("calTable")
  apptLayout = tabbar._cells(wins,"appointments").attachLayout("2U");
   
  apptLayout.cells("a").setWidth(173);
  apptLayout.cells("a").attachObject(obj);


With such code reference to object taken before layout creating ( and before existing tab content clearing ) , so it can be safely reused in attachObject command. 

Thanks again for your fabulous support.  All works fine now.