2012-12-18 18 views
6

सेन्चा सीएमडी का उपयोग करके वर्कस्पेस उत्पन्न करने और दो अलग-अलग ऐप बनाने के बाद, मैं सिर्फ पहला ऐप चलाने के लिए और फिर बटन पर क्लिक करने के बाद, यह दूसरा ऐप कहता है :) एक मुख्य ऐप की तरह एक और उप-ऐप पर कॉल करने का कोई तरीका है? आपकी सहायता के लिए thxएक एक्स्टज ऐप एक और एक्स्टजेस एपीपी कॉलिंग

+0

परिणाम क्या होना चाहिए? आप एक स्थिर सेवा (कुछ समय अद्यतन) कहते हैं या आपको अच्छी प्रतिक्रिया की आवश्यकता है? –

+0

पहला ऐप एक खाली पैनल और एक बटन होगा। जब मैं बटन पर क्लिक करता हूं, तो दूसरा ऐप पैनल (पहले ऐप के) पर लोड किया जाएगा। –

उत्तर

18

आप अलग-अलग मॉड्यूल विकसित कर सकते हैं जो बिना किसी समस्या के साथ काम कर सकते हैं। दोनों अवधारणाएं बिल्कुल संघर्ष में नहीं हैं।

मुझे अपना अनुभव यहां साझा करने दें। जब हमने अपनी वर्तमान परियोजना (स्क्रैच से) शुरू किया, तो दो अन्य टीमों ने दो अन्य अनुप्रयोगों को विकसित किया, जो कुछ समय बाद हमें केवल एक बड़े ऐप में 'एकीकृत' करना चाहिए। अंतिम परिणाम की भविष्यवाणी करने के लिए आपको प्रतिभाशाली नहीं होना चाहिए, है ना? हालात खराब हो गए जब हमने सुना कि ग्राहक अधिक समांतर काम (मॉड्यूल विकसित करने वाली अधिक टीम) चाहता था।

पहला विचार आईफ्रेम का उपयोग कर रहा था लेकिन पीओसी ने दिखाया कि यह एक बुरा विचार था, इसलिए हमने मशीन को रोक दिया और एक प्लग करने योग्य वास्तुकला तैयार करना शुरू कर दिया। हमने इसे अच्छी तरह से किया क्योंकि वर्तमान में हम आसानी से एक अलग तरीके से विकसित मॉड्यूल लोड करने में सक्षम हैं (जिसे हम प्लगइन कहते हैं)। उदाहरण के लिए, कैसे हमारी फ़ोल्डर संरचना की तरह दिखता है पर एक नज़र डालें:

enter image description here

और यह मेटाडाटा जहाँ हम मॉड्यूल सेट हम लोड करना चाहते है: enter image description here

यह लाभ का एक बहुत है :

  • मॉड्यूल, समानांतर में विकसित किया जा सकता
  • मॉड्यूल अलग परीक्षण किया जा सकता,
  • मॉड्यूल गतिशील लोड किया जा सकता, सक्षम या अक्षम
बेशक

, इस ExtJS कुछ नहीं है बॉक्स से बाहर प्रदान करता है लेकिन आप इसे क्योंकि इसके लायक कर सकते हैं।

तो, संक्षिप्त उत्तर: आपकी समस्या एप्लिकेशन का आकार नहीं बल्कि इसके इसके बजाय भविष्य है। जैसा कि हम करते हैं एक कस्टम फ़ोल्डर संरचना के साथ अनुशंसित एमवीसी पैटर्न का पालन करें।

अद्यतन:

बारे प्लगइन्स मेटाडाटा। एप्लिकेशन मुख्य नियंत्रक में केवल एक उत्तरदायित्व है: प्लगइन्स लोड करें। यह इस कोड के साथ किया जाता है:

discoverPlugins: function() { 
    var me = this; 
    Ext.each(plugins(), function (d) { 
     me.loadPluginController(d.controller); 
    }); 

    App.History.notifyAppLoaded(); 
}, 

loadPluginController: function (controllerName) { 
    try { 
     var controller = App.current.getController(controllerName); 
     controller.init(App.current); 
    } catch (e) { 
     console.log(controllerName + ' controller couldn\'t be loaded.' + e); 
    } 
}, 

और एक डिस्पैचर के रूप में हर प्लगइन नियंत्रक कार्य करता है, यह है, वहाँ यूआरएल (पता बार में) सुनने के एक इतिहास के घटक है और बदले, तो उसे प्लगइन पूछकर, दोहराता प्लगइन यूआरएल को संभालने के लिए। प्रक्रिया तब समाप्त होती है जब एक प्लगइन अनुरोधित यूआरएल को संभालने में सक्षम होता है।
यह 'आपरेशन' प्लगइन्स के लिए डिस्पैचर विन्यास है:

constructor: function() { 
    this.callParent(arguments); 
    this.router.set({ 
     '!/operations/product/permissions/definition': this.viewPermissionsDefinition, 
     '!/operations/product/accesslist/create': this.createProductAccessList, 
     '!/operations/product/accesslist/{id}/edit': this.editProductAccessList, 
     '!/operations/product/accesslist/{id}': this.viewProductAccessList, 
     '!/operations/product/accesslist': this.viewProductAccessList, 
     '!/operations/{...}': this.notFound, 
     '!/operations': this.root 
    }); 
} 

