Использование сохранение состояния в проектах ExtJS 6

При работе с проектами иногда требуется сохранить состояние элементов после нажатия на CTRL+R или CTRL+F5. И для этой цели мы создали специальные классы для реализации данного механизма.

  • It.state.AbstractStateProvider - Абстрактный провайдер для хранения состояний объекта
  • It.state.LocalStorageStateProvider - Класс для записи состояния в локальное хранилище
  • It.state.ComponentState - Класс для дополнения функциями Ext.Component Применяется при сохранении состояния
  • It.state.ComponentStateManager - менеджер зарегистрированных компонентов для сохранения состояния
  • It.state.ComponentState.tpl.BaseTpl - Базовый класс для шаблонов сохранения состояния

Полное описание классов можно посмотреть в документации

Чтобы включить данную возможность нужно установить настройку componentState у config.json в следующие значения:

 "componentState": {
        "enable":  true,
        "providerName": "It.state.LocalStorageStateProvider"
    }

enable:boolean - если устанавливается параметр true, то механизм сосхранения состояния будет включен

providerName:string - имя провайдера, которое будет использоваться при работе с состоянием

Одних только изменений не достаточно, требуется еще и при инициализации компонента указать следующие настройки

{
    xtype: 'tabpanel'
    it:{
            enableSaveState: true,
            elKey: 'tabId'
    }
}

, где enableSaveState:boolean - указывает, требуется ли сосхранять состояние или нет

elKey:string - уникальный идентификатор компонента

После включения данной конфигурации объект будет сохранен в специальном хранилище для данных компонентов.

В данном примере используется tabpanel и для реализации  сохранения состояния у него доступен класс It.state.ComponentState.tpl.tabpanel. В нем реализован метод getMarking, который возвращает json- конфигурацию для восстановления состояния (подробнее см. в документации).

!!! Перед включением данного механизма в других компонентах, требуется уточнить доступна ли реализация  It.state.ComponentState.tpl.[xtype]

Далее для сохранения состояния всех зарегистрированных компонентов требуется вызвать следующий метод

var componentuistate = Ext.create('It.diagnostic.ComponentUIState',{});
componentuistate.saveStateComponents(function(){
// данные сохранены
});

Для восстановления состояния должен быть вызван метод returnStateComponents который перегрузит страницу

!!! Внимание данный класс является экспериментальным, подробности читать в документации

Реализация внутри

В классе It.app.Application доступен метод initSaveState который считывает данные из хранилища для доступа к ним синхронно.

initSaveState: function (callback) {
        var componentState = Ext.create('It.state.ComponentState');
        componentState.getStateProvider().unLoadStateData(function () { // выгружаем все состояние в память
            (It).state.ComponentStateManager.readDataFromStorage(function () { // выгружаем зарегистрированные объекты
                /*
                 * эти действия требуется совершить для того чтобы была возможнось запрашивать данные синхронно, так как в constructor иначе ни как нельзя
                 */
                callback();
            });
        });
    }

Далее в конструкторе компонента происходит проверка, доступен ли механизм сохранения.

constructor(cfg) {
        var me = this;

        if (this.isEnableSaveState(cfg) && this.isReturnStatus()) {
            var marking;
            this.returnComponentStateByElKey(cfg.it.elKey, function (result) {
                marking = result;
            });
            if (marking) {
                Ext.apply(cfg, JSON.parse(marking.get('data')));
            }
        }

        this.callParent(arguments);
    },

А сохранение состояния происходит в методе initComponent

initComponent: function () {
        if (this.isEnableSaveState()) {
            this.writeComponentInStateManager();
        }
        this.callParent(arguments);
    }

!!! Если вдруг что-то пойдет не так, то просто очистите localstorage

Нет комментариев

Добавить комментарий