Rendre l'objet de retour singleton ExtJS en utilisant Ext.Ajax.request

Eh bien, je suis très nouveau pour JavaScript et pour sûr, je suis très nouveau chez extJS, qui est un framework Sencha JS. Ce que je veux faire, je pense est très simple, mais je ne sais pas trop à propos de js.

C'est le fichier JS que j'ai reçu:

Ext.define('app.util.UserWGroupInfo', {
    alternateClassName: ['UserInfo', 'WGroupInfo'],
    singleton: true,

    /**
     * Default information to be shown/displayed
     */
    statics: {
        userData: {
            'username':                 'User Name',
            'phoneNumber':              'Phone',
            'firstName':                'First Name',
            'lastName':                 'Last Name',
            'emailAddress':             'Email',
            'address.addressLine1':     'Address',
            'address.city':             'City',
            'address.stateOrProv':      'State'
        },
        wGroupData: {
            'name':                     'Name',
            'type':                     'Type',
            'description':              'Description',
            'phoneNumber':              'Phone',
            'poc':                      'POC'
        }
    },

    /**
     * Holder for the data to display
     * @type {Object}
     */
    dataToDisplay: {

    },

    /**
     * display a popup on no data retrieved
     * @type {Boolean} [true]
     */
    displayMsg: true,

    /**
     * Gets data of an user from the server
     * 
     * @param {String} userInfo, consider passing "usid:name"
     * @param {Boolean} double set true to check Like User&WGroup
     */
    getUserInfo: function(userInfo, displayMsg) {

        if (Ext.isEmpty(userInfo)) {
            return;
        }

        userInfo = userInfo.split(':');
        var user = userInfo[0] + ':' + + userInfo[1];

        //Note: to retrieve tooltip, set defaults data
        this.dataToDisplay = this.statics().userData;
        this.typeSearch = "User";

        if (displayMsg) {
            this.displayMsg = displayMsg;
        }

        this.getSysAdminObj('users', user);
    },

    /**
     * Gets data of a workgroup from the server
     * 
     * @param {String} wGroupInfo, consider passing "wgid:name"
     * @param {Boolean} double set true to check Like User&WGroup
     */
    getWGroupInfo: function(wGroupInfo, displayMsg) {

        if (Ext.isEmpty(wGroupInfo)) {
            return;
        }

        wGroupInfo = wGroupInfo.split(':');
        var wGroup = wGroupInfo[0] + ':' + wGroupInfo[1];

        //Note: to retrieve tooltip, set default data
        this.dataToDisplay = this.statics().wGroupData;
        this.typeSearch = "Work Group";

        if (displayMsg) {
            this.displayMsg = displayMsg;
        }

        this.getSysAdminObj('workgroups', wGroup);
    },

    getDataInfo: function() {
        return this.dataInfo;
    },

    /**
     * Retrieve a SysAdmin object to perform a connection to the server side.
     * 
     * @param {String} type. Consider as possible values: "users" or "workgroups"
     * @param {String} info
     */    
    getSysAdminObj: function(type, info) {
        var me = this;

        Ext.Ajax.request ({
            url:        '../rest/sysadmin/' + type + '/' + info,
            method:     'GET',
            scope:      me,
            async:      false,
            callback:   me.storeInfo
        });
    },

    /**
     * Map information retrieved to the dataInfo object.
     * 
     * Before storing the data, it is necessary to check if the search should be executed as user or workgroup.
     */
    storeInfo: function(o, s, r) {
        if ( !s ) {
            if (this.displayMsg) {
                Logger.notify('User Info Loading', 'Failed to load extra user info');
            }
            this.errorResponse = true;
            return;
        };

        this.errorResponse = false;
        var obtainedData = XmlConverter.unmarshal(r);
        this.dataInfo = obtainedData;
    }

});

