Настройка Document Manager

Так как Document Manager это комплексный виджет, он состоит из множества отдельных Webix компонентов со своим API. Эти компоненты можно переопределить или же работать с отдельными настройками менеджера.

Базовая конфигурация

Базовая конфигурация Document Manager такая же как и для File Manager.

Базовая конфигурация

const dm = webix.ui({
  view: "docmanager",
  id: "docmanager",
  url: "https://docs.webix.com/docmanager-backend/",
  locale: { lang: "ru" },
  width: 700,
  height: 450
});

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

У Document Manager есть реактивные свойства, как и у File Manager:

mode (string) - режим отображения текущей вкладки ("grid" (по умолчанию), "cards" and "double")
path (string) - путь к текущей/первоначальной директории
selectedItem (array) - хранит массив выбранных элементов
search (string) - хранит значение (текст) из поисковой строки
clipboard (object) - хранит данные буфера обмена { files: [{date: dateValue, id: "/Data.xlsx", size: 55215, type: "document", value: "Data.xlsx"}], mode: "copy"}
source - хранит ID текущей групповой папки ("files" - для "My files", "trash", "favorite", "recent" или "shared"); если source не равен "files", path может быть только "/".

Для отображения первоначальных данных можно использовать только свойства path и mode.

Получить текущее состояние компонента можно с помощью метода getState():

webix.ui({
    view:"docmanager", 
    id:"dm"
});
 
var state = $$("dm").getState();
/*
{
  mode: "grid",
  selectedItem: [],
  search: "",
  path: "/",
  source: "files",
  clipboard: {files: [{...}], mode: "copy"}
}
*/

Как отслеживать изменения реактивных свойств

Следить за изменениями реактивных свойств можно с помощью обработчика $observe:

webix.ui({
  view: "docmanager",
  url: "https://docs.webix.com/docmanager-backend/",
 
  on: {
    onInit: function(app) {
      const state = app.getState();
      // выводит текущий путь
      state.$observe("path", v => $$("paths")
        .setValue(`The current path is "${v}"`));
 
      // выводит текущий source
      state.$observe("source", v => $$("sources")
        .setValue(`The current source is "${v}"`));
    }
  }
});

В примере выше, текущий state доступен через экземпляр JetApp, который, в свою очередь, доступен в обработчике onInit.

Наверх