Миграция на текущую версию Webix

Webix 11.1 -> 11.2

Enhanced getFormat method in SpreadSheet

Previously, the getFormat method of SpreadSheet returned only the name of the format applied to a specific cell. Starting from the 11.2 version, the method returns an object containing both – the format name and the format itself (a string of formatting conditions).

Before v11.2

//returns a string with the format name
const name = $$("ssheet").getFormat(2, 1, "Sheet1");
webix.message(name); // -> "price"

Starting from v11.2

//returns an object with the format name and the format
const name = $$("ssheet").getFormat(2, 1, "Sheet1");
webix.message(JSON.stringify(name));
// -> {"name":"price","format":"[>=0][$$]#,0.00;[<0]-[$$]#,0.00"}

GoogleMap markers are updated to AdvancedMarker and now configurable

Since v11.2 the GoogleMap widget uses the API of the Google Maps Advanced Markers instead of the Marker API.

To use the functionality of Advanced Markers, it is required to provide the Map ID via the mapId option in the GoogleMap widget configuration.

webix.ui({
  // provide your own Google API key
  key:"AIzaSyAi0oVNVO-e603aUY8SILdD4v9bVBkmiTg",
  // Map ID is required for advanced markers
  mapId:"DEMO_MAP_ID",
  view:"google-map",
  zoom:6,
  center:[ 48.724, 8.215 ],
  // customizing the default pin element of the marker
  template: function(item, PinElement){
    return new PinElement({
      scale: item.id
    }).element;
  },
  data:[
    { id:1, lat:48.782, lng:9.177 },
    { id:2, lat:47.366, lng:8.55 },
    { id:3, lat: 48.137, lng: 11.575 }
  ]
});

Use of the Advanced Markers functionality extends customization possibilities of the markers. Check the details.

Spreadsheet Toolbar and Menu options are refactored and unified

Menu and Toolbar IDs are renamed

Menu IDs updates

• "columns" -> "column"
• "insert-column" -> "add-column"
• "delete-column" -> "del-column"
• "rows" -> "row"
• "insert-row" -> "add-row"
• "delete-row" -> "del-row"
• the "data" block -> the "edit" block

Toolbar IDs updates

• the "undo" block -> the "undo-redo" block
• the ids of the options in the toolbar drop-downs for working with rows/columns were changed. Now they present a combination of the action name and the group name, e.g.: "add-row", "del-column"

Menu and Toolbar IDs updates

• the ids of sub-options of the Row format option are formed as "format_name-row":

{ id: "common-row" },
{ id: "price-row" },
{ id: "int-row" },
{ id: "percent-row" },
{ id: "date-row" },
{ id: "string-row" },
{ id: "custom-row" }

• the ids of sub-options of the Column format option are formed as "format_name-column":

{ id: "common-column" },
{ id: "price-column" },
{ id: "int-column" },
{ id: "percent-column" },
{ id: "date-column" },
{ id: "string-column" },
{ id: "custom-column" }

Locales

• a tooltip for the type of the borders line is added
• locale labels for option text and tooltips:
  • the menu and the toolbar use the same locale labels for option text and tooltips from the same locale object: webix["i18n"].spreadsheet.actions
  • for the labels or tooltips that are specific to them:
    • the menu uses webix["i18n"].spreadsheet.menus or webix["i18n"].spreadsheet.labels locale objects
    • the toolbar uses webix["i18n"].spreadsheet.tooltips or webix["i18n"].spreadsheet.labels locale objects
  • if the text for labels isn't found, Spreadsheet simply renders the IDs of the menu items or toolbar buttons
• some keys of the options are changed (for those keys that didn't correspond to the options ids or where the options' ids were modified - check the above list of updated toolbar and menu ids)
• for some options and tooltips the keys are specified as parentId-id for consistency (e.g. "top" -> "vertical-align-top")

Font sizes options list

Earlier, the options list with font sizes in toolbar was presented as an array of numbers. Now it is an array of objects of the following type:

function getFontSize(){
    return [
        { id: "8px", value: "8", action: "font-size" },
        { id: "9px", value: "9", action: "font-size" },
        { id: "10px", value: "10", action: "font-size" },
        // other font size objects
   ];
}

Actions

Since v11.2 all actions are merged in one object with actions, and the menu now uses the same actions as the toolbar does. Some style-related actions ("font-weight", "font-style", "underline", "strike" and "wrap") work as toggles for menu. So, the callback function for the onStyleSet event for these actions can be called only with the name parameter, while the value parameter will be undefined.

Also note that the action property in the menu structure is equal to the parentId one. The action properties are not obligatory to specify, since their values will be taken from the corresponding parentId property of this submenu (if they are equal). However, you can set custom action properties for such style actions as fonts, sizes, alignment, borders and formats. Check the example of setting action properties for font sizes from the default structure in the above section.

