Настройка 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) - режим отображения текущей вкладки ("list" (по умолчанию), "cards" and "double");
  • path (string) - путь к текущей/первоначальной директории;
  • selectedItem (array) - хранит массив выбранных элементов;
  • search (string) - хранит значение (текст) из поисковой строки;
  • clipboard (object) - хранит данные буфера обмена (ID файлов/папок и режим копирования - "cut"/"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:null
}
*/

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

Следить за изменениями реактивных свойств можно с помощью обработчика $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(", "))
            );
        },
    }
});

Related sample:  File Manager: Listening to States

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

Наверх