<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no"> <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> <style> .my_control .item1,.my_control .item2,.my_control .item3{ float:left; } .my_control .item1{ background:#ccffff; } .my_control .item2{ background:#ffccff; } .my_control .item3{ background:#ccccff; } </style> <script> dhx.protoUI({ name:"custom", $init:function(config){ this.$view.className = "my_control"; this.$view.innerHTML = "<div class='item1'></div><div class='item2'></div><div class='item3'></div>"; }, defaults:{ controlHeight:100 }, item1_setter:function(value){ if(value) this.$view.childNodes[0].innerHTML = value; return value; }, item2_setter:function(value){ if(value) this.$view.childNodes[1].innerHTML = value; return value; }, item3_setter:function(value){ if(value) this.$view.childNodes[2].innerHTML = value; return value; }, $getSize:function(){ return [1,-1,0,this.config.controlHeight]; }, $setSize:function(x,y){ if (dhx.ui.view.prototype.$setSize.call(this,x,y)){ var itemWidth = Math.round(this.$width/3); for(var i=0;i<3;i++){ this.$view.childNodes[i].style.width = (i==2?this.$width-(itemWidth*2):itemWidth) +"px"; this.$view.childNodes[i].style.height = this.$height+"px"; } } } }, dhx.MouseEvents, dhx.EventSystem, dhx.ui.view); </script> </head> <body> <script> dhx.ready(function(){ dhx.ui({ cols:[ { rows:[ { height: 50, view:"custom", item1:"one", item2:"two",item3:"three" }, { template: "Row 2" } ] }, { template:"Column 2" } ] }); }); </script> </body> </html>