Webix 11.0 -> 11.1

UIManager hotkeys are set via the Latin keyboard layout

Starting from v11.1, the key combinations used to set hotkeys via the addHotKey method of UIManager and the hotkey property of controls should be specified with the use of the Latin keyboard layout.

The hotkeys functionality supports the QWERTY (default), QWERTZ and AZERTY layouts (e.g. Ctrl+Ö will be recognized as a valid hotkey).

Data loading limits in File Manager and Document Manager

Due to the new possibility to limit the amount of items loaded to every folder, there have been several updates:

• the API of some services has been modified. The force parameter is added to the methods of the Backend and LocalData services in the following way:

const Backend = $$("filemanager").getService("backend");
const LocalData = $$("filemanager").getService("local");
 
Backend.files(id, source); -> Backend.files(id, force, source);
LocalData.refresh(path, source); -> LocalData.refresh(path, force, source);
LocalData.reload(fs, path, source); -> LocalData.reload(fs, path, force, source);

• the data format for files loaded from server has changed

The backward compatibility has been preserved, so the previous data format (an array of objects) works as well. However, the desired format and the obligatory format for the limited data loading is the following:

{
  files: [ /* objects like before*/ ],
  total: number, // the number of all files and folders if not all contents are loaded
}

• the way of specifying the Refresh icon has been updated

  

  • before v11.1 it has been set as view:"icon":

  • since v11.1 it is set as {view:"button", type:"icon"}:

Scrollable layout for the Units mode

Since we introduced the possibility to specify the minimal width for a unit and added an automatic horizontal scroll in the Units view, the appearance of Scheduler has changed. The horizontal scroll will appear, if the width of a unit reaches the default size of 300 px (due to resizing or if there are too many units).

You may also need to adjust your existing customizations of the Scheduler configuration. The code parts that were changed are described below:

• views["modes/units"] - removed the promise from the return value of the config; one of the three parts moved out to a separate class

Before v11.1

config(){
  return units.then(data => {
    return {
      rows: [UnitsHeaderView, multi, days]
    }
  })
}

From v11.1

config() {
  return { rows: [UnitsHeaderView, multi, DaysView], }
}

where DaysView is a new class, a part of the views["modes/units/days"]. The promise from units.config has also been moved to the DaysView.

• views["units/multiday"] config() - the second column used to be an array of days (columns). Since v11.1 they are enclosed into scrollView

Before v11.1

config(){
  return units.then(data => {
    return {
      cols: [
        { /* the "more" toggle */ },
        { cols: [ /* days */ ] }
      ]
    }
  })
}

From v11.1

config(){
  return units.then(data => {
    return {
      cols: [
        { /* the "more" toggle */ },
        { view: "scrollview", body: { cols: [ /* days */ ] } }
      ]
    }
  })
}

Webix 10.3 -> 11.0

Настройки кастомизаций тулбара

Так как мы добавили новые элементы (раскрывающуюся секцию c фильтрами) в тулбар File Manager и Document Manager и изменили его структуру, вам может потребоваться настройка кастомизаций соответствующих view классов (topbar).

Ниже представлен пример, в котором сравнивается то, каким образом можно было добавить новый элемент в тулбар до версии 11.0 и как это можно сделать, начиная с версии 11.0.

class CustomTopBar extends fileManager.views.topbar {
    config() {
      const ui = super.config();
 
      // 11.0
      const mainToolbarRow = ui.cols[1].rows[0];
      mainToolbarRow.cols.splice(1, 0, { view: "label", label: "New element" })
      // 10.3 and below
      ui.cols.splice(3, 0, { view: "label", label: "New element" })
 
      return ui;
    }
}

Использование функций в формулах

Начиная с версии 11.0 функции, используемые в формулах, разделены на категории (Common, Date, Text, Number и Financial). По умолчанию в параметрах определена категория Common. Это может вызвать ошибки в ячейках, если используемые в них функции не относятся к категории Common.

Для устранения ошибок задайте параметр methods с помощью строки с названием необходимой категории или используйте значение "all" для подключения всех категорий функций:

webix.ui({
    view: "spreadsheet",
    methods: "date", // or methods: "all"
    toolbar: "full",
    data: spreadsheet_data
});

Webix 10.0 -> 10.1

Указание пустой опции в редакторе ячеек SpreadSheet

Вы должны явно указать, добавлять ли пустую опцию в редактор ячеек, используя свойство empty:

spreadsheet.setCellEditor(1, 1,
  {editor: "ss_richselect", options: "B3:B7", empty: true});

Включение/выключение осевых линий в режиме Chart Pivot

Начиная с версии 10.1, для включения и выключения линий осей следует использовать chart.xAxis.lines и chart.yAxis.lines. Свойство chart.lines будет работать только для диаграмм типа Radar.

