讲一讲dhtmlx

浏览数：50 / 时间：2015年06月09日

官网链接：http://dhtmlx.com/docs/products/dhtmlxTouch/

说明

dhtmlx功能十分强大，作为免费且开源的基于html5的javascript library，dhx的功能十分强大。[It‘s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, robust web applications that run on iOS, Android, and other mobile platforms.]

dhtml的基本语法

dhx.ui({..\\ 定义一个view，放置任意组件})

$$(‘row_logs‘) 声明id? 引用id来找到对应的控件

事件

onDocumentReady dhx.Ready(function(){…})The alternative to ‘onDocumentReady‘ event is dhx.Ready(function(){…}) function. So, to ensure that your code will be executed as soon as the page finishes loading, put all your code inside this function. 类似onLoad

type:"MainBar"
type:"round"
header:true
{
id:"grid", view:"grid", header:true,
fields:[{ id:"Name",
label:"Name",
...
},
{ id:"email",//specifies the second column of the grid
label:"email",
}]
理解View与element的关系：每一个view有点像android中的framelayout

$(document).ready(function(){} jquery 当页面加载完成以后

Dhx.ready 当documen已经加载完

Layout

toolbar.push({"width":div_width_gap});
{ template:"top" },
template:"<div style=‘float:left‘><div class=‘title‘>#title#</div> <div class=‘author‘>by #author#</div></div>"
1设置边界以分隔组件
控制1“Type用于指定块与块之间的间隔。layout blocks (‘cols‘ or ‘rows‘)
dhx.ui({ type:"space",// specifies a type of the border rows:[{ ... }]})
‘line‘(default) 所有视图间无间隔，但有一条线
‘wide‘,与父视图间无间隔，子视图间有间隔
‘head‘ 类似wide
‘clean‘ 没有任何间隔
‘space‘ 所有视图间等间隔
或 type:{ height:35 }

DHTMLX Touch allows to set border, padding and margin of a component.
控制2：padding margin
Padding是内边距，是站在自己的角度就是内容与边框的距离；margin是外边距，是站在容器的角度就是边框与其他元素的距离。

动态设置大小和调整

调用Resize()，该元素的所有子子元素与父容器都会重新确定大小。
{
view:"toolbar", type:"SubBar",
elements:[{ view:"button", inputWidth:200, value:"Resize", click:resize}]
},

　　 function resize(){
　　 $$(‘list1‘).define("height", 300);
　　 $$(‘list1‘).define("width", 500);
　　 $$(‘list1‘).resize();
　　 };
调整该元素的大小为其父元素的大小，但是子元素大小不改变
function adjust(){
document.getElementById(‘divB‘).style.height="200px";
list2.adjust();
}
若是想修改同一父容器内的多个子元素的大小，可以通过父容器的resize(true)方法。实现方式：重绘所有的子元素。
$$(‘list1‘).define("width", 300);
$$(‘list2‘).define("width", 100);
...
$$(‘layout_id‘).resize(true);