Layout - Skin change does not update seperator width/height

Suite and Optimus Suite 5
#1

To replicate:

  1. Adjust “hor_sep_height” and “hor_sep_width” of “dhx_black” skin to be “10” (or any other value than “5”) in dhtmlxlayout.js (in “this.skinParams”).
  2. Update the appropriate CSS styles.
  3. Open the “skinning” example page.
  4. Switch from “dhx_skyblue” to “dhx_black” skin.

Expected result:
The seperators should be equal to the size defined in the skin and CSS.

Actual result:
The seperators are not resized as part of the skin change.

Notes:
It seems as though the only time the seperator size values are used is in the “_xmlParser” function, which is not referenced in the “setSkin” function or any of its sub-functions. So the problem isnt’ so much that the seperators aren’t resized, but that the cells themselves are not.

Is there any way to change this value and have it take effect without reloading the entire layout?

Thanks,

  • Dave
#2

You may modify the setSkin method, dhtmlxlayot.js:

this.setSkin = function(skin) { ... /*modification start*/ for (var a in layout.sepVer) layout.sepVer[a].style.width = this.skinParams[this.skin]["ver_sep_widthx"]+"px"; for (var a in layout.sepHor) layout.sepHor[a].style.height = this.skinParams[this.skin]["ver_sep_width"]+"px"; /*modification end*/ this.setSizes(); }

#3

Even adjusting “layout” to be “this” in the above code, errors are thrown when setSkin is called (“this.sepVer[a].style is undefined”, for example.)
Wrapping the width assignments in try/catch blocks to prevent these errors (not the correct answer to the problem, but it gets past the error for now) still does not cause the seperators to resize. Technically, the seperators DO resize, but the size of the cells do not adjust to reflect the new available space.

What we are looking for is a limited “maximize cell” ability. We’re close with the below code:

// Adjust the setSkin function as suggested, with modifications
this.setSkin = function(skin) {
...
		/*modification start*/
		for (var a in this.sepVer) {
			try{this.sepVer[a].style.width = this.skinParams[this.skin]["ver_sep_width"]+"px";}catch(e){}
		}
		for (var a in this.sepHor) {
			try{this.sepHor[a].style.height = this.skinParams[this.skin]["ver_sep_height"]+"px";}catch(e){}
		}
		/*modification  end*/
		this.setSizes();
}

// Create an interface for adjusting the skin properties
dhtmlXLayoutObject.prototype.setHeaderSize = function(height,collapsedHeight,collapsedWidth,seperatorWidth,seperatorHeight) {
	this.skinParams[this.skin]["cpanel_height"] = !isNaN(parseInt(height))?height:this.skinParams[this.skin]["cpanel_height"];
	this.skinParams[this.skin]["cpanel_collapsed_height"] = !isNaN(parseInt(collapsedHeight))?collapsedHeight:this.skinParams[this.skin]["cpanel_collapsed_height"];
	this.skinParams[this.skin]["cpanel_collapsed_width"] = !isNaN(parseInt(collapsedWidth))?collapsedWidth:this.skinParams[this.skin]["cpanel_collapsed_width"];
	this.skinParams[this.skin]["ver_sep_width"] = !isNaN(parseInt(seperatorWidth))?parseInt(seperatorWidth):this.skinParams[this.skin]["ver_sep_width"];
	this.skinParams[this.skin]["ver_sep_height"] = !isNaN(parseInt(seperatorHeight))?seperatorHeight:this.skinParams[this.skin]["ver_sep_height"];
	this.setSkin(this.skin);
}

// Build the layout
myLayout = new dhtmlXLayoutObject(document.body,"3L");
// Set the collapsed header sizes and seperator sizes to 0, leave expanded size at current
myLayout.setHeaderSize(null,0,0,0,0);
//Collapse all but one cell, which is the one that will be maximized:
myLayout.forEachItem(function(item){
	if (item.getId()!="b") {
			item.collapse();
	}
});

What you should see is the “b” cell fully expanded except for a small border (5px - the size of the seperator) on the left and bottom. A target of “c” will have a border on the left and top instead. In other words, anywhere where there normally should be a seperator, space is being reserved for the old seperator size.
(Note that a target of “a” will leave “b” open. While this prevents a true “maximize” ability for any layout, it is not a requirement for us and thus is not something we’re worried about.)

Thanks!

  • Dave