और यह इतिहास की कक्षा कोड का नेविगेट विधि है:

navigate: function (token) { 
    var me = this, 
     handled; 

    if (token) { 
     handled = false; 
     for (var i = 0; i < me.routers.length; i++) { 
      if (me.routers[i].processToken(token)) { 
       handled = true; 
       break; 
      } 
     } 

     if (!handled) { 
      App.current.fail(404, 'Resource not found.'); 
     } 
    } else { 
     App.current.gotoUrl('/servicedesk/search'); 
    } 
}, 

एक महत्वपूर्ण बिंदु प्लगइन्स केवल के लिए एक संदर्भ है एक साझा घटक: केंद्र क्षेत्र जहां उन्हें प्रस्तुत किया जाता है:

refs: [ 
    { ref: 'main', selector: '#center-panel' } 
], 

यह संदर्भ सभी प्लगइन नियंत्रकों द्वारा विरासत में मिला है Ich 'AbstractPluginController' के उप-वर्ग हैं। यह महत्वपूर्ण है क्योंकि मॉड्यूलर केवल उनके मेजबान के बारे में जानते हैं। और यही कारण है कि हम समानांतर में विकसित कर सकते हैं।

सारप्लप्लगिन नियंत्रक के बारे में, इस वर्ग में सभी प्लगइन नियंत्रकों के लिए उपयोगी कुछ मुख्य कार्यक्षमताएं हैं, उदाहरण के लिए, आवश्यक होने पर उनके सभी नियंत्रक/विचार/मॉडल लोड करने के लिए और इससे पहले नहीं, यह कक्षा गतिशील नियंत्रकों को लागू करती है इस प्रकार लोड हो रहा है:

createControllerGetters: function (controllers) { 
    var me = this; 
    controllers = Ext.Array.from(controllers); 
    Ext.Array.each(controllers, function (controllerName) { 
     var parts = controllerName.split('.'), 
      idx = parts.indexOf('controller'), 
      significants = parts.slice(idx + 1), 
      name = significants.map(function (e) { return Ext.String.capitalize(e); }).join(''), 
      fn = 'get' + name + 'Controller'; 

     if (!me[fn]) { 
      me[fn] = Ext.Function.pass(me.getController, [controllerName], me); 
     } 
    }); 
}, 

getController: function (controllerName) { 
    this.controllerCache = this.controllerCache || {}; 
    var me = this, 
     cached = me.controllerCache[controllerName]; 

    if (!cached) { 
     me.controllerCache[controllerName] = cached = App.current.getController(controllerName); 
     if (cached) { 
      cached.init(); 
      cached.on('beforedestroy', function() { 
       me.controllerCache[ref] = null; 
      }); 
     } 
    } 

    return cached; 
}, 

यह subcontrollers की सूची निर्दिष्ट करने (क्योंकि मुख्य नियंत्रक सिर्फ एक प्रारंभकर्ता और प्रेषण है) मॉड्यूल है की अनुमति देता है, और मांग पर उन्हें बनाने के लिए अनुमति देता है।

controllers: [ 
    'Operations.controller.ProductAccessListViewer', 
    'Operations.controller.ProductAccessListEditor', 
    'Operations.controller.ProductAccessListCreator' 
], 

सारांश:

  1. मॉड्यूल नहींं मेजबान आवेदन के बारे में कुछ भी पता करने के लिए है: मैं मुख्य बिंदु ये हैं लगता है।
  2. नेविगेशन/लिंक के माध्यम से संचार, ज्यादातर
  3. एकीकरण मेटाडाटा (प्लगइन्स अतिरिक्त मेटाडाटा भी बेनकाब कर सकते हैं) का उपयोग कर
  4. नियंत्रकों की आलसी लोड हो रहा है (वे अपने स्वयं के विचारों के साथ कुछ करना)
मेजबान द्वारा किया

मुझे आशा है कि यह आपको एक विचार देगा। बहुत सारे विवरण हैं जो उन्हें एकीकृत करने के लिए कुछ चाल हैं लेकिन मूल रूप से, जो मैं यहां दिखाना चाहता हूं वह एक मॉड्यूलर एप्लिकेशन (या होना चाहिए) अतिरिक्त प्रयासों के साथ extjs के साथ विकसित किया जा सकता है।

+0

मैं यहां जो पोस्ट किया है उससे मैं चिंतित हूं। मैंने इस तरह के एक मॉड्यूलरलाइज्ड अनुप्रयोग को नहीं देखा है। क्या आपके पास इसके बारे में ब्लॉग पोस्ट है? – dbrin

+0

उत्तर के लिए धन्यवाद। हम पहले उल्लेख किए गए इफ्रेम के साथ करते थे। लेकिन मुझे समझ में नहीं आता कि मेटाडाटा कहां रखा जाना है? –

+0

ठीक है, मुझे लगता है कि इस उदाहरण के आधार पर आर्किटेक्चर शायद ही समझ में आता है। विचार @dbrin के रूप में बहुत अच्छा लगता है लेकिन यह प्लगइन-आर्किटेक्चर कोर या कम से कम कुछ और विस्तृत विवरण के बिना शायद ही कभी गोद लेने योग्य होगा। वैसे भी इस दिशा में बिंदु +1 के लायक है ** संपादित करें ** * मुझे इसके बारे में अधिक जानकारी में बहुत दिलचस्पी है! * – sra