How to set borders that will edge a component?

You have possibility to define borders that will edge the components or decline the borders at all.

The type of the border is specified by the attribute DHTMLX_SKIN. Put it into <head> tag:

<head>
	<script type="text/javascript" charset="utf-8">
		DHTMLX_SKIN = "debug"; // specifies a type of the border
	</script>
	<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8">
	<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
</head>

There are 2 border types:

  • debug - double border
  • touch - single border
    • wide: border-space-border
    • head: not border-space-border
    • clean: nothing

All touch variations have layout-level controlling and specially developed to let you perform smooth components transition.

debug touch
wide head clean

You can specify an individual border for a element, regardless of its nesting, in the range of the selected mode.

As 'debug' mode doesn't have any variants, the feature is applicable just for 'touch' mode.
To set border - use the parameter - type (e.g. type:“wide”)
Please note, borders are the layout feature, i.e. borders can be applied just for layout and its inheritors (specify them before layout blocks: 'cols' or 'rows').

dhx.ui({ container:"box", type:"clean",
		rows:[{ view:"toolbar", id:"topbar"},
		     {type:"head", 
                                 cols:[{
                                        rows:[{ width: 90, template:"I panel"}]
				        },
                                        {type:"wide",
                                                    rows:[{ width: 90, template:"II panel"},
				                          {type:"head",
					                              cols:[{ width: 90, template:"III panel"},
					                                    {type:"wide", 
                                                                                        rows:[{ width: 90, template:"IV panel"},
						                                              {width: 90, template:"V panel"},
						                                              {width: 90, template:"VI panel" }
                                                                            ]},
						                            {type: "clean", 
                                                                                        rows:[{width: 90, template:"VII panel" },
							                                      {width: 90, template:"VIII panel"}
							                    ]}
                                                           ]}
				         ]}
                      ]}
          ]}
)