Arrow buttons with type:"next"
and type:"prev"
settings have been completely removed from Webix. Now they look like standard rectangular buttons.
Also, the total number of button types have been reduced to separate their contents and coloring. Follow the link for the new button typing and styling scheme.
Deprecated CSS types and their new CSS rules (optional for Webix 6.3):
Deprecated icon/image types and their new settings (optional for Webix 6.3):
By default, image and icon buttons are now colored like standard buttons. To get back to the transparent background, set:
The deprecated types will be valid till Webix 7.0, and after the release they will be removed permanently.
1. The sync proxy was removed. Instead of it, you can create a sync request and parse the response by API:
var xhr = webix.ajax().sync().get("data.php");
view.parse(xhr.responseText);
2. The proxy.load() method has only two parameters:
callback was removed from the parameters.
If you return a promise of data or static data within this method, it will be directly parsed to the component:
webix.proxy.loading = {
$proxy:true,
load(view, params){
return webix.ajax().post("/server/data",{ books:params.books });
}
};
3. The proxy.save() method has only three parameters:
callback was removed from the parameters.
If you return a promise of data or static data within this method, it will be directly applied to the component:
webix.proxy.saving = {
$proxy:true,
save(view, params, dp){
var id = params.data.id;
if (params.operation == "insert")
return webix.ajax().post("/samples/server/films", params.data);
// ... other operations
}
};
4. The proxy.saveAll() method has three parameters:
callback was removed from the parameters.
If you return a promise of data or static data within this method, it will be directly applied to the component:
webix.proxy.saveall = {
$proxy:true,
saveAll:function(view, updates, dp){
//updates - the array of changed records
return webix.ajax().post(this.source, { data:updates });
}
};
1. Callback of webix.ajax methods cannot be an array;
2. Loading error events:
$$("list").attachEvent("onLoadError", function(xhr){
//xhr - xmlHttpRequest object
// handler code here
});
and webix.onLoadError has XHR and view as parameters:
webix.attachEvent("onLoadError", function(xhr,view){
//xhr - xmlHttpRequest object
//view - component which triggered error
// ... custom code ...
});
webix.ui({
view:"comments",
scheme:{
$init:(obj) => {
if(obj.date)
obj.date = webix.i18n.parseFormatDate(obj.date);
}
},
// ...data and config
});
The source code files are renamed: webix.js to webix.min.js and webix_debug.js to webix.js (which includes debugging options).
The list of Webix skins included into the package has been reduced and the default skin is changed to new Material one. There are 5 skins in the library: Material (default), Mini (a compact version of Material), Flat, Compact (a compact version of Flat), and Contrast.
Font Awesome icons are no longer used by default. The library gets its own sets of icons which depend on the used skin: Material and Mini skins use Material Design icons, while Flat, Compact and Contrast use Font Awesome 5 icons. The package now contains only icons used by widgets. The mechanism of using custom icons has also changed. Check the related article.
After release of version 6.0, Webix globals migrated to the env object. Thus, you need to address to them as:
//webix.cdn = "//cdn.webix.com";
//webix.ui.zIndexBase = 200;
//webix.ui.scrollSize = 17;
//=>
webix.env.cdn = "//cdn.webix.com";
webix.env.scrollSize = 17;
webix.env.zIndexBase = 200;
webix_debug.js has been removed. All the necessary sources for debugging are included into the webix.js file. While debugging pay attention to the following changes:
webix.debug = true;
webix.debug_size = true;
You should set them like this:
webix.debug({ events: true, size:true });
All other options have been removed due to inconsistency.
Starting from version 6.0, third-party libraries are not automatically loaded via webix.codebase = "./";. You can still set path to sources of the necessary third-party component on CDN. Actually, there are three ways to do that:
To use the latest version of integration extensions, you can choose one of two ways:
<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>
The way of applying a custom locale to the pager buttons has changed. Starting from version 6.0, locales are set for the pager via the i18n object:
webix.i18n.pager = {
first: "First",
last: "Last",
next: "Next",
prev: "Prev"
};
Important updates in the Pivot complex widget:
Take a look at Pivot What's New for version 5.2.
The order of arguments of the hideColumn method of DataTable have changed. Now, the method takes 4 arguments: id, options, refresh and mode.
The new second argument, options, regulates the behavior of spanned columns related to the column which is being hidden: if needed, they can also be hidden with the master column.
With the version 5.0 the title of Webix Slider becomes movable by default. You can change this behavior and make the title fixed via the related moveTitle property.
To avoid ambiguity, Google-map has been completely removed from the Components repository, but its advanced version stays in package and is available in both GPL and PRO editions.
Angular, Backbone and JQuery integration adapters are no longer included into the main source of the Webix library. They are now kept separately on GitHub as all other integration solutions.
Read more about the possibilities of integrating Webix with third-party frameworks in the related section of documentation.
The possibility of getting an integrated object of third-party components like Yandex Maps, CodeMirror editor, Sigma chart and GoogleMap (in the main package) has radically changed.
Earlier you could either access the editor or map as follows:
var editor = codemirror.editor;
var map = yandexmap.map;
or use the corresponding getSome() method of the component:
var editor = codemirror.getEditor();
var map = yandexmap.getMap();
From version 4.2 you must use the getSome() method as the only option.
Also, if you need to access the map, chart or scheduler immediately after it has been loaded and initialized, you can pass the true parameter to the method:
codemirror.getEditor(true).then(function(editor){ /* logic */ });
The list of the affected components is the following:
One of the third-party components has changed its name. Now we have an updated HereMap instead of the NokiaMap.
webix.ui({ view:"here-map", id:"map" });
The code for the updated component is located by the link.
There are important updates for the Pivot complex widget:
The mechanism of loading PDF files into the PDFViewer component is modified. From 4.0 PDF Viewer uses Webix data loader combined with "binary" proxy, which allows using standard loading events.
webix.ui({
view:"pdfviewer",
url:"binary->files/WebixDocs.pdf"
});
Tab navigation over Webix application is switched on by default. It cannot be controlled by UIManager any more.
Earlier, it was possible to switch on tab navigation by webix.UIManager.tabControl = true;
code line while any widget could be excluded from
tab order by setting tabFocus
to false. From Webix 4.0 this functionality deprecates.
From 4.0 all widgets and their active areas are in the tab order and cannot be excluded from it. It was done with accessibility in mind.
Data filtering in bound components: selected value for a master view should be set after data is loaded
In version 3.3 the header property is introduced in PDF export config. It is used to configure the look of header of an exported table.
To avoid ambiguity, the header and headerImage properties related to the document's header were renamed:
The context parameter of the webix.event helper was modified. Earlier it indicated an object to which this keyword refers (master). Now it awaits a context object with bind, capture and id properties.
The collectValues method of the DataTable and TreeTable doesn't return an empty option any more.
The method is used by select filters of the above mentioned components to collect the array of options for them. Prior to 3.3 it returned the unique set of options plus an empty option to clear the filter's value.
Now its result doesn't include an empty option while the filters add this option themselves.
Old export functionality of Datatable and Pivot is removed in version 3.2.
The methods exportToPDF() and exportToExcel() of Datatable and the methods toPDF() and toExcel() of Pivot are no longer available. You should use common methods toPDF and toExcel for these components instead:
webix.toPDF($$("myPivot"));
webix.toExcel($$("myDatatable"));
The "excel" proxy was removed.
Instead, the "binary" proxy object is used to load files like Excel into data components and the "excel" datatype is introduced for parsing Excel files. It is the default data type for Excel Viewer.
webix.ui({
view:"spreadsheet",
url: "binary->../common/test.xlsx@Data[0-10]",
datatype:"excel"
});
Starting from version 3.1, form.validate() will not validate disabled fields. If you want to preserve the old behavior, use this command like next
form.validate({ disabled:true });
Starting from the version 3.0 strict JSON parsing rules are applied. It means that Webix won't process invalid JSON data.
Version 3.0 includes new export API. Old export functionality of datatable is deprecated and will be fully removed in version 3.2
The expected format of JSON string returned by the uploading script has changed. Now the script should respond with "error" status to indicate that uploading ended with error:
echo "{ status:'error' }";
Any other response, e.g. "{status:'server'}" means that uploading ended successfully.
In version 2.2 the default parseFormat was "%Y-%m-%d" while from version 2.3 it becomes "%Y-%m-%d %H:%i".
It can be altered within current locale as:
webix.i18n.parseFormat = "%Y-%m-%d";
webix.i18n.setLocate();
In Webix 2.2 layout height and width were including padding and margin
//in Webix 2.2 will result in 140px height ( 20 + 100 + 20)
//in Webix 2.3 will result in 100px height
webix.ui({
view:"layout", padding:20, height:100, rows:[{}]
})
In webix 2.3 size of layout is a full size, that already includes padding and margin. The same code as above one will result in layout with 100px height. If you prefer the old behavior, you can move height settings in the inner view
//in both Webix 2.2 and Webix 2.3 will result in 140px height
webix.ui({
view:"layout", padding:20, rows:[{ height:100 }]
})
In version 2.1 you could use "#value#" in the column's template to apply the same property that was defined as the column's id.
Version 2.2 will support this feature as well, but you need to use "#$value#" instead of the old syntax. It does affect only the "#value#" keyword, all other templates ("#some#") will work without any changes.
ajax.header method was deprecated in favor of ajax.headers
Starting from Webix 2.2, List, DataView and Template view, width and height of container will include the width of scrollbar. It means that the resulting view will take exactly the same size that was defined for it (previously, it was the defined as:"size + size of scrollbar").
"decimalDelimeter" property in number format was changed to "decimalDelimiter"
Please check Migration from DHTMLX Touch.
Back to top