Настройка File Manager

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

Базовые свойства

Чтобы настроить общую конфигурацию виджета, используйте следующие настройки:

id (string, number) - ID виджета
url (string) - URL для загрузки данных
locale (object) - текущая локаль
width (number) - ширина виджета
height (number) - высота виджета
editor (boolean) - в случае false, виджет не сможет редактировать текстовые файлы. true по умолчанию
player (boolean) - в случае false, виджет не сможет проигрывать аудио- и видеофайлы. true по умолчанию
compact (boolean) - компактный режим. false по умолчанию
compactWidth (number) - ширина виджета, при которой он переключается в компактный режим. 640 по умолчанию.

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

Кроме базовых свойств, у File Manager есть реактивные, которые хранят состояние приложения и позволяют разработчикам отслеживать его изменения:

mode (string) - режим отображения текущей вкладки ("grid" (по умолчанию), "cards" and "double")
path (string) - путь к текущей/первоначальной директории
selectedItem (array) - хранит массив выбранных элементов
search (string) - хранит значение (текст) из поисковой строки
clipboard (object) - хранит данные буфера обмена (объекты файлов/папок и режим копирования - "cut"/"copy"). Напр., { files:[{id: "/hello.txt", size: 0, type: "code", value: "hello.txt"}], mode:"copy" }.

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

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

webix.ui({
    view:"filemanager", id:"fm",
    mode:"cards"
});
 
var state = $$("fm").getState();
/*
{
    mode:"cards", path:"/Docs/Test files",
    selectedItem:[ ], search:"", clipboard: {files: [{...}], mode: "copy"}
}
*/

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

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

webix.ui({
    view:"filemanager",
    on: {
        onInit: app => {
            const state = app.getState();
 
            //лог path и selectedItem
            state.$observe("path", v => $$("path").setValue(v));
            state.$observe("selectedItem", v =>
                $$("files").setValue(v.map(a => a.id).join(", "))
            );
        },
    }
});

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

Наверх