Кроме того, с этого момента вместо chart.pieInnerText следует использовать chart.labels.

Webix 9.4 -> 10.0

Стилизация формул с HYPERLYNK

Начиная с версии 10.0, формулы с HYPERLYNK прекратили поддержку браузерных стилей. Если в данных есть ссылки, и вы хотите сохранить их цветными и подчеркнутыми, вам нужно добавить стили для них отдельно.

const baseStyle = ss.getStyle(1, 1);
const urlStyle = ss.addStyle({ color: "#0000ff", underline: "underline" }, baseStyle);
ss.setStyle(1, 1, urlStyle);

showMenuItem\hideMenuItem для изменения видимости опций меню

Метод hideItem меню был переименован в hideMenuItem. Чтобы отменить скрытие, используйте новый метод showMenuItem вместо showItem. Метод showItem следует использовать для прокрутки компонента, чтобы сделать видимым указанный элемент.

Обновленные дефиниции Typescript

Все методы, которые раньше возвращали any, теперь возвращают тип webix.obj/union. Точный возвращаемый тип зависит от метода.

Форматирование отрицательных чисел

При работе с отрицательными числами с помощью соответствующих методов, в конфигурационном объекте, который передается в методы, необходимо задать свойства minusSign и minusPosition для корректного отображения отрицательных чисел.

Благодаря новым конфигурационным свойствам, вы можете добавить минус (minusSign) как до, так и после числа, или добавить символы с одной и с другой стороны числа. Пример использования метода format method:

const str1 = webix.Number.format(-10008.999, {
    decimalSize: 2, groupSize: 3,
    decimalDelimiter: ".", groupDelimiter: "'",
    prefix: "abc", sufix: "dfg",
    minusPosition:"after",
    minusSign:"-",
    priceTemplate:"${obj}"
});
// ->"abc$10'009.00-dfg"

Webix 9.4.5 -> 9.4.6

Раньше параметрами функции для сортировки были значения указанного поля для двух объектов. Теперь это сами объекты данных и имя поля, по которому вы хотите отсортировать.

table.sort("#fieldName#", "desc", function(a, b, prop) {
   return a[prop] - b[prop];
})

Webix 9.0 -> 9.1

Начиная с версии 9.1, событие onEditorChange срабатывает на любые изменения в редакторе (событие "oninput"):

on: {
    onEditorChange: function(cellId, value) {
        webix.message(value);
    }
}

Ранее onEditorChange полагалось на событие "onchange" и некорректно отрабатывало в некоторых браузерах, т.к. редактор разрушался в тот же момент. 

Чтобы отследить окончание редактирования, вам необходимы события onBeforeEditStop/onAfterEditStop.

Webix 8.4 -> 9.0

Создание фигур в Diagram

Начиная с версии 9.0 поле svg более недоступно. Используйте template вместо него. Новое поле позволяет определять НЕвекторные фигуры, а также создавать фигуры на основе встроенных темплейтов.

Создание фигуры до 9.0:

shapes: [
 {
  id: "laptop",
  svg: /* svg код */,
 },
 // ...
]

Создание фигуры после 9.0:

shapes: [
  {
    id: "laptop",
    template: `<img class="custom-image" src="svg/laptop.svg"></img>`,
  },
  // ...
]

Более подробно о поле template и его использовании читайте на этой странице.

Некоторые встроенные фигуры более недоступны

Начиная с версии 9.0 фигуры join и action более недоступны. Какие альтернативы можно использовать:

• фигуру action заменяет фигуры start/end или новая rrect (rounded rectangle)
• фигуру join заменяет rrect.

Использование фигур action и join до 9.0:

webix.ui({
  view: "diagram",
  data: [/* блоки */],
  item: {
    // у всех блоков будет фигура "action"
    type: "action" 
  }
});

Использование фигур action и join после 9.0:

webix.ui({
  view: "diagram",
  data: [/* блоки */],
  item: {
    // у всех блоков будет фигура "rrect"
    type: "rrect"   }
});

Стилизация блоков

Начиная с версии 9.0 каждый блок представляет собой контейнер для его внутренних фигуры и текста. Поэтому, чтобы стилизовать блок, вам нужно обращаться его содержимому через соответствующие CSS классы:

Стилизация блока до 9.0:

[
  {
    id: "1",
    value: "Default",
    // стили для всего блока
    $css: "styles_for_block"
  }
]

Стилизация блока после 9.0:

[
  {
    id: "1",
    // добавляем css класс блоку
    $css: "styles_for_block"
  }
]

Описываем CSS правила для фигуры и текста внутри блока:

/* стили для фигуры */
.styles_for_block .webix_diagram_shape_org { border-color: orange; }
 
/* стили для текста */
.styles_for_block .webix_diagram_text { font-weight: 500; }

Если блок содержит SVG фигуру, вам необходимо обратить непосредственно к ней (а не к классу):

