Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Eduardo on Sep 09, 2009 12:39
open dhtmlx forum
Problems with dhxTabbar inside dhxLayout after we migrated to version 2.5 of the dhtmlx suite

Hi, We just upgraded to the 2.5 version and we are having some issues even after doing the changes needed for migration according with the documentation.

In the example below when we close a tab it raises an error (please note we are using the dhtmlx full distribution). The error it’s in line 2536 column 385 of dhtmlx.js:

d1.style[this._dx]=w-2+”px”; (at runtime w is NaN).

Also we don’t se the text of the statusbar attached to the layout.

This is the page that shows part of the problems we are facing:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link href="Dhtmlx25Full/dhtmlx.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
     padding: 0px;
     font-family: verdana, arial, helvetica, sans-serif;
     color: #333;
     background-color: #F4F5EB !important ;
}
</style>
<script src="Dhtmlx25Full/dhtmlx.js" type="text/javascript"></script>
</head>
<body>
<input id="BttnNew" type="button" value="New" onclick="BttnNew_Click();" />
<script type="text/javascript">
function BttnNew_Click() {
dhxTabbar.removeTab("new", true);
dhxTabbar.addTab("new", "google", '100px');
dhxTabbar.setContentHref("new", "http://www.google.com");
dhxTabbar.setTabActive("new");
}
// ----- Dhtmlx init ------
var imgPath = 'Dhtmlx25Full/imgs/';
window.dhx_globalImgPath = imgPath;
var dhxLayout = new dhtmlXLayoutObject(document.body, "3T");
var status = dhxLayout.attachStatusBar();
dhxLayout.cells("a").hideHeader();
dhxLayout.cells("b").hideHeader();
dhxLayout.cells("c").hideHeader();
dhxLayout.cells("a").setHeight(100);
dhxLayout.cells("a").fixSize(true, true);
dhxLayout.cells("b").setWidth(250);
var dhxStatus = dhxLayout.attachStatusBar();
var lblProd = '"MyProduct (v 1.0)"';
var lblUrlCompany = '<a href=\"http://www.myserver.com/\" target=\"_blank\" style=\"font: 9px/10px verdana, arial, helvetica, sans-serif;\">MyCompany</a>';
var lblCopyright = 'Copyright © ';
var lblSeparador = '    |    ';
dhxStatus.setText(lblProd + lblSeparador + lblUrlCompany + lblSeparador + lblCopyright);
dhxLayout.cells("b").attachObject('BttnNew');
var dhxTabbar = dhxLayout.cells("c").attachTabbar();
dhxTabbar.setImagePath(imgPath);
dhxTabbar.setStyle("winDflt");
dhxTabbar.setHrefMode("iframes");
dhxTabbar.preventIECashing(true);
dhxTabbar.enableForceHiding(true);
dhxTabbar.enableAutoSize(true, true);
dhxTabbar.enableAutoReSize(true);
dhxTabbar.enableAutoSize(true, true);
dhxTabbar.enableTabCloseButton(true);
</script>
</body>
</html>


Thanks!
Answer posted by Support on Sep 10, 2009 07:01
Are you using beta package or final version of 2.5 ?
The same sample is working correctly ( IE8 | FF ) with final version of 2.5, locally. 
If issue still occurs for you - please provide info about used browser

>>Also we don’t se the text of the statusbar attached to the layout.
var status = dhxLayout.attachStatusBar(); 
...
var dhxStatus = dhxLayout.attachStatusBar(); 

So you attaching status bar twice. Just comment first line and all will work correctly. 


Also, you must not use  the next commands, when tabbar is attached to layout - it will auto-size automatically. 
dhxTabbar.enableAutoSize(true, true); 
dhxTabbar.enableAutoReSize(true);
dhxTabbar.enableAutoSize(true, true);
Answer posted by Support on Sep 10, 2009 08:11
We were able to reconstruct the issue which is described in the first post
As fast solution you can remove second parameter from removeTab command, it will cause a problems if there is no tabs , which can be selected.

If you need an updated version of js file - please contact us directly at support@dhtmlx.com 
Answer posted by Eduardo Santisbón on Sep 11, 2009 11:05

You are correct about the double statusbar, it was a mistake on our part when doing the page to reproduce the tabbar problem.

Regarding the issue in the tabbar, we will try a fix provided by the dhtmlx support team; it’s not enough to remove second parameter from removeTab command as there are errors even when we use the close icon to close the tabs.

Answer posted by Eduardo Santisbón on Sep 11, 2009 11:29

After more exhaustive testing it’s seem than in fact  the tab closing  problem is fixed just removing the second parameter to the removeTab command.

We are having other issues after the migration but at least this fix seems to work and is easy to implement for the issue reported first.

Answer posted by Eduardo Santisbón on Sep 11, 2009 16:10

Disregard my last comment. The issue is still open on our side and using removeTab without the second parameter is not a fix for us.

We are waiting for a fix from the support team.

Answer posted by Micha Hastrich on Oct 22, 2009 05:47
Same Error here:

var dhxLayout40 = dhxtabbarAll._cells(dhxWins2, “all1”).attachLayout(“3L”);

[…]

var dhxtabbarB = dhxLayout40.cells(“b”).attachTabbar(); rechts unten \r\n

Debug says: Error: dhxLayout40 is undefined

Same Error here:

var dhxtabbar = dhxLayout40.cells(“c”).attachTabbar(); rechts unten […]

dhxtabbar.setContentHTML(“mdxa2”, mdx);\r\n

Debug says: Error: dhxtabbar is undefined

Any suggestions?


Answer posted by Micha Hastrich on Oct 22, 2009 07:38
Code here is:

var dhxtabbarAll = dhxLayoutAll.cells("a").attachTabbar();
dhxtabbarAll.enableAutoSize(true,true);
dhxtabbarAll.enableTabCloseButton(false);
dhxtabbarAll.setHrefMode("iframes");
dhxtabbarAll.setSkinColors("#FCFBFC","#F4F3EE");
dhxtabbarAll.setImagePath("dhtmlx/dhtmlxTabbar/codebase/imgs/");

So we're using iframe mode here.
And where do i have to use parent now?

dhxtabbarAll.addTab(xxx, xxx);
// Workaround in Version 2.5 as Replacement for dhxtabbarAll.enableAutoRow(true);
dhxtabbarAll.normalize();
dhxtabbarAll.setTabActive("all1");

var layoutChart = dhxtabbarAll._cells(dhxWins, "all2").attachLayout("3L");
Error occurs here.