dhtmlxLayout应用方法

1.1常用的布局样式： ..................................................................................................... 2 1.2基本用法： ................................................................................................................. 2

1.2.1、Layout_init_object(基本显示方式) .............................................................. 2 1.2.2、Layout_init_window(将其放入一个windows中) ....................................... 2 1.2.3、Layout_init_fullscreen(全屏幕显示) ............................................................ 2 1.2.4、Layout_init_layout(在layout中套入layout完成复杂样式) ...................... 3 1.2.5、Layout_init_api(layout的部分api参数) ..................................................... 3 1.2.6、Layout_init_skinning(更换layout样式) ....................................................... 3 1.2.7、Layout_init_views(更换layout中的内容) ................................................... 4 1.2.8、Layout_conf_access(修改layout的标题) .................................................... 4 1.2.9、Layout_conf_id_index(根据索引得到id、根据id得到相应的索引值) .... 4 1.2.10、Layout_conf_iterator(为layout写入名字) ................................................ 5 1.2.11、Layout_conf_autosize(没看明白) ............................................................... 5 1.2.12、Layout_conf_panels(通过button方法修改layout属性) ......................... 7 1.2.13、Layout_conf_attach_object(layout的项目中加入div并显示其中内容) . 9 1.2.14、Layout_conf_attach_url(给项目加上url地址，可直接嵌入页面) .......... 9 1.2.15、Layout_conf_effects(没看出来有效果) .................................................... 10 1.2.16、Layout_conf_collapsed(给项目折叠时加上标题或者图片) ................... 10 1.2.17、Layout_conf_header_footer(给layout加上header和footer) ............... 10 1.2.18、Layout_global_menu(给layout的上面加上工具) .................................. 10 1.2.19、Layout_ components_XX(给layout加上各种的组件) ............................ 11 1.2.20、Layout_events_XXX(监听layout上的事件) ............................................. 12

2、Accordion .................................................................................................................................. 14

2.1基本用法 ................................................................................................................... 14

2.1.1、Accordion_init_object ................................................................................. 14 2.1.2、Accordion_init_window .............................................................................. 14 2.1.3、Accordion_init_layout ................................................................................. 14

DHX总结记录：

1、Layout：

1.1常用的布局样式：

1.2基本用法：

1.2.1、Layout_init_object(基本显示方式)

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"4I\");在页面上显示

1.2.2、Layout_init_window(将其放入一个windows中)

var windows = new dhtmlXWindows();

windows.enableAutoViewport(false);//控制窗口是否自动显示在页面上 windows.attachViewportTo(\"winVP\")//控制窗口显示在某个特定的div层中

var window_3 = windows.createWindow('window_3', 0, 0, 300, 400);var layout_1 = window_3.attachLayout('3E');

1.2.3、Layout_init_fullscreen(全屏幕显示)

