General project module by Integrating Ext JS with an existing resource¶

All Extjs project modules are in the folder - workspace/client-user-3.0/app.
The MVC pattern is used here - Model/ View/ Controller.

MVC implementations may vary slightly between applications, generally, each part of the architecture has specific responsibilities:

1. The Model describes a common format for the data being used in the application. It may also contain business rules, validation logic, and various other functions.
2. The View represents the data to the user. Multiple views may display the same data in different ways (e.g. charts, grids or HTML etc...).
3. The Controller is the central piece of an MVC application. It listens for events in the application and delegates commands between the Model and the View.

1. USER INTERFACE

¶

in idoc-medoc interface, main project modules integrate local HTML/ JS/ CSS/ JSON or external URLs with Extjs framework

2. CODE Extjs¶

The Module:¶

1. Extend the core.Module;
2. Link with its controller;
3. Create an Ajax request to get the view source in initation of the module;

Example: A singleton instance of an Ext.data.Connection. This class is used to communicate with your server side code. It can be used as follows:

Ext.Ajax.request({
    url: 'ias_guanji.resource',
    params: {
        id: 1
    },
    success: function(response){

        // process server response here
    },

    failure: alertFailure

});

The view:¶

1. Create a panel extended from 'Ext.panel.Panel';
2. Create a constructor to apply the configurations defined at the beginning and to process the Ajax request to the server in constructor;
3. Add settings for sitools preferences (The same for all views' js );

Example:

    /**
     * method called when trying to save preference
     * 
     * @returns
     */

   _getSettings : function () {
       return {
           preferencesPath : "/modules",
           preferencesFileName : this.id,
           xtype : this.$className
       };

The controller:¶

1. Extend the 'Ext.app.Controller';
2. Create an alias if necessary;
3. Link the controller with the view;

3. The source JS codes:¶

1. You can find all MVC related Extjs, Js, HTML, CSS, JSON, Model in the git lab IAS: https://git.ias.u-psud.fr/gwang/idoc-medoc-solar-portal/tree/master/workspace/client-user-3.0/app.
2. You can download directly the files in this wiki and put them into the target folders:

Part of the architecture	File	Folder in the project	Comments
Model	HomeNav.js	workspace/client-user-3.0/app/modules/
View	HomeModuleView.js	workspace/client-user-3.0/app/view/modules/HomeNavModule
Controller	HomeModuleController.js	workspace/client-user-3.0/app/controller/modules/HomeModule

4. The process in the web client-admin side:¶

1. In client-admin, select 'Project module' in 'Acess Management/Projects'
2. Click on Create
3. Fill in the name, description, js object, file url, image, priority and all other Project Module parameters like the following image: (xtype = the module js location)

4. Click on Ok
5. Edit project and add the project module created into this project like the following image:

6. Click on OK then check your web client-portal!