Вы должны явно указать, добавлять ли пустую опцию в редактор ячеек, используя свойство empty:
spreadsheet.setCellEditor(1, 1,
{editor: "ss_richselect", options: "B3:B7", empty: true});
Начиная с версии 10.1, для включения и выключения линий осей следует использовать chart.xAxis.lines и chart.yAxis.lines. Свойство chart.lines будет работать только для диаграмм типа Radar.
Кроме того, с этого момента вместо chart.pieInnerText следует использовать chart.labels.
Начиная с версии 10.0, формулы с HYPERLYNK прекратили поддержку браузерных стилей. Если в данных есть ссылки, и вы хотите сохранить их цветными и подчеркнутыми, вам нужно добавить стили для них отдельно.
const baseStyle = ss.getStyle(1, 1);
const urlStyle = ss.addStyle({ color: "#0000ff", underline: "underline" }, baseStyle);
ss.setStyle(1, 1, urlStyle);
Метод hideItem меню был переименован в hideMenuItem. Чтобы отменить скрытие, используйте новый метод showMenuItem вместо showItem. Метод showItem следует использовать для прокрутки компонента, чтобы сделать видимым указанный элемент.
Все методы, которые раньше возвращали 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"
Раньше параметрами функции для сортировки были значения указанного поля для двух объектов. Теперь это сами объекты данных и имя поля, по которому вы хотите отсортировать.
table.sort("#fieldName#", "desc", function(a, b, prop) {
return a[prop] - b[prop];
})
Начиная с версии 9.1, событие onEditorChange срабатывает на любые изменения в редакторе (событие "oninput"):
on: {
onEditorChange: function(cellId, value) {
webix.message(value);
}
}
Ранее onEditorChange полагалось на событие "onchange" и некорректно отрабатывало в некоторых браузерах, т.к. редактор разрушался в тот же момент.
Чтобы отследить окончание редактирования, вам необходимы события onBeforeEditStop/onAfterEditStop.
Начиная с версии 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 и 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; }
Более подробно о классах фигур и текста, а также о том, как их стилизовать читайте на этой странице.
Начиная с версии 9.0 следующие API и компонент более недоступны:
Начиная с версии 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.
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.
Начиная с версии 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
}
] */
Начиная с версии 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;
}
});
Начиная с версии 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,
// другие свойства
}
Начиная с версии 8.0 у Scheduler новое API. Если вы использовали старую версию Scheduler лучшим решением будет пока не обновляться. Мы продолжим исправлять критические ошибки Scheduler 7.4
Начиная с версии 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;
}
Начиная с 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);
Начиная с Webix 8.0 Colorboard использует новую material-палитру по умолчанию. Если вы хотите использовать старую, передайте свойству type значение "classic":
webix.ui({
view: "colorboard",
type: "classic"
});
Изменено 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" переименована в "HYPERLINK"
Имя функции до 7.3:
=LINK("https://webix.com")Имя функции после 7.3:
=HYPERLINK("https://webix.com")Методы до 7.3:
$$("ssheet").addFilter(rowId,columnId);
$$("ssheet").removeFilter();
Методы после 7.3:
$$("ssheet").setCellFilter(rowId,columnId, filterObject);
$$("ssheet").removeFilters();
Начиная с версии 7.2 у File Manager новое API. На данный момент нет простого способа миграции старой версии, поэтому если вразработке вы использовали File Manager 7.1, лучшим вариантом для вас будет не обновлять компонент. Мы будем продолжать поддерживать версию 7.1, однако обновления для неё выходить не будут.
Начиная с версии 7.2 свойство mode задаёт тип данных для фильтрации:
webix.ui({
view:"filter",
mode:"text" // было type:"text"
});
Фильтр "Richselect" больше недоступен. Начиная с версии SpreadSheet 7.2 он заменён на на новый инструмент, базирующийся на виджете Filter.
Данные пользователя в виджете 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."
Мы убрали из библиотеки устаревшее и редко используемое API:
Более подробную информацию читайте в этой статье
Обратите внимание, что устаревшие решения всё ещё доступны на GitHub.
Кнопки с параметрами type:"next" и type:"prev" полностью удалены из Webix. Теперь они имеют вид стандартных прямоугольных кнопок.
Также общее количество типов кнопок сокращено для разделения их содержимого и стилизации. Перейдите по ссылке, чтобы ознакомиться с новой схемой типов и стилизации кнопок.
Устаревшие стили CSS и их замены (необязательны для Webix 6.3):
Устаревшие типы изображений/иконок и их новые параметры (необязательны для Webix 6.3):
По умолчанию кнопки типа "image" и "icon" теперь стилизованы под стандартные кнопки. Чтобы вернуть прозрачный фон, необходимо задать класс кнопкам:
Устаревшие типы будут работать до версии 7.0, и после выхода версии будут полностью удалены.
1. Прокси sync удалён. Вместо этого вы можете создать sync запрос и запарсить ответ с помощью API:
var xhr = webix.ajax().sync().get("data.php");
view.parse(xhr.responseText);
2. Метод proxy.load() принимает только 2 параметра:
callback удалён из списка параметров.
Если из этого метода вы возвращаете промис данных или статические данные, они будут запарсены прямо в компонент:
webix.proxy.loading = {
$proxy:true,
load(view, params){
return webix.ajax().post("/server/data",{ books:params.books });
}
};
3. Метод proxy.save() принимает только 3 параметра:
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 параметра:
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 - компонент, спровоцировавший ошибку
// код обработчика
});
webix.ui({
view:"comments",
scheme:{
$init:(obj) => {
if(obj.date)
obj.date = webix.i18n.parseFormatDate(obj.date);
}
},
// ...данные и конфиг
});
Переименованы файлы исходного кода: webix.js в webix.min.js и webix_debug.js в webix.js (включает опции отладки).
Сокарёщн список Webix тем, включённых в пакет; тема по умолчанию заменена на Material. На данный момент в билиотеке 5 тем: Material (по умочланию), Mini (компактная версия Material), Flat, Compact (компактная версия Flat), и Contrast.
Иконки Font Awesome больше не используются по умолчанию. У билиотеки есть свой набор иконок, который зависит от текущей темы: Material и Mini используют иконки Material Design, а темы Flat, Compact и Contrast используют Font Awesome 5. Пакет содержит только те иконки, которые используются виджетами. Также изменился механизм использования пользовательских иконок. Более подробно читайте в этой статье.
После выхода версии 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. Существует три варианта, как это можно сделать:
Существует два варианта начала использования последней версии расширений для интеграции:
<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>Изменилась логика применения пользовательских локалей для кнопок в Pager. Начиная с версии 6.0, локали для компонента задаются через объект the i18n:
webix.i18n.pager = {
first: "First",
last: "Last",
next: "Next",
prev: "Prev"
};
Важные изменения в компоненте Pivot:
separateLabel; также оно позволяет создавать ярлыки любых размеров.
По умолчанию эта опция включена. Чтобы вернуться к предыдущей конфигурации фильтра, установите значение false свойству separateLabel.Изменён порядок параметров в методе hideColumn. Теперь он принимает 4 параметра: id, options, refresh и mode.
новый параметр options регулирует отношение объединённых столбцов и скрытого столбца: при необходимости они могут быть скрыты вместе со столбцом-мастером.
Начиная с версии, 5.0 заголовок Webix Slider можно перемещать по умолчанию. Чтобы изменить это поведение и зафиксировать заголовок, используйте свойство moveTitle.
Чтобы избежать путанницы, Google-карты были удалены из репозитория компонентов, но их продвинутая версия остаётся в пакете и доступна под обеими лицензиями.
Интеграционные адаптеры для Angular, Backbone и JQuery удалены из файла webix.js. Теперь у них разные репозитории на GitHub, как и у всех остальнх интеграционных решений.
Подробнее о возможностях интеграции Webix с другими фреймворками читайте в этом разделе документации.
Изменилась механика получения объекта сторонних компонентов: 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){ /* логика */ });
Список изменённых компонентов
Один из сторонних компонентов - NokiaMap - переименован в HereMap
webix.ui({ view:"here-map", id:"map" });
Код обновлённого компонента доступен по этой ссылке.
Важные обновления в комплексном виджете Pivot:
Изменён механизм загрузки файлов PDF компонента PDFViewer. Начиная с версии 4.0 PDF Viewer использует загрузчик данных Webix и "бинарный" прокси. Это позволяет использовать стандартные события.
webix.ui({
view:"pdfviewer",
url:"binary->files/WebixDocs.pdf"
});
Навигация по приложению Webix с помощью клавиши "tab" включена по умолчанию. Она больше не контролируется UIManager.
Раньше tab-навигацию можно было включить такой строкой: webix.UIManager.tabControl = true;. Чтобы лишить какой-либо виджет этой возможности, необходимо было задать false свойству tabFocus.
Начиная с версии Webix 4.0 эта функциональность считается устаревшей.
Начиная с версии 4.0 все виджеты и их активные зоны в стандартном порядке tab-навигации и не могут быть исключены из него. Мы сделали это из-за соображений доступности.
Фильтрация данных в привязанных компонентах: выбранное значение для мастера-компонента устанавливается после загрузки данных
В версии 3.3 было представлено новое свойство конфигурации PDF экспорта - header. Оно используется при настройке внешнего вида хедера экспортируемой таблицы.
Чтобы избежать путанницы, свойства хедера документа header и headerImage были переименованы:
Изменён параметр context в хелпере webix.event. Ранее оно обозначало объект, на который указывало ключевое слово this (мастер). Now it awaits a context object with bind, capture and id properties.
Метод collectValues компонентов DataTable и TreeTable больше не возвращает пустую опцию.
Метод используется фильтрами выбора для сбора массива опций вышеупомянутых компонентов.
До версии 3.3 метод возвращал набор опций и пустую опции для очистик значения фильтра.
Теперь метод не возвращает пустую опции, т.к. фильтры включают её в себя по умолчанию.
В версии 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 Viewer.
webix.ui({
view:"spreadsheet",
url: "binary->../common/test.xlsx@Data[0-10]",
datatype:"excel"
});
Начиная с версии 3.1, form.validate() не будет валидировать заблокированные поля. Чтобы сохрнить старое поведение метода, используйте его следующим образом:
form.validate({ disabled:true });
Начиная с версии 3.0 применяются трогие правила парсинга JSON. Это означает что Webix не будет обрабатывать некорректные JSON данные.
Версия 3.0 включает в себя новый экспорт API. Старая логика экспорта в Datatable устарела и будет полностью удалена в версии 3.2.
Изменился формат JSON строк, которые возвращаются загрузочным скриптом. Теперь в случае ошибки загрузки, скрипт отвечает со статусом "error".
echo "{ status:'error' }";
Любой другой ответ, например, "{status:'server'}" означает что загрузка выполнена успешно.
В версии 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 }]
})
В версии 2.1 можно было задать "#value#" в темплейте столбца, чтобы применить значение ID этого столбца.
Версия 2.2 будет поддерживать эту возможность, но с новым синтаксисом: "#$value#". Изменения коснулись только ключевого слова "#value#", а все остальные темплейты ("#some#") буду иметь привычный синтаксис.
Метод ajax.header заменён на ajax.headers
Начиная с версии Webix 2.2, компоненты List, DataView и Template, ширина и высота контейнера будут включать ширину полосы прокрутки. Это значит, что ширина компонента будет иметь то значение, которое задано непосредственно в конфигурации (раньше ширина определялась как "заданное значение + ширина полосы прокрутки").
Свойство "decimalDelimeter" переименовано в "decimalDelimiter".
Наверх