J'ai été fourni avec cette classe, qui est un singleton, qu'est-ce qu'il fait? Il récupère les informations utilisateur et les informations sur les groupes de travail en fonction de l'appel fait à un service REST (Java), j'utilise un "SysAdminObject" qui est un "js" qui gère certains comportements de la connexion, et enfin, j'utilise un "Ext.Ajax. demande "pour obtenir les données du serveur. Quand j'exécute le callback, je peux voir la fonction "storeInfo" qui place les données dans une variable (enfin, c'est ce que ça semble faire). Ensuite, je peux gérer la variable dataInfo qui contient toutes les informations dont j'ai besoin et je la retourne avec la méthode: "getDataInfo". Est-il possible de simplement retourner les données directement lorsque vous appelez le service? Je veux dire en Java, par exemple:

public Object getUserInfo() {
  Object obj = null;
  obj = getFromServer();
  return obj;
}

Est-il possible d'avoir ce comportement avec extJS et Javascript?

Merci d'avance pour votre temps et votre aide. J'apprécie vraiment cela.

1

1 Réponses

Le return de la requête ajax est géré par la méthode que vous attribuez en tant que fonction callback . Dans cet exemple, il est géré par la fonction storeInfo() .

Le plus proche de votre exemple Java est:

getUserInfo: function() {
    getSysAdminObj();
    return this.dataInfo;
}

La fonction getSysAdminObj() récupère les données et les stocke dans this.dataInfo , comme indiqué dans votre code. Puisque l'appel du serveur n'est pas asynchrone (comme défini par la ligne async: false ), le code JavaScript attend que l'appel du serveur renvoie les données, donc vous savez que this.dataInfo contiendra les données demandées. Toutefois, si vous définissez async: true , la ligne renvoie this.dataInfo dans mon code ci-dessus pourrait être exécutée avant que this.dataInfo ne soit défini.

Plusieurs fois, il est préférable de ne pas attendre la fin d'une requête serveur (car cela empêche l'exécution de tout code dans le navigateur jusqu'à ce que l'appel du serveur potentiellement lent revienne). Ainsi, async serait défini sur true . Pour gérer cela correctement, vous devez vous assurer que le code suivant l'appel du serveur ne dépend pas des résultats de l'appel du serveur, et que tout ce qui dépend de ces résultats doit être placé dans le rappel fonction mentionnée ci-dessus.

Le problème est que le renvoi d'un élément à partir de la fonction callback ne renvoie pas cette valeur à la méthode ayant effectué l'appel du serveur d'origine. Donc, vous ne pouvez pas simplement déplacer retourner this.dataInfo dans la fonction callback et attendre que cela fonctionne. Au lieu de cela, vous devez utiliser des écouteurs et des événements. La fonction callback doit déclencher un événement qui indique à tout code écoutant que les données ont été récupérées, afin que l'auditeur puisse faire ce qu'il devrait faire avec ce code.

Par exemple, disons que vous créez un panneau de grille ExtJS et que vous voulez qu'il affiche les données SysAdmin que votre code récupère. Vous ajouteriez un événement à votre singleton illustré ci-dessus, et la fonction storeInfo déclencherait cet événement, au lieu de stocker les données, et transmettrait les données dans l'événement en tant que paramètre. Attaché à votre singleton serait un auditeur pour cet événement, qui prendrait les données comme paramètre, et chargerait ensuite ces données dans le panneau de grille.

Je sais que j'ai abordé un tas de sujets, mais je n'étais pas sûr de ce que vous saviez déjà. Vous pouvez rechercher plus d'informations sur ces sujets si vous n'êtes pas familier avec eux. J'espère que cela sera utile et que vous pourrez vous orienter dans la bonne direction. Comme vous pouvez le constater, travailler en JavaScript présente des différences importantes avec Java.

Also, the ExtJS docs are very helpful, so check those out if you haven't already. This links to the latest version http://docs.sencha.com/extjs/4.2.2/#!/api

1
ajouté
merci beaucoup, bien expliqué et m'a aidé à réaliser ce que je dois faire. Merci!
ajouté l'auteur Marcelo Tataje, source