If you want to migrate to the Webix library, you should include two additional libraries: touchui_migration.js and touchui_migration.css, and also you can make the changes described in this article if they are needed:
You can grab those files by the next link
(DataStore, Lists, Grid, DataView, Chart)
The definition of sorting/grouping in the view configuration was changed. You need to use the scheme property and the field name without "#". For complex templates use functions
Old usage
dhx.ui({
sort: "#name#"
});
New usage
webix.ui({
scheme:{
$sort: {
by:"name"
}
}
});
"Back" items already contain the "<" icon by default. The templateBack property requires defining the text of a "back" item only
Old usage
templateBack:"< #title#",
New usage
templateBack:"#title#",
The onDBerror event is not supported any more. Use the onAfterSaveError event instead
Old usage
dp.attachEvent("onDBerror",function(response, state){
...
})
New usage
dp.attachEvent("onAfterSaveError",function(id,status,obj,details){
var state = dp.getItemState(id);
...
});
Full screen layout considers the sizes of inner views and can have smaller sizes than document body. For example, if all rows of layout have fixed height, the layout's height will be calculated like a sum of these rows' heights. So, if you want your layout to occupy the whole page and to consist of rows/cols with fixed height, you should add a row/col without height/width specified.
Old usage
dhx.ui({
rows:[
{view: "text", ...}
]
});
New usage
webix.ui({
rows:[
{view: "text", ...},
{}
]
});
Now window is hidden by default. To show it, call the show method.
Old usage
dhx.ui({
view: "window",...
});
New usage
webix.ui({
view: "window",...
}).show();
We should use "id" to define options keys instead of "value" and "value" to define titles instead of "label"
Old usage
options: [
{value: 1, label: "Option 1"}, ...
]
New usage
options: [
{id: 1, value: "Option 1"}, ...
]
1) Tabbar has a new property tabMinWidth. It sets minimum width of tabbar buttons, the value is 100 by default. Options that do not fit will be put in a popup. This popup is displayed by clicking the "..." icon.
{view:"tabbar", tabMinWidth:90,...}
2) Parameters of the onBeforeTabClick and onAfterTabClick events were changed. Now event handlers take two parameters: id of the clicked option and the native event object
Old usage
$$("tabbar").attachEvent("onAfterTabClick",
function(tabbarId, optionId) {
..
});
New usage
$$("tabbar").attachEvent("onAfterTabClick",
function(optionId, event) {
..
});
Use the "value" property instead of the "selected" one to set a button's value
Old usage
{ view: "tabbar" , selected: 2, ...}
New usage
{ view: "tabbar" , value: 2, ..}
1) Use the "suggest" view instead of the "popup" one to define a custom popup in Richselect and Combo
Old usage
dhx.ui({
view: "popup",
id: "comboOptions",
body:{ view:"list"}
});
dhx.ui({
view: "combo",
popup:"comboOptions"
});
New usage
webix.ui({
view: "suggest",
id: "comboOptions",
body:{ view:"list",...}
});
webix.ui({
view: "combo",
suggest:"comboOptions"
});
2) Use control.getPopup().getList() instead of $$(controlId+"_list") to get list
Old usage
var list = $$("myCombo_list")
New usage
var list = $$("myCombo").getPopup().getList();
1) The method setValues sets values to elements by their "name" properties. The getValues method returns hash of values by elements' names. The previous version accepted "id" as well as "name". Now ids are ignored.
Old usage
dhx.ui({
view: "form",
id: "myform",
elements:[
{ view: "text", name: "valueA", value: 1},
{ view: "text", id: "valueB", value: 2}
]
});
$$("myForm").getValues();
//same returns {valueA: 1, valueB:2}
New usage
webix.ui({
view: "form",
id: "myform",
elements:[
{ view: "text", name: "valueA", value: 1},
{ view: "text", id: "valueB", value: 2}
]
});
$$("myForm").getValues(); // returns {valueA: 1}
2) If you set an event handler (for example, onItemClick, onBeforeTabClick) for controls to their parent Toolbar or Form, the handler will be called only for those elements that have the "name" property.
Old usage
dhx.ui({
view: "toolbar",
id: "myToolbar",
elements:[
{ view: "button", id: "btn1", ...},
{ view: "button", id: "btn2", ...},
...
]
});
$$("myToolbar").attachEvent("onItemClick", function(id){
alert("Clicked item is "+id);
});
New usage
webix.ui({
view: "toolbar",
id: "myToolbar",
elements:[
{ view: "button", name: "btn1", ...},
{ view: "button", name: "btn2", ...},
...
]
});
$$("myToolbar").attachEvent("onItemClick", function(name){
alert("Clicked item is "+name);
});
The "type" property is not supported
Old usage
{ view: "toolbar", type: "SubBar" ...}
New usage
{ view: "toolbar", ...}
Options are not supported. Use the min, step and max properties to define the range
Old usage
{ view:"slider", ...,
options:[
{value: 1, label: 1},
{value: 2, label: 2},
....
]}
New usage
{ view:"slider", min: 1, step: 1, max: 10}
If you did not set the id for a certain view, it will get the id in the following format: "$"+ViewName+ViewIndex
Old usage
// we create a list without id definition
dhx.ui({view: "list",....});
// the id is set automatically - list1 (list2,...)
$$("list1").select(id);
New usage
// we create a list without id definition
webix.ui({view: "list",....});
// the id is set automatically - $list1 ($list2,...)
$$("$list1").select(id);
(dhx.notice() in old version)
Use the "type" property instead of the "css" one to customize style of the message container
Old usage
dhx.notice(css: "error",...)
New usage
webix.message(type: "error",...)
Toggle now looks and behaves like a two-state button. It is one button that changes its style and label on click. If you want to use a control that is similar to the toggle used in the previous version, you should choose the segmented button instead.
Old usage
{ view:"toggle", id:'trip', options: ["Roundtrip","Oneway"] }
New usage
{ view:"segmented", name:'trip', options: ["Roundtrip","Oneway"]}
Button with the type "round" is not supported any more
Old usage
{view:"button",type: "round",...}
New usage
{view:"button",...}
We need to use the track(id) method instead of the start() one and pass the id of the tracked element (id of tabbar for example)
Old usage
dhx.history.start()
New usage
webix.history.track('tabbarId')
The new version requires a new proxy definition
Old usage
var proxy= new dhx.proxy({
url: "data.php",
storage: dhx.storage.local
});
New usage
var proxy = new webix.proxy( "local", "data.php" );
Some Date methods do not create a copy by default. If the copy parameter is not set to true, the passed Date object will be modified.
Old usage
var next = dhx.Date.add(d,1,"day");
New usage
var next = webix.Date.add(d,1,"day",true);
Back to top