Ext.Ajax.request का उपयोग कर ExtJS सिंगलटन रिटर्न ऑब्जेक्ट बनाएं

खैर, मैं जावास्क्रिप्ट के लिए बहुत नया हूं और निश्चित रूप से, मैं extJS पर बहुत नया हूं, जो एक सेन्चा जेएस ढांचा है। मैं क्या करना चाहता हूं मुझे लगता है कि यह बहुत आसान है, लेकिन मुझे जेएस के बारे में ज्यादा जानकारी नहीं है।

यह जेएस फ़ाइल है जो मुझे प्रदान की गई है:

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

});

मुझे इस वर्ग के साथ प्रदान किया गया है, जो एक सिंगलटन है, यह क्या करता है? यह एक आरईएसटी सेवा (जावा) में किए गए कॉल के आधार पर उपयोगकर्ता की जानकारी और कार्यसमूह की जानकारी पुनर्प्राप्त करता है, मैं "SysAdminObject" का उपयोग करता हूं जो एक "जेएस" है जो कनेक्शन के कुछ व्यवहारों को संभालता है, और अंत में, मैं "Ext.Ajax" का उपयोग करता हूं। अनुरोध करें "सर्वर से डेटा प्राप्त करने के लिए। जब मैं कॉलबैक निष्पादित करता हूं तो मैं "storeInfo" फ़ंक्शन देख सकता हूं जो डेटा को एक चर में सेट करता है (ठीक है, ऐसा लगता है कि ऐसा लगता है)। फिर मैं डेटा इन्फॉर्म वैरिएबल को संभाल सकता हूं जिसमें मुझे आवश्यक सारी जानकारी शामिल है और मैं इसे विधि के साथ वापस कर देता हूं: "getDataInfo"। जब भी आप सेवा कॉल करते हैं तो सीधे डेटा वापस करने का कोई तरीका है? मेरा मतलब जावा में है, उदाहरण के लिए:

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

क्या इस व्यवहार को extJS और जावास्क्रिप्ट के साथ रखने का कोई तरीका है?

आपके समय और मदद के लिए अग्रिम धन्यवाद। मैं वास्तव में इसकी प्रशंसा करता हूँ।

1
जोड़ा संपादित
विचारों: 1

1 उत्तर

AJAX अनुरोध का वापसी जिसे आप कॉलबैक फ़ंक्शन के रूप में असाइन करते हैं, द्वारा नियंत्रित किया जाता है। इस उदाहरण में, इसे storeInfo() फ़ंक्शन द्वारा नियंत्रित किया जाता है।

आपके जावा उदाहरण में सबसे नज़दीक आप प्राप्त कर सकते हैं:

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

getSysAdminObj() फ़ंक्शन डेटा प्राप्त करता है और इसे आपके कोड में दिखाए गए अनुसार this.dataInfo में संग्रहीत करता है। चूंकि सर्वर कॉल एसिंक्रोनस नहीं है (जैसा कि लाइन async: false ) द्वारा सेट किया गया है, जावास्क्रिप्ट कोड तब तक प्रतीक्षा करता है जब तक कि सर्वर कॉल डेटा लौटा न दे, तो आप जानते हैं कि this.dataInfo अनुरोधित डेटा होगा। हालांकि, अगर आप async: true सेट करते हैं, तो ऊपर दिए गए मेरे कोड में this.dataInfo पंक्ति this.dataInfo सेट हो जाने से पहले निष्पादित की जा सकती है।

कई बार, सर्वर अनुरोध को पूरा करने की प्रतीक्षा न करना बेहतर होता है (क्योंकि यह ब्राउज़र में किसी भी कोड को संभावित रूप से धीमी सर्वर कॉल रिटर्न तक चलने से रोकता है)। तो, फिर async को true पर सेट किया जाएगा। इसे सही तरीके से संभालने के लिए, आपको यह सुनिश्चित करना होगा कि सर्वर कॉल के बाद कोड सर्वर कॉल के परिणामों के आधार पर नहीं है, और इसके बजाय, उन परिणामों पर निर्भर कुछ भी कॉलबैक </कोड> ऊपर वर्णित समारोह।

कठिनाई यह है कि कॉलबैक फ़ंक्शन से कुछ लौटने से उस मान को उस विधि पर वापस नहीं किया जाएगा जो मूल सर्वर कॉल करता है। तो, आप call.d को कॉलबैक फ़ंक्शन में वापस लौटाएं फ़ंक्शन को स्थानांतरित नहीं कर सकते हैं और इसे काम करने की उम्मीद कर सकते हैं। इसके बजाय, आपको श्रोताओं और घटनाओं का उपयोग करने की आवश्यकता है। कॉलबैक फ़ंक्शन को ऐसी घटना को आग लगाना चाहिए जो बताता है कि जो भी कोड सुन रहा है, डेटा पुनर्प्राप्त किया गया है, और इसलिए श्रोता जो भी कर सकता है वह उस कोड के साथ करना चाहिए।

उदाहरण के लिए, मान लें कि आप एक एक्स्टजेस ग्रिड पैनल बनाते हैं, और आप इसे SysAdmin डेटा प्रदर्शित करना चाहते हैं जो आपका कोड पुनर्प्राप्त कर रहा है। आप अपने सिंगलटन ऊपर दिखाए गए एक घटना जोड़ना होगा, और storeInfo समारोह है कि घटना से निकाल देते थे, बजाय डेटा भंडारण की है, और एक पैरामीटर के रूप में घटना में डेटा गुजरती हैं। आपके सिंगलटन से जुड़ा हुआ उस घटना के लिए श्रोता होगा, जो डेटा को इसके पैरामीटर के रूप में ले जाएगा, और उसके बाद उस डेटा को ग्रिड पैनल में लोड करेगा।

मुझे पता है कि मैंने इसमें विषयों के समूह पर छुआ है, लेकिन मुझे यकीन नहीं था कि आप पहले से क्या जानते थे। यदि आप उनसे परिचित नहीं हैं तो आप इन विषयों पर अधिक जानकारी प्राप्त कर सकते हैं। मुझे आशा है कि यह सहायक होगा, और आपको सही दिशा में इंगित कर सकता है। जैसा कि आप देख सकते हैं, जावास्क्रिप्ट में काम करना जावा से कुछ महत्वपूर्ण अंतर है।

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
जोड़ा
बहुत बहुत धन्यवाद, अच्छी तरह से समझाया और मुझे यह समझने में मदद की कि मुझे क्या करना है। धन्यवाद!
जोड़ा लेखक Marcelo Tataje, स्रोत