Start Building Professional
Web Apps Today

tabbar causing overflow inside layout

Hello,

I have scrollbars showing when attaching a grid to a tabbar object like so:

----------------------------------------
// open window
ajaxExt_NumNCallsWindow = dhxWins.createWindow('ajaxExt_NumNCallsWindow', 0, 0, 922, 640);
ajaxExt_NumNCallsWindow.centerOnScreen();
ajaxExt_NumNCallsWindow.setText('Network Call Stats');
ajaxExt_NumNCallsWindow.button('park').disable();
ajaxExt_NumNCallsWindow.button('park').hide();
    // attach layout
ajaxExt_NumNCallsLayout = ajaxExt_NumNCallsWindow.attachLayout('2E', 'dhx_blue');
    // cell a
ajaxExt_NumNCallsLayout.cells('a').hideHeader();
ajaxExt_NumNCallsLayout.cells('a').setHeight(30);
    // cell b
ajaxExt_NumNCallsLayout.cells('b').hideHeader();
    // attach tabbar
var ajaxExt_NumNCallsTabbar = ajaxExt_NumNCallsLayout.cells('b').attachTabbar();
    ajaxExt_NumNCallsTabbar.setImagePath('/3rdparty/dhtmlx/imgs/');
    // tab b1
    ajaxExt_NumNCallsTabbar.addTab('b1', 'Stats', '70px');
ajaxExt_NumNCallsTabbar.setTabActive('b1');
    // tab b2
ajaxExt_NumNCallsTabbar.addTab('b2', 'Detailed Stats', '100px');
ajaxExt_NumNCallsTabbar.setContent('b2', 'ajaxExt_NumNCallsGridContainer');
ajaxExt_NumNCallsGrid = new dhtmlXGridObject('ajaxExt_NumNCallsGridContainer');
ajaxExt_NumNCallsGrid.setImagePath('/3rdparty/dhtmlx/imgs/');
ajaxExt_NumNCallsGrid.setHeader('Date,Number,Calls,Minutes,Revenue');
ajaxExt_NumNCallsGrid.setInitWidths('80,80,50,70,70');
ajaxExt_NumNCallsGrid.setColAlign('left,left,right,right,right');
ajaxExt_NumNCallsGrid.setColTypes('ro,ro,ro,ro,ro');
ajaxExt_NumNCallsGrid.setColSorting('str,str,str,str,str');
ajaxExt_NumNCallsGrid.setColumnsVisibility('false,false,false,false,false');
ajaxExt_NumNCallsGrid.enableMultiselect(false);
ajaxExt_NumNCallsGrid.setSkin('light');
ajaxExt_NumNCallsGrid.preventIECaching(true);
ajaxExt_NumNCallsGrid.init();
ajaxExt_NumNCallsGrid.loadXML('foo.php');
----------------------------------------

Here is my grid container:

<div id="ajaxExt_NumNCallsGridContainer" style="width: 99%; height: 99%; margin: 0px; overflow: hidden;"></div>


If I set the width or height to 99% it works, but the grid doesn't fill the entire tab.

How can I have the grid fill the entire tab please?

Instead of 
ajaxExt_NumNCallsTabbar.setContent('b2', 'ajaxExt_NumNCallsGridContainer'); 
ajaxExt_NumNCallsGrid = new dhtmlXGridObject('ajaxExt_NumNCallsGridContainer'); 

You can use

ajaxExt_NumNCallsGrid = ajaxExt_NumNCallsTabbar.cells("b2").attachGrid();

( you need to have dhtmlx.js included , or if you are using separate js includes - be sure that dhtmlxtabbar_wins.js is included ) 

Great, thank you! -- I did look in the docs but couldn't see this anywhere.

Another quick Q if that's okay, the grid loads okay the first time I open the window, but I get an error the second time:

Error: this.entBox is null
Source File: dhtmlx.js
Line: 96

I am closing the window using the close button in the top-right.

Do I need to do something specific before closing the window, layout, tabbar or grid before closing it?

Thanks,

Martin

Just a quick note, in the previous question I am using attachGrid() and not setContent().

Unfortunately issue can't be reconstructed locally, please try to update existing dhtmlxtabbar_wins.js with attached one ( if you are using dhtmlx.js - just include attached file after it ) 

Fixed, thank you very much!