.styles_for_block svg { stroke: orange; }

Более подробно о классах фигур и текста, а также о том, как их стилизовать читайте на этой странице.

Устаревшее API

Начиная с версии 9.0 следующие API и компонент более недоступны:

• Organogram. Рекомендуем посмотреть на более мощную альтернативу - Diagram
• Tabbar API: yCount, popupWidth, popupTemplate свойства. Используйте tabbarPopup
• Calendar API: событие onDateSelect. Используйте onAfterDateSelect и onBeforeDateSelect

Webix 8.3 -> 8.4

Поля фигур в Diagram

Начиная с версии 8.4 поле name у фигур диаграммы заменено на id. Поле name остаётся валидным, новы полняет другую функцию. Оно хранит текстовое значение, которое будет показано в тултипе, когда пользователь наведёт курсор мыши на соответствующую фигуру в редакторе Diagram.

Добавление своей фигуры до 8.4:

webix.ui({
  view: "diagram",
  shapes: [
    {
      name: "internet",       svg: "svg_code",
    },
  ]
});

Добавление своей фигуры после 8.4:

webix.ui({
  view: "diagram",
  shapes: [
    {
      id: "internet",       svg: "svg_code",
      // now it is a tooltip text
      name: "This is Internet",
    },
  ]
});

Изменение также касается сопутствующих методов API.

Webix 8.2 -> 8.3

Export data to Excel

In case Webix CDN is included into a project via webix.env.cdn, you need to update the xlsx.core.styles.min.js file from this repository. The update is required starting from Webix 8.3.

Webix 8.1 -> 8.2

Методы модуля "ranges" в Spreadsheet

Начиная с версии 8.2 методы модуля ranges: getCode, serialize и getRanges) возвращают диапазон с именем листа.

Возвращаемые данные до 8.2:

$$("ssheet").ranges.getRanges("Sheet 1");
/* [
    {
      "name": "MYRANGE",
      "range": "B4:C7"
    }
] */

Возвращаемые данные после 8.2:

$$("ssheet").ranges.getRanges("Sheet 1");
/* [
    {
      "name": "MYRANGE",
      "range": "Sheet1!B4:C7", // включает в себя имя листа 
      "global": true
    }
] */

Произвольные выходные в Gantt

Начиная с версии 8.2 метод сервиса Local isHoliday более недоступен. Используйте одноимённое свойство isHoliday.

Как определяли произвольные выходные до 8.2

class MyLocal extends gantt.services.Local {
  isHoliday(date) {
    // ваш код
    return result;
  }
}

Как определять произвольные выходные после 8.2

webix.ui({
  view: "gantt",
  url: "https://docs.webix.com/gantt-backend/",
  isHoliday: date => {
    // ваш код
    return result;
  }
});

Реактивное свойство Gantt

Начиная с версии 8.2 свойство parent, которое хранило ID родительской задачи, переименовано в edit и теперь показывает, открыта ли правая панель для редактирования.

Объект состояния Gantt до 8.2:

{
  top: 60, left: 250,
  selected: 1.2, parent: "1",
  readonly: false,
  // другие свойства
}

Объект состояния Gantt после 8.2:

{
  top: 60, left: 250,
  selected: 1.2, edit: true,
  readonly: false,
  // другие свойства
}

Webix 7.4 -> 8.0

Scheduler v7.4

Начиная с версии 8.0 у Scheduler новое API. Если вы использовали старую версию Scheduler лучшим решением будет пока не обновляться. Мы продолжим исправлять критические ошибки Scheduler 7.4

Стилизация ячеек хедера в Datatable

Начиная с версии 8.0 Webix Datatable использует DIV элементы вместо HTML таблиц. Используйте класс.webix_hcolumn для стилизации столбцов и .webix_hcell - для стилизации ячеек.

Стилизация ячеек до 8.0:

.my_style .webix_ss_header td {
    border-right: 1px solid #009966;
}

Styling cells после 8.0:

.my_style .webix_ss_header .webix_hcell {
    border-right: 1px solid #009966;
}

Создание пользовательских элементов хедера Datatable

Начиная с Webix 8.0 хедер Datatable не использет HTML таблицы из-за соображений производительности. Поэтому ячейки хедера больше не находятся в TD элементах и вам не нужно использовать метод node.firstChild при создании фильтров.

Создание пользовательских элементов до 8.0:

webix.ui.datafilter.avgColumn = webix.extend({
  refresh:function(master, node, value){
   // рассчитываем результат
    node.firstChild.innerHTML = Math.round(result/master.count());
  }
}, webix.ui.datafilter.summColumn);

Создание пользовательских элементов после 8.0:

webix.ui.datafilter.avgColumn = webix.extend({
  refresh:function(master, node, value){
   // рассчитываем результат
    node.innerHTML = Math.round(result/master.count());
  }
}, webix.ui.datafilter.summColumn);

