Can multiple layouts share sub layout objects?

Suite and Optimus Suite 5
#1

Hi,

I have a layout using pattern 3U (two cells in the first row, one cell in the second). However, I need to completely hide the top right cell sometimes - including the small bar you see when you collapse a cell.

Reading other posts online, the solution seems to be to create two views - the default view above, and another view using layout 2E (one cell in the first row, one cell in the second).

The problem is that I have to reuse the code in the 3U top-left cell and the 2E top cell. The HTML elements must be identical, because they are referenced by other parts of my code. Only one view can be visible at a time, so naming collisions aren’t an issue.

Can I create a layout object in javascript, then assign it as a sub-layout to both 3U and 2E? If not, how can I share code between layouts? Is this possible?

Here is my current code - it is just one view and there is no way to hide the top right cell yet.

var dhxLayout = new dhtmlXLayoutObject(document.body, “3U”, “dhx_web”);
dhxLayout.cont.obj._offsetTop = 0; // top margin
dhxLayout.cont.obj._offsetHeight = 0; // bottom margin

// A: top-left, tree
dhxLayout.cells("a").setWidth(417);
dhxLayout.cells("a").setText("Loading...");
dhxLayout.cells("a").attachObject("treeContainer");

var toolbar = new dhtmlXToolbarObject("treeContainerToolbar", "dhx_web");
toolbar.setIconsPath(dhx_icon_path);
var tree = new dhtmlXTreeObject("treeContainerTree", "100%", "100%", 0);
tree.setImagePath(dhx_icon_path);

// B: top-right, tabs
var tagsToolbar = new dhtmlXToolbarObject("tagsContainerToolbar", "dhx_web");
tagsToolbar.setIconsPath(dhx_icon_path);
var tag_tree = new dhtmlXTreeObject("tagsContainerTree", "100%", "100%", 0);
tag_tree.setImagePath(dhx_icon_path);
var snippet_tree = new dhtmlXTreeObject("snippetContainerTree", "100%", "100%", 0);
snippet_tree.setImagePath(dhx_icon_path);

var tabBar = dhxLayout.cells("b").attachTabbar();
dhxLayout.cells("b").showHeader();
tabBar.setImagePath(dhx_icon_path);
tabBar.addTab("t1", "Snippets", "80px");
tabBar.setContent("t1", "snippetContainer");
tabBar.addTab("t2", "Tags", "80px");
tabBar.setContent("t2", "tagsContainer");
tabBar.showInnerScroll();
tabBar.setTabActive("t1");

// C: bottom, status - note that for some reason, the footer below is given no vertical space,
// so the height of C must be enough for both.
dhxLayout.cells("c").setHeight(53);
dhxLayout.cells("c").fixSize(false, true);
dhxLayout.cells("c").hideHeader();

var sb = dhxLayout.cells("c").attachStatusBar();
sb.setText(" ");

// Footer
var footer = dhxLayout.attachFooter("buttonBar");

Thanks!

#2

I forgot to include the HTML referenced by my code:

Save New Version   Save Draft   Revert

  Close

#3

First of all I suggest you to use a special footer, instead of a layout cell С:
dhtmlx.com/docs/products/dht … ter.htmlAs i see it will be enough.

About views:

  1. Create ONCE your content to the cell you want to show always.
  2. Create empty div to place temporary your attached content.
  3. Use attachObject() method to attach this DIV to cells.
  4. When you will switch the views, you can attach this content from view1 to the invisible div and then attach to the view2.
#4

Thanks - I removed cell C and added the status bar to the footer. I’ve simplified my code a lot and have given up on completely hiding my layout cell for now - it’s not worth over-complicating the code. I might come back to it later, if so, I’ll post here.

#5

Ok