Настройка Report Manager

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

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

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

  • id (string, number) - необязательный параметр; ID виджета;
  • url (string) - URL для загрузки и сохранения данных;
  • moduleId (string) - ID просматриваемого отчёта;
  • mode (string) - режим просмотра. Возможные значения:
    • "list" - список отчётов;
    • "view" - отчёт открыт, список "list" закрыт;
    • "edit" - открыта форма для редактирования отчёта;
  • toolbar (boolean) - если false прячет тулбар. По умолчанию true;
  • readonly (boolean) - переключает Report Manager в режим только для чтения. По умолчанию false;
  • locale (string, object) - название текущего языка или объект с языковыми настройками;
  • width (number) - ширина виджета;
  • height (number) - высота виджета.
webix.ui({
  view:"reports",
  url: "https://docs.webix.com/reports-backend/",
  mode: "edit",
  toolbar: false
});

Related sample:  Report Manager: Single Edit Mode

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

Свойства moduleId, mode, readonly и toolbar являются реактивными. Они хранят состояние приложения и позволяют разработчикам отслеживать его изменения. Объект состояния также содержит несколько свойств для чтения:

  • module (object) - JSON с настройками отчёта (источники данных, столбцы, ...);
  • saved (boolean) - если true выбранный модуль сохранён. В случае false настройки отчёта изменены, но не сохранены.

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

webix.ui({
    view:"reports", 
    id:"myReports",
    url: "https://docs.webix.com/reports-backend/"
});
 
const state = $$("myReports").getState();
/*
{
  mode: "edit",
  module: {...конфиг отчёта},
  moduleId: 20,
  readonly:false,
  saved: true,
  toolbar: false 
}
*/

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

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

webix.ui({
  view: "reports",
  url: "https://docs.webix.com/reports-backend/",
  on: {
    onInit: app => {
      const state = app.getState();
      state.$observe("moduleId", id => {
        if(id) webix.message(`ID of this report is ${id}`);
      });
    }
  }
});

Related sample:  Report Manager: Listening to State Changes

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

Наверх