Новая палитра по умолчанию в Colorboard

Начиная с Webix 8.0 Colorboard использует новую material-палитру по умолчанию. Если вы хотите использовать старую, передайте свойству type значение "classic":

webix.ui({
  view: "colorboard",
  type: "classic"
});

Webix 7.2 -> 7.3

Экспорт toExcel

Изменено API для экспорта нескольких компонентов с помощью toExcel():

Экспорт нескольких компонентов до 7.3:

webix.toExcel(
  [$$("table"), $$("list")],
  { sheets:["Big data", "Small data"]}
);

Экспорт нескольких компонентов после 7.3:

webix.toExcel([
  {id:"table", options: {name:"Big data"}},
  {id:"list", options: {name:"Small data"}}
]);

Функция LINK в Spreadsheet

Функция "LINK" переименована в "HYPERLINK"

Имя функции до 7.3:

=LINK("https://webix.com")

Имя функции после 7.3:

=HYPERLINK("https://webix.com")

Методы фильтра в Spreadsheet

• метод addFilter() заменён на setCellFilter()
• метод removeFilter() переименован в removeFilters()

Методы до 7.3:

$$("ssheet").addFilter(rowId,columnId);
$$("ssheet").removeFilter();

Методы после 7.3:

$$("ssheet").setCellFilter(rowId,columnId, filterObject);
$$("ssheet").removeFilters();

Getting new Multicombo values

The getValues() method of Form returns the ids of options for Multicombo. Before v7.3 when the newValues:true option has been used in Multicombo configuration, the value of the entered item has been used as ID, which could cause issues with non-unique ids. Since v7.3 all added items get unique ids via the webix.uid() method:

Values returned for new Multicombo items before 7.3:

{
  "tags": "2,newvalue"
}

Values returned for new Multicombo items after 7.3:

{
  "tags": "2,1739959413910"
}

Webix 7.1 -> 7.2

File Manager v7.1

Начиная с версии 7.2 у File Manager новое API. На данный момент нет простого способа миграции старой версии, поэтому если вразработке вы использовали File Manager 7.1, лучшим вариантом для вас будет не обновлять компонент. Мы будем продолжать поддерживать версию 7.1, однако обновления для неё выходить не будут.

Переименованно свойство компонента Filter

Начиная с версии 7.2 свойство mode задаёт тип данных для фильтрации:

webix.ui({
  view:"filter",
  mode:"text" // было type:"text"
});

Новый фильтр SpreadSheet

Фильтр "Richselect" больше недоступен. Начиная с версии SpreadSheet 7.2 он заменён на на новый инструмент, базирующийся на виджете Filter.

Webix 7.0 -> 7.1

Упоминания пользователей в Comments

Данные пользователя в виджете Comments при загрузке или парсинге должны соответствовать формату @"Some Name". Теперь нет необходимости добавлять символы "", т.к. они добавляются автоматически.

Упоминания пользователей до 7.1:

"Hi, @Corvo Attano. Let's just do what we are supposed to do."

Упоминания пользователей после 7.1:

"Hi, @\"Corvo Attano\". Let's just do what we are supposed to do."

Webix 6.4 -> 7.0

Устаревшее API

Мы убрали из библиотеки устаревшее и редко используемое API:

• Инициализации из XML и HTML
• Редко используемые proxies (offline, local, cache, connector, indexbd, faye)
• ActiveContent
• Драйвер загрузки Flash
• Панель истории
• Некоторые button types (form, danger, htmlbutton)
• Некоторые helpers (webix.PowerArray, webix.jsonp, webix.ui.each, webix.ui.hasMethod)

Более подробную информацию читайте в этой статье
Обратите внимание, что устаревшие решения всё ещё доступны на GitHub.

Webix 6.2 -> 6.3

Кнопки со стрелками

Кнопки с параметрами type:"next" и type:"prev" полностью удалены из Webix. Теперь они имеют вид стандартных прямоугольных кнопок.

Другие кнопки (эти изменения необязательны)

Также общее количество типов кнопок сокращено для разделения их содержимого и стилизации. Перейдите по ссылке, чтобы ознакомиться с новой схемой типов и стилизации кнопок.

Устаревшие стили CSS и их замены (необязательны для Webix 6.3):

• type:"form" => css:"webix_primary"
• type:"danger" => css:"webix_danger"

Устаревшие типы изображений/иконок и их новые параметры (необязательны для Webix 6.3):

• type:"imageButton" => type:"image"
• type:"imageButtonTop" => type:"imageTop"
• type:"iconButton" => type:"icon"
• type:"iconButtonTop" => type:"iconTop"

По умолчанию кнопки типа "image" и "icon" теперь стилизованы под стандартные кнопки. Чтобы вернуть прозрачный фон, необходимо задать класс кнопкам:

