_Fighter
_Fighter

dhtmlx技术使用总结与介绍中文手册

界面的主要元素概述

DHTMLX是一套完整的具有客户端程序效果的界面组件，解决了常见的客户端操作要求。这套组件采用javascript、xml定义组件性征，某些组件甚至可以直接渲染HTML元素。
常见的容器元素包括：布局(layout)、滑动窗口(accordion)、页签(tab)、窗口(window)；
常见的数据元素包括：表格(grid)、树(tree)、选择框(combo)、日历(calendar)；
常见的窗体元素包括：右键菜单(menu)、工具条(toolbar)。

界面组件的使用流程：
(一) 引用必要的头文件，主要包括脚本文件.js以及样式文件.css；所有组件使用都必须引用dhtmlxcommon.js，以及本组件的脚本文件。部分组件还有皮肤样式文件。
(二) 界面组件使用的方式包括(1)使用Javascript、xml对组件进行初始化及(2)直接渲染html元素。
       a) 使用javascript和xml进行初始化的，需要在脚本之前声明一个

，并指明id，再在脚本中利用id对        b) 直接渲染html元素的，需要在脚本之前声明html元素，并指明id，再在脚本中通过dhtmlXxxxxFromxxxx的方法获取html元素的句柄，并加以操作。
(三) 界面组件可以用xml一次性加载数据，但是经验证，xml加载中文数据是会报错。也可以使用javascript逐一加载数据，大多数容器组件提供setContent或者attachObject的方法来加载数据。setContent还有setContentHTML、setContentHref，attachObject还有attachUrl等系列作用类似的方法。
(四) 通常，使用url使容器内容可以由另外一个页面来实现，可以简化本页面的内容，降低框架页面和数据页面的耦合性；访问父容器可使用组件或其内容的_frame属性。但是使用了url以后，会丢失容器的句柄，不利于对容器的回访。
(五) 帮助文档说明：在dhtmlxSuite.zip 压缩包下解压后 打开index.html 文件
文档分为Documentaction 组件的介绍 api的介绍
Samples（各种场景使用）
大部分使用场景在这份官方文档中寻找解决方法

布局

(一) Layout组件采用构造函数dhtmlXLayoutObject新建。此函数接受三个参数，第一个参数是填充目标，可以是HTML元素(div的id)、也可以是窗口、页签等其他容器，第二个参数是布局的样式，如下图所示，第三个参数是皮肤。

dhtmlx页面布局结构

dhtmlx页面布局结构

(二) 可以进一步对layout的响应进行定制，例如通过attachMenu定义右键菜单，通过attachToolbar定义工具条，通过attachStatusBar定义状态条等。
(三) 可以进一步对layout里每个窗体的外观进行定制。首先先要通过dhxLayout的cell方法获取窗体，其次通过setText定义布局的标题，通过showHeader/hideHeader定义标题是否显示，通过expand/collapse定义是否展开，通过dock/undock定义是否最大化，通过setHeight/setWidth定义其尺寸。
(四) 可以进一步对layout的内容进行定制。找到窗体后，通过attachUrl可以再窗体内显示目标url，通过attachXxx可以使用其他dhtmlx组件来填充此窗体。

页签

(一) Tab组件支持渲染html元素，但渲染过程不比从javascript构造简单，因此仍然建议使用构造函数dhtmlXTabBar新建。此函数接受两个参数，第一个参数是填充目标，第二个参数是样式(top、bottom、left、right)。
(二) 接下来必须用setImagePath指明图像资源目录。
(三) 接下来使用addTab为Tab添加页签。addTab接受三个参数，第一个参数是id，第二个参数是label，第三个参数是宽度。
(四) 可以进一步为每个页签指明内容，使用setContent、setContentHTML以及setContentHref可以将其他元素、HTML源代码、其他url作为页签内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Var tabbar= new dhtmlXTabBar( "tab" , "top" );
tabbar.setImagePath( "./tabbar/codebase/imgs/" );
tabbar.setSkinColors( "#FCFBFC" , "#F4F3EE" , "#FCFBFC" );
tabbar.setHrefMode( "iframes" );
 
tabbar.addTab( "s0" , "首页" , "100px" );
tabbar.addTab( "s8" , "159成本核算信息系统" , "150px" );
 
tabbar.setTabActive( "s8" , true , false );
 
tabbar.setContentHref( "s0" , "/" );
tabbar.setContentHref( "s8" , "./159/index.html" );
 
//tabbar.loadXML("module.xml");
tabbar.enableAutoReSize( true );

滑动窗口

(一) Accordion组件构造函数dhtmlXAccordion创建。此函数接受两个参数，第一个参数是填充目标，第二个参数是皮肤。
(二) 通过addItem可以逐一创建面板。此函数接受两个参数，第一个是面板id，第二个是面板标题。
(三) 通过dhtmlXAccordion的cell方法获得窗口内的面板，并通过attachXxx的方法定义每个面板里的页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
"m1" style= "top: 20px;left 20px" >
    
        
            
            
        
    
                 "../159/1/1-1/list.html"
                     onClick= "retrieve(this);return false;" >成本科目维护
            
var dhxLayout = new dhtmlXLayoutObject(document.body, "2U" );
dhxLayout.cells( "b" ).hideHeader();
dhxLayout.cells( "a" ).setWidth( 230 );
dhxLayout.cells( "a" ).setText( "操作清单" );
 
var dhxAccord = dhxLayout.cells( "a" ).attachAccordion();
dhxAccord.addItem( "m1" , "基础信息维护" );
//dhxAccord.addItem("m2", "系统集成");
 
dhxAccord.cells( "m1" ).attachObject( "m1" );
//dhxAccord.cells("m2").attachObject("m2");
 
dhxAccord.openItem( "m1" );
 
function retrieve(url){
dhxLayout.cells( "b" ).attachURL(url);
}

页面布局图

表格

(一) Grid组件可通过HTML元素渲染，Grid组件扩展了html的td元素。Table里首行的 td 可以定义列的操作属性。这些属性包括只读(ro)、单行编辑(ed)、大段文本编辑(txt，类似于