function openLayout() {

window.open(\"inc/fullscreen_inner.html\");//打开指定的新页面 }

1.2.4、Layout_init_layout(在layout中套入layout完成复杂样式)

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"3L\");

layout1 = new dhtmlXLayoutObject(dhxLayout.cells(\"b\"), \"2U\");

1.2.5、Layout_init_api(layout的部分api参数)

var dhxLayoutData = {

parent: \"parentId\",//所属div的id pattern: \"4H\",//基本样式 cells: [{ id: \"a\",

text: \"Navigation\",//每个框的显示的名字 width: 100,

header: false,//框头隐藏 fix_size: [true, null] }, { id: \"b\",

text: \"Advertisement\", height: 100 }, {

id: \"c\",

text: \"Main Page\" }, {

id: \"d\",

text: \"Links\",

collapse: true //默认不打开是折叠式的 }] };

dhxLayout = new dhtmlXLayoutObject(dhxLayoutData);

dhxLayout.cells(\"a\").attachObject(\"objId\");//a中加入objId中的内容

1.2.6、Layout_init_skinning(更换layout样式)

document.getElementById(\"tr_\" + activeSkin).style.backgroundColor = \"#FFFFFF\";

activeSkin = skin; doOnLoad();

document.getElementById(\"tr_\" + activeSkin).style.backgroundColor = \"#CFCFCF\";

1.2.7、Layout_init_views(更换layout中的内容)

onclick='dhxLayout.cells(\"a\").view(\"def\").setActive();'> onclick='dhxLayout.cells(\"a\").view(\"tree\").setActive();'>//两个按钮触发更换的事件

function doOnLoad() {

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"3L\"); dhxGrid = dhxLayout.cells(\"a\").attachGrid();

dhxGrid.setImagePath(\"../../../dhtmlxGrid/codebase/imgs/\");

dhxGrid.loadXML(\"../common/grid.xml?etc=\" + new Date().getTime()); dhxTree = dhxLayout.cells(\"a\").view(\"tree\").attachTree();

dhxTree.setImagePath(\"../../../dhtmlxTree/codebase/imgs/csh_vista/\"); dhxTree.loadXML(\"../common/tree.xml?etc=\" + new Date().getTime()); }

1.2.8、Layout_conf_access(修改layout的标题)

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"3J\"); // 通过 cells修改

dhxLayout.cells(\"a\").setText(\"The Secret of Monkey Island\"); // 通过items 修改

dhxLayout.items[1].setText(\"Monkey Island 2: LeChuck's Revenge\");

1.2.9、Layout_conf_id_index(根据索引得到id、根据id得到相应的索引值)

Get ID by Index //根据索引求id

Get Index by ID //根据id获得索引 var dhxLayout, ids, inds; function doOnLoad() {

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"5I\"); ids = document.getElementById(\"ids\"); inds = document.getElementById(\"inds\");

dhxLayout.forEachItem(function(item) { //遍历layout向id、ids中加入数据

ids.options.add(new Option(item.getId(), item.getId())); inds.options.add(new Option(item.getIndex(), item.getIndex())); }); }

function getId() {

var ind = inds.options[inds.selectedIndex].value; alert(dhxLayout.getIdByIndex(ind)); }

function getIndex() {

var id = ids.options[ids.selectedIndex].value; alert(dhxLayout.getIndexById(id)); }

1.2.10、Layout_conf_iterator(为layout写入名字)

var names = new Array(\"Gothic 3 Forsaken Gods\", \"The Bard's Tale\", \"NFS Undercover\", \"The Punisher\", \"Diablo 2 Lord Of Destruction\"); var newNames = true; var j = 0;

var dhxLayout;

function doOnLoad() {

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"5I\"); }

function update() {//改名字的方法

dhxLayout.forEachItem(function(item) {

item.setText(newNames ? names[j++] : item.getId()); });

newNames = !newNames; j = 0; }

1.2.11、Layout_conf_autosize(没看明白)

1.2.12、Layout_conf_panels(通过button方法修改layout属性)

1.2.13、Layout_conf_attach_object(layout的项目中加入div并显示其中内容)

1.2.18、Layout_global_menu(给layout的上面加上工具)

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"3L\"); //加menu

dhxMenu = dhxLayout.attachMenu(); dhxMenu.setIconsPath(\"common/imgs/\");

dhxMenu.loadXML(\"dhxmenu.xml?etc=\" + new Date().getTime()); //加toolbar

dhxToolbar =dhxLayout.attachToolbar(); dhxToolbar.setIconsPath(\"common/imgs/\");

dhxToolbar.loadXML(\"common/dhxtoolbar_button.xml? etc=\" + new Date().getTime()); //加statusbar

statusBar = dhxLayout.attachStatusBar(); statusBar.setText(\"Simple Status Bar\");

1.2.19、Layout_ components_XX(给layout加上各种的组件)

(1)tree树

dhxTree = dhxLayout.cells(\"a\").attachTree();

dhxTree.setImagePath(\"codebase/imgs/csh_vista/\");

dhxTree.loadXML(\"common/tree.xml?etc=\" + new Date().getTime());

(2)grid格子、网格

dhxGrid = dhxLayout.cells(\"a\").attachGrid();

dhxGrid.setImagePath(\"../../../dhtmlxGrid/codebase/imgs/\");

dhxGrid.loadXML(\"../common/grid.xml?etc=\" + new Date().getTime());

(3)treegrid树状的格子

dhxTreeGrid = dhxLayout.cells(\"a\").attachGrid();

dhxTreeGrid.setImagePath(\"../../../dhtmlxGrid/codebase/imgs/\"); dhxTreeGrid.loadXML(\"common/treegrid.xml?etc=\" + new Date().getTime());

(4)accordion折叠框

dhxLayout.cells(\"a\").hideHeader();

dhxAccord = dhxLayout.cells(\"a\").attachAccordion(); dhxAccord.addItem(\"a1\", \"a\"); dhxAccord.addItem(\"a2\", \"b\"); dhxAccord.addItem(\"a3\", \"c\"); dhxAccord.openItem(\"a1\"); (5)editor编辑域

dhtmlx.image_path = \"codebase/imgs/\";

dhxEditor = dhxLayout.cells(\"a\").attachEditor();

(6)menu菜单

dhxMenu = dhxLayout.cells(\"a\").attachMenu();

dhxMenu.setIconsPath(\"../../../dhtmlxMenu/samples/common/imgs/\");

dhxMenu.loadXML(\"../../../dhtmlxMenu/samples/common/dhxmenu.xml?etc=\" + new Date().getTime());

(7)toolbar工具栏

dhxLayout.cells(\"a\").setWidth(350);

dhxToolbar = dhxLayout.cells(\"a\").attachToolbar(); dhxToolbar.setIconsPath(\"common/imgs/\");

dhxToolbar.loadXML(\"common/dhxtoolbar_button.xml?\" + new Date().getTime());

(8)statusbar状态栏

statusBar = dhxLayout.cells(\"a\").attachStatusBar(); statusBar.setText(\"Simple Status Bar\");

(9)maps

dhxLayout.cells(\"a\").setWidth(120);

GMaps = dhxLayout.cells(\"b\").attachMap();

(10)tabbar标签栏

dhxTabbar = dhxLayout.cells(\"a\").attachTabbar();

dhxTabbar.setImagePath(\"dhtmlxTabbar/codebase/imgs/\");

dhxTabbar.loadXML(\"common/tabbar.xml?etc=\" + new Date().getTime());

1.2.20、Layout_events_XXX(监听layout上的事件)

(1)记录layout是否折叠

function doOnLoad() {

var dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"5I\"); dhxLayout.attachEvent(\"onExpand\", doOnExpand); dhxLayout.attachEvent(\"onCollapse\", doOnCollapse); }

function doOnExpand(itemId) {//打开的监听

document.getElementById(\"log\").innerHTML += \"onExpand event called, item id is \" + itemId + \"
\"; }

function doOnCollapse(itemId) {//和上的监听

document.getElementById(\"log\").innerHTML += \"onCollapse event called, item id is \" + itemId + \"
\"; }

(2)记录layout是否改变了大小

function doOnLoad() {

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"5I\");

dhxLayout.attachEvent(\"onPanelResizeFinish\", doOnPanelResize); }

function doOnPanelResize(ids) {

document.getElementById(\"log\").innerHTML +=

\"onPanelResizeFinish event called, used items are \" + ids.toString() + \"
\"; }

(3)记录layout所在的windows改变了大小

function doOnLoad() {

dhxWins = new dhtmlXWindows();

dhxWins.setImagePath(\"../../../dhtmlxWindows/codebase/imgs/\"); dhxLayout = new dhtmlXLayoutObject(dhxWins.createWindow(\"w1\", 40, 340, 600, 400), \"3L\");

dhxLayout.attachEvent(\"onResize\", function() {

document.getElementById(\"log\").innerHTML += \"onResize event called, layout was resized
\"; }); }

(4)layout是否锁定，至少要有一个是锁定状态的

function doOnLoad() {

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"3L\"); dhxLayout.dhxWins.enableAutoViewport(false); dhxLayout.dhxWins.attachViewportTo(\"winVP\"); dhxLayout.attachEvent(\"onDock\", doOnDock);

dhxLayout.attachEvent(\"onUnDock\", doOnUnDock); dhxLayout.cells(\"a\").attachObject(\"objA\"); dhxLayout.cells(\"b\").attachObject(\"objB\"); dhxLayout.cells(\"c\").attachObject(\"objC\"); }

function doOnDock(itemId) {

document.getElementById(\"log\").innerHTML += \"onDock event called, item id is \" + itemId + \"
\"; }

function doOnUnDock(itemId) {

document.getElementById(\"log\").innerHTML += \"onUnDock event called, item id is \" + itemId + \"
\";

dhxLayout.dhxWins.window(itemId).keepInViewport(true); }

(5)记录鼠标双击的哪个项目

function doOnLoad() {

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"3L\"); dhxLayout.attachEvent(\"onDblClick\", doOnDblClick); }

function doOnDblClick(itemId) {

document.getElementById(\"log\").innerHTML += \"onDblClick event called, item id is \" + itemId + \"
\"; }

(6)记录哪个项目加载了哪个网站

function doOnLoad() {

dhxLayout = new dhtmlXLayoutObject(\"parentId\", \"3U\");

dhxLayout.attachEvent(\"onContentLoaded\", doOnContentLoaded); dhxLayout.cells(\"a\").setHeight(200);

dhxLayout.cells(\"a\").attachURL(\"http://www.google.com/\"); dhxLayout.cells(\"b\").attachURL(\"http://www.yahoo.com/\"); dhxLayout.cells(\"c\").attachURL(\"http://www.js.com/\"); }

function doOnContentLoaded(itemId) {

document.getElementById(\"log\").innerHTML +=

\"doOnContentLoaded event called, item id is \" + itemId + \"
\"; }

2、Accordion

2.1基本用法

2.1.1、Accordion_init_object

dhxAccord = new dhtmlXAccordion(\"accordObj\"); dhxAccord.addItem(\"a1\", \"Main Page\");

dhxAccord.addItem(\"a2\", \"Site Navigation\"); dhxAccord.addItem(\"a3\", \"Support & Feedback\"); dhxAccord.addItem(\"a4\", \"Comments\");

2.1.2、Accordion_init_window

dhxWins = new dhtmlXWindows();

dhxWins.enableAutoViewport(false); dhxWins.attachViewportTo(\"winVP\");

dhxWins.setImagePath(\"../../../dhtmlxWindows/codebase/imgs/\"); w1 = dhxWins.createWindow(\"w1\", 20, 30, 400, 350); w1.setText(\"dhtmlxWindow with dhtmlxAccordion\"); dhxAccord = w1.attachAccordion(); dhxAccord.addItem(\"a1\", \"Main Page\");

dhxAccord.addItem(\"a2\", \"Site Navigation\"); dhxAccord.addItem(\"a3\", \"Support & Feedback\"); dhxAccord.addItem(\"a4\", \"Comments\"); dhxAccord.openItem(\"a1\");

2.1.3、Accordion_init_layout