• type:"image", css:"webix_transparent"
• type:"imageTop", css:"webix_transparent"
• type:"icon", css:"webix_transparent"
• type:"iconTop", css:"webix_transparent"

Устаревшие типы будут работать до версии 7.0, и после выхода версии будут полностью удалены.

Webix 6.1 -> 6.2

Прокси

1. Прокси sync удалён. Вместо этого вы можете создать sync запрос и запарсить ответ с помощью API:

var xhr = webix.ajax().sync().get("data.php");
view.parse(xhr.responseText);

2. Метод proxy.load() принимает только 2 параметра:

• view
• params

callback удалён из списка параметров.

Если из этого метода вы возвращаете промис данных или статические данные, они будут запарсены прямо в компонент:

webix.proxy.loading = {
    $proxy:true,
    load(view, params){
        return webix.ajax().post("/server/data",{ books:params.books });
    }
};

3. Метод proxy.save() принимает только 3 параметра:

• view,
• params,
• dp.

callback удалён из списка параметров.

Если из этого метода вы возвращаете промис данных или статические данные, они будут применены к компоненту:

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);
        // ... другие операции
    }
};

4. Метод proxy.saveAll() принимает 3 параметра:

• view,
• updates,
• dp.

callback удалён из списка параметров.

Если из этого метода вы возвращаете промис данных или статические данные, они будут применены к компоненту:

webix.proxy.saveall = {
    $proxy:true,
    saveAll:function(view, updates, dp){
        //updates - массив изменённых records
        return webix.ajax().post(this.source, { data:updates });
    }
};

Загрузка

1. Коллбэк-функции метода webix.ajax больше не могут быть массивом;

2. События при ошибках загрузки:

• view.onLoadError и webix.onAjaxError принимают XHR в качестве единственного параметра:

$$("list").attachEvent("onLoadError", function(xhr){
    //xhr - объект xmlHttpRequest 
    // код обработчика
});

и webix.onLoadError принимают XHR и компонент в качестве параметров:

webix.attachEvent("onLoadError", function(xhr,view){
    //xhr - объект xmlHttpRequest
    //view - компонент, спровоцировавший ошибку
    // код обработчика
});

Виджет Comments

• Свойство format удалено. Его функциональность заменена на scheme, в которой можно изменить парсинг дат:

webix.ui({
    view:"comments",
    scheme:{
        $init:(obj) => {
            if(obj.date)
                obj.date = webix.i18n.parseFormatDate(obj.date);
        }
    },
    // ...данные и конфиг
});

Исходный парсинг дат

• parseFormat по умолчанию включает в себя секунды: "%Y-%m-%d "%H:%i:%s".

Драг-н-дроп

• drag:"order" больше не поддерживает события onAfterDropOrder и onBeforeDropOrder; теперь вместо этого стандартные события Д-н-Д

Webix 5.4 -> 6.0

Имена файлов исходного кода

Переименованы файлы исходного кода: webix.js в webix.min.js и webix_debug.js в webix.js (включает опции отладки).

Использование Webix тем

Сокарёщн список Webix тем, включённых в пакет; тема по умолчанию заменена на Material. На данный момент в билиотеке 5 тем: Material (по умочланию), Mini (компактная версия Material), Flat, Compact (компактная версия Flat), и Contrast.

Исходные и пользовательские иконки

Иконки Font Awesome больше не используются по умолчанию. У билиотеки есть свой набор иконок, который зависит от текущей темы: Material и Mini используют иконки Material Design, а темы Flat, Compact и Contrast используют Font Awesome 5. Пакет содержит только те иконки, которые используются виджетами. Также изменился механизм использования пользовательских иконок. Более подробно читайте в этой статье.

Глобальные свойства Webix

После выхода версии 6.0, глобальные Webix свойства мигрировали в объект env. Поэтому путь к ним теперь выглядит следующим образом:

//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 удалён. Весь необходимый для отладки код помещён в файл webix.js. Перед отладкой ознакомьтесь со следующими изменениями:

• вместо такого использования опции отладки:

webix.debug = true;
webix.debug_size = true;

необходимо задавать их таким образом:

webix.debug({ events: true, size:true });

Все остальные опции были удалены в силу их несостоятельности.

Интеграция со сторонними компонентами

Начиная с версии 6.0, сторонние библиотеки больше не загружаются автоматически через webix.codebase = "./";. Вы всё ещё можете указать путь к необходимым компонентам через CDN. Существует три варианта, как это можно сделать:

• с помощью свойства cdn в конфигурации компонента. Этот вариант позволяет задать путь к необходимой версии библиотеки или к локальному CDN;
• вообще не задавать пути. В это случает будет использован официальный CDN компонента или глобальный cdnjs (если исходники компонента доступны в нём);
• путём прямого подключения всех исходных файлов на страницу. В этом случае необходимо задать false свойству cdn чтобы избежать возможность конфликтов с версией компонента по умолчанию.

