Tabbar set.content to another dhtmlx component?

Suite and Optimus Suite 5
#1

Hello,
I’m using DHTMLX 3.5 pro edition build 120822.

I’m trying to create an app where each tab connects to a different component that is populated from a database.

So tab(“a1”) connects to dhtmlxLayout object and each layout object (a different one for each tab) has a toolbar. Each layout also connects to another dhtmlx component (for instance, there’s a grid on one ‘page’, scheduler on another, etc.).

And I want the entire app to auto-resize in the browser window.

My question is what should I use for tabbar.setContent? Layout? Grid? Something else?

Any help would be appreciated.
Thanks!

#2

Hello
To use it righr just use one of the next metods:
attachAccordion
attachChart
attachDataView
attachEditor
attachForm
attachGrid
attachLayout
attachTabbar
attachTree

Using attachCOMPONENT you get auto scroll in a tab.

Method attachObject can means setting auto scroll to the object manually in its srtucture.

#3

Thanks for your help, Darya.

One more question: what should I set the Layout to? I think I want full screen initialization, but I don’t think I can have 5 different layouts set to document.window…even if they are in different tabs.

#4

Have you seen our layout online samples?
dhtmlx.com/docs/products/dht … t/samples/
Especially about fullscreen mode:
dhtmlx.com/docs/products/dht … creen.html

What do you mean in " but I don’t think I can have 5 different layouts set to document.window…even if they are in different tabs." ?

#5

Sorry, I’ll try to be more clear.

I have 5 tabs in a tab bar and each tab has a Layout Object attached to it – so 5 layouts total.

Based on the online samples, it looks like in order to make a layout that always fits in the browser, you use:

var dhxLayout = new dhtmlXLayoutObject(document.body, “3L”);

Do I just repeat that 5 times to get 5 layouts that resize, or is there a better way to do this?

#6

If you need to build fullscreen tabbar - you need the next:

dhxLayout = new dhtmlXLayoutObject(document.body, “1C”);
tabbar = dhxLayout.cells(“a”).attachTabbar();
…
tabbar.addTab(“tab1”,“tab1”,“180px”);
…
tabbar.addTab(“tab5”,“tab3”,“180px”);
…
layout1=tabbar.cells(“tab1”).attachLayout("/layout pattern/");
…
layout3=tabbar.cells(“tab5”).attachLayout("/layout pattern/");

But if you are going load in layout only one components (i.e. grid) - you can do the next:
grid1=tabbar.cells(“tab1”).attachGrid(); - and it wiil be resize with your browser.

#7

Darya,

This is not really working for me. The tabbar is resizing horizontally now, but not vertically. I can’t seem to get the layout or grid to attach to the tabbar (do I need to initialize them somewhere first? Before the tabbar? Do they need html divs?). There’s also a light blue box underneath my tabbar (Firefox web dev tools is calling it: div.dhx_tabcontent_zone). I’m so confused. :frowning:

I made up a quick demo and attached it.

Thanks for you help with this.

#8

Do not attach PRO filen here, please.
If you need to share completed demo - do it in support system, please.

I’ve download your demo - wait for an answer.

#9

Here is a working demo for you (place there dhtmlxGrid files to chek it - i’ve attach only tabbar+layout libruary).
demo2.rar (185 KB)

#10

Thanks, Darya! That was just the help I needed! You are awesome!

One more question: Does this allow for toolbars to be attached to each layout?

I have:
toolbar1=layout1.cells(“a”).attachToolbar();
toolbar2=layout2.cells(“a”).attachToolbar();
…etc.

It seemed to work for the first instance, but the second instance got an error:
dhtmlxtoolbar.js(line 7) “this.cont in null”. I must be doing something wrong here…

Thanks again,

#11

Does this allow for toolbars to be attached to each layout?
Yes! Indeed :slight_smile:
You need to attach one toolbar to one cell ONCE - and you will not get any errors.
And you can have as many toolbars, as many cells you have.
But if you are going to use ONE common toolber in each cell - you need to use a little different approach. If you need i can offer you.