Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jennifer on Oct 20, 2008 06:23
open dhtmlx forum
attachTabbar() and attachGrid() troubles

var dhxLayout = new dhtmlXLayoutObject(document.body, "2U", "dhx_blue");
                        
dhxLayout.cells("b").setWidth(872);
dhxLayout.cells("b").hideHeader();    
dhxLayout.cells("a").setText("Grid Options");

var dhxTabbar = dhxLayout.cells("b").attachTabbar();
dhxTabbar.addTab("a1","Tab 1-1","100px");
dhxTabbar.addTab("a2","Tab 1-2","100px");
dhxTabbar.addTab("a3","Tab 1-3","100px");

So, I have something like the above.
I always get an error on attachTabbar(); saying the object does not support this method.
Can you please verify this indeed works and attach a working sample for me? I also get the same problem when I try to attachGrid() to my tabbar.
To clarify, I have all the required js files attached, incl dhtmlxtabbar_wins.js
Thanks!
Answer posted by Support on Oct 21, 2008 02:29
Are you include js/css tabbar files into the <head> tag>
Answer posted by Jennifer on Oct 21, 2008 05:26

Yes, my includes are quite extensive:

 

<head>

<link rel="stylesheet" href="^CLIENTDIR^css/global.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxGrid/codebase/dhtmlxgrid.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxGrid/codebase/dhtmlxgrid_skins.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxMenu/codebase/dhtmlxmenu.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxMenu/codebase/dhtmlxmenu_modern.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxMenu/codebase/context.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_blue.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxLayout/codebase/dhtmlxlayout.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_black.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxTabbar/codebase/dhtmlxtabbar.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxWindows/codebase/dhtmlxwindows.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_blue.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxAccordion/codebase/dhtmlxcommon.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxAccordion/codebase/skins/dhtmlxaccordion_dhx_black.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxAccordion/codebase/skins/dhtmlxaccordion_dhx_blue.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxAccordion/codebase/skins/dhtmlxaccordion_standard.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxToolbar/codebase/dhtmlxwindows.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxToolbar/codebase/dhtmlxtoolbar.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxToolbar/codebase/dhtmlxtoolbar_xp.css" type="text/css"/>

<link rel="stylesheet" href="^CLIENTDIR^dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_blue.css" type="text/css"/>

<script src="^CLIENTDIR^dhtmlxWindows/codebase/dhtmlxcommon.js">magic</script>

<script src="^CLIENTDIR^dhtmlxWindows/codebase/dhtmlxwindows.js">magic</script>

<script src="^CLIENTDIR^dhtmlxWindows/codebase/ext/dhtmlxwindows_wtb.js">magic</script>

<script src="^CLIENTDIR^dhtmlxWindows/codebase/ext/dhtmlxwindows_wmn.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/dhtmlxcommon.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/dhtmlxgrid.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/dhtmlxgridcell.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/ext/dhtmlxgrid_drag.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/ext/dhtmlxgrid_splt.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/ext/dhtmlxgrid_undo.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/ext/dhtmlxgrid_hmenu.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/ext/dhtmlxgrid_math.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/ext/dhtmlxgrid_nxml.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/ext/dhtmlxgrid_mcol.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/ext/dhtmlxgrid_drag.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/ext/dhtmlxgrid_fast.js">magic</script>

<script src="^CLIENTDIR^dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_cntr.js">magic</script>

<script src="^CLIENTDIR^dhtmlxTabbar/codebase/dhtmlxcommon.js">magic</script>

<script src="^CLIENTDIR^dhtmlxTabbar/codebase/dhtmlxtabbar.js">magic</script>

<script src="^CLIENTDIR^dhtmlxTabbar/codebase/dhtmlxtabbar_start.js">magic</script>

<script src="^CLIENTDIR^dhtmlxTabbar/codebase/dhtmlxtabbar_wins.js">magic</script>

<script src="^CLIENTDIR^dhtmlxLayout/codebase/dhtmlxcommon.js">magic</script>

<script src="^CLIENTDIR^dhtmlxLayout/codebase/dhtmlxlayout.js">magic</script>

<script src="^CLIENTDIR^dhtmlxToolbar/codebase/dhtmlxprotobar.js">magic</script>

<script src="^CLIENTDIR^dhtmlxToolbar/codebase/dhtmlxtoolbar.js">magic</script>

<script src="^CLIENTDIR^dhtmlxToolbar/codebase/dhtmlxcommon.js">magic</script>

<script src="^CLIENTDIR^dhtmlxAccordion/codebase/dhtmlxaccordion.js">magic</script>

<script src="^CLIENTDIR^dhtmlxMenu/codebase/dhtmlxmenu.js">magic</script>

<script src="^CLIENTDIR^dhtmlxMenu/codebase/dhtmlxcommon.js">magic</script>

<script src="^CLIENTDIR^dhtmlxMenu/sources/dhtmlxprotobar.js">magic</script>

<script src="^CLIENTDIR^dhtmlxMenu/sources/dhtmlxmenubar.js">magic</script>

<script src="^CLIENTDIR^dhtmlxMenu/sources/dhtmlxmenubar_cp.js">magic</script>

<script src="^CLIENTDIR^javascript/prototype.js">magic</script>

<script src="^CLIENTDIR^javascript/NumberFormat154.js">magic</script>

<script src="^CLIENTDIR^javascript/generalTM.js">magic</script>

</head>

Answer posted by Support on Oct 21, 2008 06:49
Could you please provide live link for us?
Answer posted by Jennifer on Oct 21, 2008 06:55

I debugged and traced the problem back to dhtmlxwindows.js file. For some reason this line:

this.tabbar.setSkin(this.skin);

was what was causing the problems. Not sure why, but I changed it to something simpler:

this.tabbar.setSkinColors("#FFFFFF","#FFFFFF");

and now it works!

Thanks for your guidance, sorry for all the trouble!

 

Answer posted by Support on Oct 21, 2008 08:53
It highly probably that you have mixed files from different version of components. 
The older version of tabbar had not setSkin method, which cause error in your case  - be sure to use latest versions of components , when working with layout
( according to your includes you are using old version of menu as well )