Как получить обновлённые расширения для интеграции

Существует два варианта начала использования последней версии расширений для интеграции:

• задать ссылку к необходимому компоненту через CDN

<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>

• скачать расширение с Github

Локализация Pager

Изменилась логика применения пользовательских локалей для кнопок в Pager. Начиная с версии 6.0, локали для компонента задаются через объект the i18n:

webix.i18n.pager = {
    first: "First",
    last: "Last",
    next: "Next",
    prev: "Prev"
};

Webix 5.1 -> 5.2

Важные изменения в компоненте Pivot:

• для разделения ярлыка и поля фильтра добавлено свойство separateLabel; также оно позволяет создавать ярлыки любых размеров. По умолчанию эта опция включена. Чтобы вернуться к предыдущей конфигурации фильтра, установите значение false свойству separateLabel.
• Свойство chart добавлено в исходную локализацию. Оно используется для задания локали секции "Chart" в Pivot Chart configuration window

Webix 4.4 -> 5.0

Изменения в методе hideColumn() компонента Datatable

Изменён порядок параметров в методе hideColumn. Теперь он принимает 4 параметра: id, options, refresh и mode.

новый параметр options регулирует отношение объединённых столбцов и скрытого столбца: при необходимости они могут быть скрыты вместе со столбцом-мастером.

Обновления в функциональности Slider

Начиная с версии, 5.0 заголовок Webix Slider можно перемещать по умолчанию. Чтобы изменить это поведение и зафиксировать заголовок, используйте свойство moveTitle.

Webix 4.3 -> 4.4

Чтобы избежать путанницы, Google-карты были удалены из репозитория компонентов, но их продвинутая версия остаётся в пакете и доступна под обеими лицензиями.

Webix 4.2 -> 4.3

Интеграционные адаптеры для Angular, Backbone и JQuery удалены из файла webix.js. Теперь у них разные репозитории на GitHub, как и у всех остальнх интеграционных решений.

Подробнее о возможностях интеграции Webix с другими фреймворками читайте в этом разделе документации.

Webix 4.1 -> 4.2

Как получить объект интегрированных компонентов

Изменилась механика получения объекта сторонних компонентов: Yandex карты, редактор CodeMirror, Sigma chart и GoogleMap (в основном пакете).

Ранее вы могли получить доступ к объекту следующим образом:

var editor = codemirror.editor;
var map = yandexmap.map;

или же используя метод компонента getSome():

var editor = codemirror.getEditor();
var map = yandexmap.getMap();

Начиная с версии 4.2 единственный вариант получения - использование метода getSome().

Чтобы получить объект карты, чарта или планировщика сразу после его загрузки и инициализации, передайте true в этот метод.

codemirror.getEditor(true).then(function(editor){ /* логика */ });

Список изменённых компонентов

