使用Ext.Ajax.request使ExtJS單例返回對象

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

通過分配給callback函數的任何方法都可以處理ajax請求的return 。 在此示例中，它由storeInfo()函數處理。

與Java示例最接近的是：

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

getSysAdminObj()函數獲取數據並將其存儲在this.dataInfo ，如代碼所示。 由於服務器調用不是異步的（由async: false行設置），因此javascript代碼將一直等到服務器調用返回數據為止，因此您知道this.dataInfo將包含請求的數據。 但是，如果設置async: true ，則可以在設置this.dataInfo之前執行上述代碼中return this.dataInfo的行。

很多時候，最好不要等待服務器請求完成（因為這會停止瀏覽器中的任何代碼運行，直到可能變慢的服務器調用返回）。 因此，然后將async設置為true 。 為了正確處理此問題，您必須確保服務器調用后的代碼不取決於服務器調用的結果，而是將依賴於這些結果的所有內容放置在上述callback函數中。

困難在於，從callback函數返回內容將不會將該值返回到進行原始服務器調用的方法。 因此，您不能只將return this.dataInfo到callback函數中並期望它能工作。 相反，您需要使用偵聽器和事件。 callback函數應該觸發一個事件，該事件告訴正在偵聽的任何代碼都已檢索到數據，因此偵聽器可以執行該代碼應執行的任何操作。

例如，假設您制作了一個ExtJS網格面板，並希望它顯示您的代碼正在檢索的SysAdmin數據。 您將在上面顯示的單例中添加一個事件， storeInfo函數將觸發該事件，而不是存儲數據，並將數據作為參數傳遞給事件。 附加到您的單例的對象將是該事件的偵聽器，該事件將數據作為參數，然后將該數據加載到網格面板中。

我知道我涉及了很多主題，但是我不確定你已經知道了什么。 如果您不熟悉這些主題，則可以搜索更多信息。 我希望這會有所幫助，並能使您指明正確的方向。 如您所見，使用JavaScript與Java有一些重要的區別。

另外，ExtJS文檔非常有幫助，因此如果您還沒有的話，請查看這些文檔。 這鏈接到最新版本http://docs.sencha.com/extjs/4.2.2/#!/api