dhtmlxLayout应用方法.docx

1、Layout：21.1常用的布局样式：21.2基本用法：21.2.1、Layout_init_object(基本显示方式)21.2.2、Layout_init_window(将其放入一个windows中)21.2.3、Layout_init_fullscreen(全屏幕显示)21.2.4、Layout_init_layout(在layout中套入layout完成复杂样式)31.2.5、Layout_init_api(layout的部分api参数)31.2.6、Layout_init_skinning(更换layout样式)31.2.7、Layout_init_views(更换layout中的内容)41.2.8、Layout_conf_access(修改layout的标题)41.2.9、Layout_conf_id_index(根据索引得到id、根据id得到相应的索引值)41.2.10、Layout_conf_iterator(为layout写入名字)51.2.11、Layout_conf_autosize(没看明白)51.2.12、Layout_conf_panels(通过button方法修改layout属性)71.2.13、Layout_conf_attach_object(layout的项目中加入div并显示其中内容)91.2.14、Layout_conf_attach_url(给项目加上url地址，可直接嵌入页面)91.2.15、Layout_conf_effects(没看出来有效果)101.2.16、Layout_conf_collapsed(给项目折叠时加上标题或者图片)101.2.17、Layout_conf_header_footer(给layout加上header和footer)101.2.18、Layout_global_menu(给layout的上面加上工具)101.2.19、Layout_ components_XX(给layout加上各种的组件)111.2.20、Layout_events_XXX(监听layout上的事件)122、Accordion142.1基本用法142.1.1、Accordion_init_object142.1.2、Accordion_init_window142.1.3、Accordion_init_layout14DHX总结记录：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中的内容) /两个按钮触发更换的事件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.items1.setText(Monkey Island 2: LeChucks Revenge);1.2.9、Layout_conf_id_index(根据索引得到id、根据id得到相应的索引值)Get ID by Index /根据索引求idGet 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.optionsinds.selectedIndex.value; alert(dhxLayout.getIdByIndex(ind);function getIndex() var id = ids.optionsids.selectedIndex.value; alert(dhxLayout.getIndexById(id);1.2.10、Layout_conf_iterator(为layout写入名字)var names = new Array(Gothic 3 Forsaken Gods, The Bards 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 ? namesj+ : item.getId(); ); newNames = !newNames; j = 0;1.2.11、Layout_conf_autosize(没看明白) Please, select the cells which will be autosized in the process of resizing Autosize: HOR VER var dhxWins,dhxLayout;var sel1 = document.getElementById(sel1);var sel2 = document.getElementById(sel2);function doOnLoad() dhxWins = new dhtmlXWindows(); dhxWins.enableAutoViewport(false); dhxWins.attachViewportTo(winVP); dhxWins.setImagePath(./././dhtmlxWindows/codebase/imgs/); dhxWins.createWindow(w1, 20, 30, 600, 400); loadView(3L); var views = dhxLayout.listViews(); var table = document.createElement(TABLE); document.getElementById(srcDiv).appendChild(table); var tbody = document.createElement(TBODY); table.appendChild(tbody); var tr1 = document.createElement(TR); tbody.appendChild(tr1); var tr2 = document.createElement(TR); tbody.appendChild(tr2); for (var q = 0; q views.length; q+) var td1 = document.createElement(TD); var td2 = document.createElement(TD); td1.innerHTML = viewsq; td2.innerHTML = ; tr1.appendChild(td1); tr2.appendChild(td2); function loadView(view) if (dhxLayout != null) dhxLayout.unload(); dhxLayout = dhxWins.window(w1).attachLayout(view); /; var asData = dhxLayout.listAutoSizes(); sel1.options.length = 0; var selected = 0; for (var q = 0; q asData2.length; q+) if (asData2q = asData0) selected = q; sel1.options.add(new Option(asData2q.replace(/;/g, ), asData2q); sel1.selectedIndex = selected; sel2.options.length = 0; var selected = 0; for (var q = 0; q asData3.length; q+) if (asData3q = asData1) selected = q; sel2.options.add(new Option(asData3q.replace(/;/g, ), asData3q); sel2.selectedIndex = selected;function setAutoSize() var sel1 = document.getElementById(sel1); var as1 = sel1.optionssel1.selectedIndex.value; var sel2 = document.getElementById(sel2); var as2 = sel2.optionssel2.selectedIndex.value; /; dhxLayout.setAutoSize(as1, as2);1.2.12、Layout_conf_panels(通过button方法修改layout属性)var dhxLayout;var sel = document.getElementById(sel);function doOnLoad() dhxLayout = new dhtmlXLayoutObject(parentId, 3L); dhxLayout.forEachItem(function(item) sel.options.add(new Option(item.getId(), item.getIndex(); );function getInd() /得到id属性 var sel = document.getElementById(sel); var id = sel.optionssel.selectedIndex.value; return id;function setText() /修改layout标题dhxLayout.itemsgetInd().setText(document.getElementById(txt).value);function isVisible() /判断标题是否隐藏（隐藏返回false、活动返回true） alert(dhxLayout.itemsgetInd().isHeaderVisible();function hidePanel() /隐藏layout标题 dhxLayout.itemsgetInd().hideHeader();function showPanel() /显示layout标题 dhxLayout.itemsgetInd().showHeader();function expand() /展开所选择的项目 dhxLayout.itemsgetInd().expand();function collapse() /折叠所选择的项目 dhxLayout.itemsgetInd().collapse();function setWidth() /在总的允许的范围内设置项目的宽dhxLayout.itemsgetInd().setWidth(Number(document.getElementById(item_w).value);function setHeight() /在总的允许的范围内设置项目的高dhxLayout.itemsgetInd().setHeight(Number(document.getElementById(item_h).value);function getWidth() /得到项目的宽 alert(dhxLayout.itemsgetInd().getWidth();function getHeight() /得到项目的宽 alert(dhxLayout.itemsgetInd().getHeight();function fixSize() /固定项目的长和宽 dhxLayout.itemsgetInd().fixSize(宽是否固定true固定、false不固定),(长是否固定);function progressOn(fullLayout) /给layout、项目，加上进度条（不知道有什么用） if (fullLayout) dhxLgressOn(); else dhxLayout.itemsgetInd().progressOn(); function progressOff(fullLayout) /给layout、项目，去掉进度条 if (fullLayout) dhxLgressOff(); else dhxLayout.itemsgetInd().progressOff(); 1.2.13、Layout_conf_attach_object(layout的项目中加入div并显示其中内容) The film ends with Arthur and Guineveres marriage. Merlin then proclaims him to be their king. King Arthur and his remaining knights promise to lead the Britons, now united after the Romans leave, against future invaders. The last scene shows Lancelot, Dagonet and Tristan roaming the lands freely as reincarnated horses as told in a legend by Lancelots father. var dhxLayout;function doOnLoad() dhxLayout = new dhtmlXLayoutObject(parentId, 3U); dhxLayout.cells(a).setHeight(200); dhxLayout.cells(a).attachObject(objId);1.2.14、Layout_conf_attach_url(给项目加上url地址，可直接嵌入页面)dhxLayout.cells(a).attachURL(/);1.2.15、Layout_conf_effects(没看出来有效果)1.2.16、Layout_conf_collapsed(给项目折叠时加上标题或者图片)dhxLayout.setCollapsedText(a, Main Page);dhxLayout.setCollapsedText(b, );dhxLayout.setCollapsedText(c, );dhxLayout.setCollapsedText(d, Comments);1.2.17、Layout_conf_header_footer(给layout加上header和footer)var dhxLayout;function doOnLoad() dhxLayout = new dhtmlXLayoutObject(document.body, 3L);dhxLayout.attachHeader(my_logo);dhxLayout.attachFooter(my_copy);Hi! Im header!Hi! Im copyright ©!1.2.18、Layout_global_menu(给layout的上面加上工具)dhxLayout = new dhtmlXLayoutObject(parentId, 3L);/加menudhxMenu = dhxLayout.attachMenu();dhxMenu.setIconsPath(common/imgs/);dhxMenu.loadXML(dhxmenu.xml?etc= + new Date().getTime();/加toolbardhxToolbar =dhxLayout.attachToolbar();dhxToolbar.setIconsPath(common/imgs/); dhxToolbar.loadXML(common/dhxtoolbar_button.xml? etc= + new Date().getTime();/加statusbarstatusBar = 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)mapsdhxLayout.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(parentI