Question

嗯，我对javascript很新，当然，我是extJS的新手，这是一个Sencha JS框架。我想做的事情我觉得很简单，但我不太了解js。

这是我提供的js文件：

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;
    }

});

我已经提供了这个类，这是一个单身，它的作用是什么？它基于对REST服务（Java）的调用来检索用户信息和工作组信息，我使用“SysAdminObject”，它是处理连接的某些行为的“js”，最后，我使用“Ext.Ajax。请求“从服务器获取数据。当我执行回调时，我可以看到函数“storeInfo”，它将数据设置为变量（好吧，这就是它似乎正在做的事情）。然后我可以处理包含我需要的所有信息的dataInfo变量，并使用方法返回它：“getDataInfo”。有什么方法可以在您调用服务时直接返回数据吗？我的意思是在java中，例如：

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

有没有办法让这个行为与extJS和Javascript？

提前感谢您的时间和帮助。我真的很感激。

Answer 1

ajax请求的return由您指定为callback函数的任何方法处理。在此示例中，它由storeInfo()函数处理。

离Java示例最近的是：

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

getSysAdminObj()函数获取数据并将其存储在this.dataInfo中，如代码所示。由于服务器调用不是异步的（由行async: false设置），因此javascript代码会一直等到服务器调用返回数据，因此您知道this.dataInfo将包含所请求的数据。但是，如果您设置async: true，我上面代码中的行return this.dataInfo可能会在设置this.dataInfo之前执行。

很多时候，最好不要等待服务器请求完成（因为这会阻止浏览器中的任何代码运行，直到可能慢的服务器调用返回）。因此，async将设置为true。为了正确处理这个问题，您必须确保服务器调用后的代码不是取决于服务器调用的结果，而是依赖于这些结果的任何内容必须放在{{1上面提到的功能。

困难在于，从callback函数返回的内容不会将该值返回到进行原始服务器调用的方法。因此，您无法将callback移动到return this.dataInfo函数中，并期望它能够正常运行。相反，您需要使用侦听器和事件。 callback函数应该触发一个事件，该事件告诉正在侦听数据的任何代码，因此侦听器可以执行它应该对该代码执行的任何操作。

例如，假设您创建一个ExtJS网格面板，并希望它显示您的代码正在检索的SysAdmin数据。您可以向上面显示的单例添加一个事件，callback函数将触发该事件，而不是存储数据，并将数据作为参数传递给事件。连接到您的单例将是该事件的监听器，该事件将数据作为其参数，然后将该数据加载到网格面板中。

我知道我在这里谈了很多话题，但我不确定你已经知道的事情。如果您不熟悉这些主题，可以搜索更多信息。我希望这是有帮助的，可以让你指出正确的方向。如您所见，使用JavaScript与Java有一些重要的区别。

此外，ExtJS文档非常有用，所以如果您还没有，请查看它们。这链接到最新版本http://docs.sencha.com/extjs/4.2.2/#!/api

使用Ext.Ajax.request创建ExtJS单例返回对象

1 个答案: