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

Webix 11.1 -> 11.2

Обновлённый метод getFormat в SpreadSheet

До версии 11.2 метод getFormat возвращал только название формата, применённого к конкретной ячейке. Начиная с версии 11.2, метод возвращает объект, содержащий и название формата, и сам формат (строку с условиями форматирования).

До v11.2

//возвращает строку с названием формата
const name = $$("ssheet").getFormat(2, 1, "Sheet1");
webix.message(name); // -> "price"

С v11.2

//возвращает объект с названием формата и самим форматом
const name = $$("ssheet").getFormat(2, 1, "Sheet1");
webix.message(JSON.stringify(name));
// -> {"name":"price","format":"[>=0][$$]#,0.00;[<0]-[$$]#,0.00"}

Обновление маркеров GoogleMap до AdvancedMarker с возможностью настройки

С версии 11.2, виджет GoogleMap использует API Google Maps Advanced Markers вместо API Marker.

Чтобы использовать функциональность Advanced Markers, необходимо указать Map ID через опцию mapId в конфигурации виджета GoogleMap.

webix.ui({
  // укажите ваш Google API ключ
  key:"AIzaSyAi0oVNVO-e603aUY8SILdD4v9bVBkmiTg",
  // Map ID обязателен для Advanced Markers
  mapId:"DEMO_MAP_ID",
  view:"google-map",
  zoom:6,
  center:[ 48.724, 8.215 ],
  // кастомизация дефолтного элемента маркера
  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 }
  ]
});

Advanced Markers расширяют возможности кастомизации маркеров. См. подробнее.

Тулбар и меню Spreadsheet переработаны и унифицированы

Идентификаторы элементов меню и тулбара переименованы

Изменения ID меню

• "columns" -> "column"
• "insert-column" -> "add-column"
• "delete-column" -> "del-column"
• "rows" -> "row"
• "insert-row" -> "add-row"
• "delete-row" -> "del-row"
• блок "data" → блок "edit"

Изменения ID тулбара

• блок "undo" → блок "undo-redo"
• изменены идентификаторы опций в дропдаунах тулбара для работы со строками/столбцами. Теперь они представляют собой комбинацию имени действия и имени группы, например: "add-row", "del-column"

Изменения ID меню и тулбара

• идентификаторы подопций формата строки формируются как "format_name-row":

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

• идентификаторы подопций формата столбца формируются как "format_name-column":

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

Локали

• добавлен тултип для типа линии границ
• ярлыки для текста опций и тултипов:
  • меню и тулбар используют одинаковые ярлыки для текста опций и тултипов из одного объекта локали: webix["i18n"].spreadsheet.actions
  • для ярлыков или тултипов, специфичных для каждого из них:
    • меню использует объекты локали webix["i18n"].spreadsheet.menus или webix["i18n"].spreadsheet.labels
    • тулбар использует объекты локали webix["i18n"].spreadsheet.tooltips или webix["i18n"].spreadsheet.labels
  • если текст ярлыка не найден, Spreadsheet отображает идентификаторы пунктов меню или кнопок тулбара
• некоторые ключи опций изменены (для тех, которые не соответствовали идентификаторам опций, или идентификаторы опций которых были изменены — см. обновлённый список ID тулбара и меню)
• для некоторых опций и тултипов ключи указаны в формате parentId-id для единообразия (например: "top" -> "vertical-align-top")

Список размеров шрифта

Раньше список размеров шрифта в тулбаре представлял собой массив чисел. Теперь это массив объектов следующего вида:

function getFontSize(){
    return [
        { id: "8px", value: "8", action: "font-size" },
        { id: "9px", value: "9", action: "font-size" },
        { id: "10px", value: "10", action: "font-size" },
        // другие объекты размеров шрифта
   ];
}

Actions

С версии 11.2 все actions объединены в один объект, и меню теперь использует те же actions, что и тулбар. Некоторые actions, связанные со стилем ("font-weight", "font-style", "underline", "strike" и "wrap"), работают как переключатели для меню. Поэтому, коллбэк события onStyleSet для этих actions может вызываться только с параметром name, тогда как параметр value будет undefined.

