Create and Restore the Current View of a Module Instance

To make the " Share Current View " plugin available, developers must specify how the current view of a module instance is defined and how to restore the current view based on that definition.

Defining a View in the Module

A view can be described via a module configuration that is passed to the module during initialization or when the module is displayed (showModule). Or it can be defined by a route that leads to the current view. To make the “Share Current View” plugin available in the module, the function ` getCurrentModuleState ` should be defined in the module’s main class. This function should return an object that contains either the route to the current view or the module configuration of the current view. The function and its return value can look like this:

Ext.define("monitor.view.Main", {
   // ..........
   /**
    * Function should return current state object of this module (JSON)
    * Current state can consist of it's current route or current moduleCfg
    * You can define, what is current state is this function
    * The current state can be process in function this.updateInstance(moduleCfg, route)
    * and restore the current state on client side
    * @returns object {route: "", moduleCfg: {}}
    */
   getCurrentModuleState : function () {
      const currentState = {
         moduleCfg: this.getCurrentState(),
         route: this.getCurrentRoute();
      };
      return currentState;
   },
});

moduleCfg is evaluated first, then route

Restoring the current view

moduleCfg and route are available during initialization as the module’s properties moduleCfg and moduleRoute. This means that within the function initComponent in the module’s Main class, you have access to both variables. When updating the route, if moduleCfg and route are present in the route, they are received as Parameters in the function updateInstance(moduleCfg, route). To restore the current view based on the URL, you should evaluate moduleCfg or route in the function initComponent or updateInstance. Typically, moduleCfg or route are evaluated in updateInstance; during initialization, this function is called once in initComponent. This ensures that the code for restoring the current view does not need to be repeated.

Example

Ext.define("monitor.view.Main", {
   // .........

   initComponent : function () {
      // .........
      this.callParent();
      this.updateInstance(this.moduleCfg, this.moduleRoute);
   },

   updateInstance : (moduleCfg, moduleRoute) {
      // .........
   },
   /**
    * Function should return current state object of this module (JSON)
    * Current state can consist of it's current route or current moduleCfg
    * You can define, what is current state is this function
    * The current state can be process in function this.updateInstance(moduleCfg, route)
    * and restore the current state on client side
    * @returns object {route: "", moduleCfg: {}}
    */
   getCurrentModuleState : function () {
      const currentState = {
         moduleCfg: this.getCurrentState(),
         route: this.getCurrentRoute();
      };
      return currentState;
   },
});