• .getMap() (Yandex maps, Here Maps, OpenStreet Maps, GoogleMap widget (в основном пакете)
• .getEditor() (Ace Editor, NicEdit, CKEditor, Code Mirror, TinyMCE)
• .getChart() (RaphaelJS, FusionCharts, SigmaJS, JustGage)
• .getScheduler() (DHTMLX Scheduler)
• .getStage() (Konva)

NokiaMap переименован в HereMap

Один из сторонних компонентов - NokiaMap - переименован в HereMap

webix.ui({ view:"here-map", id:"map" });

Код обновлённого компонента доступен по этой ссылке.

Webix 4.0 -> 4.1

Важные обновления в комплексном виджете Pivot:

• значение фильтра дат конвертировано в timestamp
  
• Фильтр Multiselect заменён на фильтр Multicombo

Webix 3.4 -> 4.0

Загрузка файлов в PDF Viewer

Изменён механизм загрузки файлов PDF компонента PDFViewer. Начиная с версии 4.0 PDF Viewer использует загрузчик данных Webix и "бинарный" прокси. Это позволяет использовать стандартные события.

webix.ui({
    view:"pdfviewer",
    url:"binary->files/WebixDocs.pdf"
});

Навигация с помощью Tab

Навигация по приложению Webix с помощью клавиши "tab" включена по умолчанию. Она больше не контролируется UIManager.

Раньше tab-навигацию можно было включить такой строкой: webix.UIManager.tabControl = true;. Чтобы лишить какой-либо виджет этой возможности, необходимо было задать false свойству tabFocus.
Начиная с версии Webix 4.0 эта функциональность считается устаревшей.

Начиная с версии 4.0 все виджеты и их активные зоны в стандартном порядке tab-навигации и не могут быть исключены из него. Мы сделали это из-за соображений доступности.

Webix 3.3 -> 3.4

Фильтрация данных в привязанных компонентах: выбранное значение для мастера-компонента устанавливается после загрузки данных

Webix 3.2 -> 3.3

Экспорт данных в PDF

В версии 3.3 было представлено новое свойство конфигурации PDF экспорта - header. Оно используется при настройке внешнего вида хедера экспортируемой таблицы.

Чтобы избежать путанницы, свойства хедера документа header и headerImage были переименованы:

• header --> docHeader
• headerImage --> docHeaderImage

Изменения webix.event

Изменён параметр context в хелпере webix.event. Ранее оно обозначало объект, на который указывало ключевое слово this (мастер). Now it awaits a context object with bind, capture and id properties.

Изменения в методе collectValues

Метод collectValues компонентов DataTable и TreeTable больше не возвращает пустую опцию.

Метод используется фильтрами выбора для сбора массива опций вышеупомянутых компонентов.

До версии 3.3 метод возвращал набор опций и пустую опции для очистик значения фильтра.

Теперь метод не возвращает пустую опции, т.к. фильтры включают её в себя по умолчанию.

Webix 3.1 -> 3.2

Экспорт API

В версии 3.2 удалена старая функциональность экспорта в компонентах Datatable и Pivot.

Методы exportToPDF() и exportToExcel() в Datatable так же, как и методы Pivot toPDF() и toExcel() больше недоступны. Используйте webix.toPDF() и webix.toExcel() вместо них.

webix.toPDF($$("myPivot"));
 
webix.toExcel($$("myDatatable"));

Загрузка файлов Excel в компоненты данных

Прокси "excel" удалён.

Используйте "бинарный" прокси для загрузки файлов типа Excel в дата-компоненты и тип данных "excel" для парсинга файлов Excel. Это исходный тип данных для Excel Viewer.

webix.ui({
    view:"spreadsheet",
    url: "binary->../common/test.xlsx@Data[0-10]",
    datatype:"excel"
});

Webix 3.0 -> 3.1

Валидация форм

Начиная с версии 3.1, form.validate() не будет валидировать заблокированные поля. Чтобы сохрнить старое поведение метода, используйте его следующим образом:

form.validate({ disabled:true });

Webix 2.x -> 3.0

Строгий парсинг JSON

Начиная с версии 3.0 применяются трогие правила парсинга JSON. Это означает что Webix не будет обрабатывать некорректные JSON данные.

Экспорт API

Версия 3.0 включает в себя новый экспорт API. Старая логика экспорта в Datatable устарела и будет полностью удалена в версии 3.2.

Ответы с сервера для Uploader

Изменился формат JSON строк, которые возвращаются загрузочным скриптом. Теперь в случае ошибки загрузки, скрипт отвечает со статусом "error".

echo "{ status:'error' }";

Любой другой ответ, например, "{status:'server'}" означает что загрузка выполнена успешно.

Webix 2.2 -> 2.3

Формат парсинга

В версии 2.2 исходный parseFormat был "%Y-%m-%d". Начиная с версии 2.3 он изменился на "%Y-%m-%d %H:%i".

В текущей локали формат можно изменить следующим образом:

webix.i18n.parseFormat = "%Y-%m-%d";
webix.i18n.setLocate();

Масштабирование лейаута

В версии Webix 2.2 ширина и высота лейаута включали внешние и внутреннии отступы.

//в Webix 2.2 высота в 100px была 140px ( 20 + 100 + 20)
//в Webix 2.3 высота будет равняться значению свойства (100px)
webix.ui({
    view:"layout", padding:20, height:100, rows:[{}]
})

В Webix 2.2 размер лейаута это полный размер, который уже включает в себя внешние и внутренние отступы. Если вам привычно старое поведение, вы можете изменить высоту внутреннего компонента:

// в обеих версиях Webix 2.2 и Webix 2.3 высота будет 140px
webix.ui({
    view:"layout", padding:20, rows:[{ height:100 }]
})

Webix 2.1 -> 2.2

Темплейты в datatable

В версии 2.1 можно было задать "#value#" в темплейте столбца, чтобы применить значение ID этого столбца.

Версия 2.2 будет поддерживать эту возможность, но с новым синтаксисом: "#$value#". Изменения коснулись только ключевого слова "#value#", а все остальные темплейты ("#some#") буду иметь привычный синтаксис.

Ajax

Метод ajax.header заменён на ajax.headers

Масштабирование

Начиная с версии Webix 2.2, компоненты List, DataView и Template, ширина и высота контейнера будут включать ширину полосы прокрутки. Это значит, что ширина компонента будет иметь то значение, которое задано непосредственно в конфигурации (раньше ширина определялась как "заданное значение + ширина полосы прокрутки").

Webix 1.x -> 2.0

Форматирование чисел

Свойство "decimalDelimeter" переименовано в "decimalDelimiter".

Наверх