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

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

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. События при ошибках загрузки:

$$("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".

Драг-н-дроп

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.

Take a look at Pivot What's New for version 5.2.

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".

Наверх