Check documentation for the latest version of dhtmlxSuite Migration from 3.6 to 4.0 DHTMLX Docs

Migration from 3.6 to 4.0

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.6From 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