Layout - Best Practices

Hello,

I really like the dhtmlx Layout module but am still getting oriented. Currently I have a screen that requires a couple shapes, 2E and 3L and would like to know the best practice to perhaps switch them in and out.

What I am trying now is, I make a 1C as base layout that is permanent, with primary toolbar.
dhxBaseLayout = new dhtmlXLayoutObject(document.body, “1C”, dhxSkin);

and then attachLayout(“2E”)
dhxLayout = dhxBaseLayout.cells(“a”).attachLayout(“2E”);

This layout’s cell “a” gets a toolbar and grid.

Later, to switch to 3L, I have to think that there is a proper destruction procedure so that I may get to eventually…
dhxLayout = null;
dhxLayout = dhxBaseLayout.cells(“a”).attachLayout(“3L”);

This layout’s cell “a” gets accordion with grids, then in “b” a toolbar and grid.

I am wondering what is the best practice to cleanup (destroy objects) to run best.

  • Mike

Hello,

layout can’t change its structure without being destored and moreover, in this case the content is removed too.
What we would recommend is to create the 3L layout initially (with the accordion in the “a” cell), but to keep “a” cell collapsed until it needs displaying. So, the layout will look like 2E, but with a narrow vertiacal panel. If this solution is appropriate, we can provide you the approach that allows to keep the “a” cell closed.

Thank you, and that makes good sense, and was my first approach.

What I ran into is, our designers did not want to see the collapsed accordion cell because the frequncy of its usage is low. I tried hiding it (3L’s cell “a”) but wasn’t able to.

Might there be a way to completely hide the collapsed cell and reclaim the space, so that it looks like 2E?

Or… What I had been doing, that is having a primary layout that persists (1C) and then swapping in 2E and 3L really seems to fit the bill. However I did have grid issues popup.

The grids were destroyed prior to nulling the layout (as correctly as I know how) but there was a particular line of code that kept sufacing with Object Expected, the line from dhtmlx.js was…
if(this.grid) { this.grid.setSizes(); }

It happens on the following attachLayout()