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



嗯,我对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.request"从服务器获取数据。当我执行回调时,我可以看到函数"storeInfo",它将数据设置为一个变量(好吧,它似乎就是这么做的)。然后我可以处理dataInfo变量,它包含我需要的所有信息,并用方法"getDataInfo"返回它。有没有什么方法可以在您调用服务时直接返回数据?我的意思是在java中,例如:

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

extJS和Javascript有没有办法实现这种行为?

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

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。为了正确处理此问题,您必须确保服务器调用后的代码不依赖于服务器调用的结果,相反,任何依赖于这些结果的代码都必须放在上面提到的callback函数中。

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

例如,假设您制作了一个ExtJS网格面板,并希望它显示代码正在检索的SysAdmin数据。您将向上面显示的单例添加一个事件,storeInfo函数将激发该事件,而不是存储数据,并将数据作为参数传递到事件中。连接到您的singleton的将是该事件的侦听器,它将接收数据作为其参数,然后将该数据加载到网格面板中。

我知道我在这篇文章中涉及了很多话题,但我不确定你已经知道了什么。如果你不熟悉这些主题,你可以搜索更多信息。我希望这是有帮助的,可以让你指向正确的方向。正如您所看到的,使用JavaScript与Java有一些重要的区别。

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

最新更新