Свойство action в структуре меню равно свойству parentId. Указывать action необязательно — его значение будет взято из соответствующего свойства parentId этого подменю (если они совпадают). Однако вы можете задать кастомные свойства action для таких actions по настройке стиля, как fonts, sizes, alignment, borders и formats. Пример задания свойств action для размеров шрифта из структуры по умолчанию — в разделе выше.

Webix 11.0 -> 11.1

Горячие клавиши UIManager задаются в латинской раскладке

С версии 11.1, сочетания горячих клавиш, задаваемых через метод addHotKey UIManager и свойство hotkey элементов управления, необходимо указывать в латинской раскладке.

Функциональность горячих клавиш поддерживает раскладки QWERTY (по умолчанию), QWERTZ и AZERTY (например, Ctrl+Ö будет распознано как корректная горячая клавиша).

Ограничение загрузки данных в File Manager и Document Manager

В связи с новой возможностью ограничивать количество элементов, загружаемых в каждую папку, внесены следующие изменения:

• изменено API некоторых сервисов: в методы сервисов Backend и LocalData добавлен параметр force:

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);

• изменён формат данных файлов, загружаемых с сервера

Обратная совместимость сохранена, и прежний формат данных (массив объектов) по-прежнему работает. Однако рекомендуемый и обязательный формат для загрузки с ограничением следующий:

{
  files: [ /* объекты, как раньше */ ],
  total: number, // общее количество файлов и папок, если загружены не все
}

• обновлён способ указания иконки Refresh

  

  • до версии 11.1 она задавалась как view:"icon":

  • с версии 11.1 задаётся как {view:"button", type:"icon"}:

Прокручиваемый лейаут для режима Units

После того, как мы добавили возможность задавать минимальную ширину для юнита и добавили автоматическую горизонтальную прокрутку в режиме Units, внешний вид Scheduler изменился. Горизонтальная прокрутка появится, если ширина юнита достигнет размера по умолчанию в 300 px (при изменении размеров окна или при большом количестве юнитов).

Возможно, потребуется скорректировать существующие кастомизации конфигурации Scheduler. Изменённые части кода описаны ниже:

• views["modes/units"] — из возвращаемого значения config удалён промис; одна из трёх частей вынесена в отдельный класс

До v11.1

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

С v11.1

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

где DaysView — новый класс, часть views["modes/units/days"]. Промис из units.config также перенесён в DaysView.

• views["units/multiday"] config() — второй столбец раньше представлял собой массив дней (столбцов). С версии 11.1 они включены в scrollView

До v11.1

config(){
  return units.then(data => {
    return {
      cols: [
        { /* переключатель "more" */ },
        { cols: [ /* дни */ ] }
      ]
    }
  })
}

С v11.1

config(){
  return units.then(data => {
    return {
      cols: [
        { /* переключатель "more" */ },
        { view: "scrollview", body: { cols: [ /* дни */ ] } }
      ]
    }
  })
}

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 и ниже
      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", // или 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",
      // теперь это текст тултипа
      name: "This is Internet",
    },
  ]
});

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

Webix 8.2 -> 8.3

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

Если Webix CDN подключён к проекту через webix.env.cdn, необходимо обновить файл xlsx.core.styles.min.js из этого репозитория. Обновление требуется начиная с версии 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;
}

Стилизация ячеек с версии 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();

Получение новых значений Multicombo

Метод getValues() компонента Form возвращает идентификаторы опций Multicombo. До версии 7.3 при использовании опции newValues:true в конфигурации Multicombo, в качестве ID использовалось значение введённого элемента, что могло приводить к проблемам с неуникальными идентификаторами. Начиная с версии 7.3, все добавленные элементы получают уникальные идентификаторы через метод webix.uid():

Значения, возвращаемые для новых элементов Multicombo до версии 7.3:

{
  "tags": "2,newvalue"
}

Значения, возвращаемые для новых элементов Multicombo с версии 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".

Наверх