Additional Migration Changes

In this article you'll find the migration issues that are solved by including the touchui_migration.js file.

Data Components

(DataStore, Lists, Grid, DataView, Chart)

Some DataStore methods and methods of views that based on DataStore (List,Grid,DataView and others) were renamed:

Old usageNew usage
var count = list.dataCount(); var count = list.count();
var item = list.item(id); var item = list.getItem(id);
list.update(id,data); list.updateItem(id,data);
var index = list.indexById(id); var index = list.getIndexById(id);
var id = list.idByIndex(index); var id = list.getIdById(index);
var nextId = list.next(id,step); var nextId = list.getNextId(id,step);
var firstId = list.first(); var firstId = list.getFirstId();
var lastid = list.last(); var lastId = list.getLastId();
var prevId = list.prev(id,step); var prevId = list.getPrevId(id,step);
var id = list.getSelected(); var id = list.getSelectedId();

DataView

Selection is not enabled by default

Old usage

{view: "dataview", ...}

New usage

{view: "dataview", select: true,...}

GroupList

In case of JSON data source you should use the item property in it to define child collection (there was "data" before)

Old usage

//JSON data source:
{ id:"root", value:"top item", data:[ ... ]}

New usage

//JSON data source:
{ id:"root", value:"top item", item:[ ... ]}

Pagelist

Use the getActiveId() method instead of the getActive() one to get the id of the first visible item

Old usage

var id = $$("list").getActive();

New usage

var id = $$("list").getActiveId();

DataProcessor

If you are using connector on the server side, you should start definition of the url property of DataProcessor with "connector->"

Old usage

var dp = new dhx.DataProcessor({
    url:"update.php", 
    ...
});

New usage

var dp = new webix.DataProcessor({
    url:"connector->update.php",
    ..
});

Views of Layout and Window

Use the getParentView() method instead of the getParent() one

Old usage

var parentView =  view.getParent()

New usage

var parentView = view.getParentView()

Window

By default window is hidden and doesn't have fixed size. Its size is adjusted to the size of its content. Window view appears in the left:0, top:0 position.

Old usage

Library sets by default for this view: top:300, left:100, width:300, height:200

New usage

Library sets by default for this view: top:0, left:0, autofit:true

ScrollView

Use the "body" property instead of the "content" one to define the inner view of ScrollView

Old usage

{
    view: "scrolview",..., 
    content:{ view: "template",...}
}

New usage

{
    view: "scrolview",..., 
    body:{ view: "template",...}
}

Tabbar

The default type of tabbar was changed. You should set the type:"bottom" if you want to show a tabbar below a MultiView

Old usage

{ view:"tabbar", ...}

New usage

{ view:"tabbar", type: "bottom",...}

MultiView

Use the getActiveId() method instead of the getActive() one to get the id of an active view

Old usage

var id = $$("views").getActive();

New usage

var id = $$("views").getActiveId();

Datepicker and other cases

1) The default date format is set by the dhx.i18n.parseFormat. It is "%Y-%m-%d" by default.

Old usage

The default date format "%d.%m.%Y".

New usage

The default date format is "%Y-%m-%d".

2) Use the "value" property instead of the "date" one to define the control's value

Old usage

{ view:"datepicker", date:new Date(2014,7,1)}

New usage

{ view:"datepicker", value:new Date(2014,7,1)}

Message Boxes

notice

Use webix.message instead of dhx.notice

Old usage

dhx.notice(text)

New usage

webix.message(text)

webix.alert, webix.confirm, webix.message

Use the text property instead of the message one to define the popup text

Old usage

dhx.alert({message:'Incorrect password!"})

New usage

webix.alert({text:'Incorrect password!"})

Controls

ImageButton

Use the view "button" with the type "image"

Old usage

dhx.ui({ view: "imagebutton", ...});

New usage

webix.ui({ view: "button", type: "image", ...});

Button

By default, a button's alignment is "left" ("center" in the previous version)

Old usage

dhx.ui({view:"button",inputWidth:100,..})

New usage

webix.ui({ 
view:"button",inputWidth:100, align:"center",...})

webix.KeyEvents

This module does not exist any more. The onTimedKeyPress event listening is enabled by default.

Old usage

dhx.extend($$('filter'),dhx.KeyEvents);
Back to top