1) In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.
2) Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.
3) Functionality moved from object to object
There were changes in the methods of layout components (Layout, Windows, Accordion, Tabbar). It concerns the methods that don't operate on the components in whole, but affect their cells (windows, tabs) directly.
Such methods have earlier been called through myLayout object and now they are called through myLayout.cells() object. Be careful, as the names of these methods are also changed to more logical ones.
4) Access to cells by index removed
Layout has a possibility to access cells by id - myLayout.cells(id) or by index - myLayout.items[]. Until 3.6 both methods had used to get cell object, since version 4.0 we've kept only accessing cells by id. The access to cells by index still works if the file "dhtmlxlayout_deprecated.js" is included on the page.
| Up to version 3.6 | From version 4.0 |
| Functions' names changed | |
| myLayout.listViews() | myLayout.listPatterns() |
| Functionality was removed | |
| myLayout.setEffect() | Since 4.0 effects are enabled for modern browsers by default |
| myLayout.getEffect() | |
| myLayout.setImagePath() | Used for windows, since 4.0 windows don't use imagePath, icons can be set in css |
| Functionality moved from object to object | |
| myLayout.dockWindow(id) | myLayout.cells(id).dock() |
| myLayout.unDockWindow(id) | myLayout.cells(id).undock() |
| myLayout.setCollapsedText(id, text) | myLayout.cells(id).setCollapsedText(text) |
| myLayout.showPanel(id) | myLayout.cells(id).showHeader() |
| myLayout.hidePanel(id) | myLayout.cells(id).hideHeader() |
| myLayout.isPanelVisible(id) | myLayout.cells(id).isHeaderVisible() |
| Access to cells by index | |
| myLayout.cells(id).getIndex() | |
| myLayout.getIdByIndex(index) | |
| myLayout.getIndexById(id) | |
| myLayout.items[] (array) | |
5) Offsets (margins)
In all layout versions there is a possibility to set offsets (margins). They are mostly used in full-screen init type. We haven't removed this functionality but updated the used techniques.
Old techniques (all versions up to 3.6):
// init
var myLayout = new dhtmlXLayoutObject(document.body, "3L");
// modify some private properties
myLayout.cont.obj._offsetTop = 10; // top margin
myLayout.cont.obj._offsetLeft = 10; // left margin
myLayout.cont.obj._offsetHeight = -20; // bottom margin
myLayout.cont.obj._offsetWidth = -20; // right margin
// adjust size
myLayout.setSizes();
New techniques (from version 4.0):
// on init stage
var myLayout = new dhtmlXLayoutObject({
parent: document.body,
pattern: "3L",
offsets: {
top: 10,
right: 20,
bottom: 30,
left: 40
}
});
// at any place in the code
myLayout.setOffsets({
top: 10,
right: 20,
bottom: 30,
left: 40
});
6) Events
Until the version 3.6 layout had the event onResize. If layout was attached to a window, this event was called after the window was resized. Starting from the version 4.0 the event onResizeFinish should be used instead.
myLayout.attachEvent("onResizeFinish", function(){
// your code here
});
Related sample: onResizeFinish event
Back to top