custom query builder html page can not be resized ?

i want to use dhtmlx to build a application interface like posted attchment ,



the query builder can be hided and displayed by click a toolbar button ,the work is almost done ,but the my custom query builder in layout can not be resized ,can you give me some suggestion about how to use the dhtmlx’s layout,toolbar,tabbar,grid to build such interface ,so that the query builder part of the interface can be resized with tabbar and grid? how can i attach the custom query builder like object to tabbar with a toolbar above it and a grid beneath it? what is the best layout arrangement about such interface?
thanks for your kind help!

There is no possility to place select in to tabbar header as well as tabs.

Here are samples that could be usefull:

dhtmlxLayout/samples/01_init/inc/fullscreen_inner.html
dhtmlxLayout/samples/04_components/04_tabbar.html
dhtmlxTabbar/samples/05_components/09_menu_inside.html
dhtmlxTabbar/samples/05_components/01_grid_inside.html

thanks for your reply。my main problem is when i attach dhtmlx’s object (such as grid,tabbar) to layout the attached object can be resized correctly with layout,but when i attach my own object (such as my custom query builder ) ,it can not be resized correctly ! how can i do it ?

Grid, tabbar and some other components have setSizes method that recalculates and adjusts all sizes. And if the component is attached to the layout, the layout sets event listeners which call this setSizes method when layout sizes are changed.

If you have attached html container with 100% width and height, it will also be resized. However, layout doesn’t apply any listeners to the content of this container. Therefore, you need to set event handlers to resize content manually as you need.

layout has onPanelResizeFinish event that is called after cell resizing