ExtJS एमवीसी, गतिशील लोडिंग और i18n

Question

मैं अपने ExtJS एप्लिकेशन को विभिन्न भाषाओं में अनुवाद करना चाहता हूं। मेरी समस्या यह है कि मैं एक्स्टजेएस एमवीसी फ्रेमवर्क का उपयोग कर रहा हूं, और मेरी अधिकांश जेएस फाइलें फ्रेमवर्क द्वारा गतिशील रूप से डाउनलोड की जाती हैं।

आदर्श समाधान (जिसे मैंने सोचा था) Ext.Loader (या मेरे Ext.app.Aplication) में एक अतिरिक्त विकल्प होगा जो भाषा का उपयोग करने के लिए परिभाषित करेगा, और इसके आधार पर स्वचालित रूप से डाउनलोड करने के लिए मेरी "a.MyClass.js" लोड करने के बाद "a.MyClass.fr.js" जैसी फ़ाइल (जिसमें एक Ext.apply होगा, मेरे स्ट्रिंग संसाधनों को ओवरराइड करना होगा)। फिलहाल यह एक्स्टजेएस ढांचे में उपलब्ध नहीं है।

वैकल्पिक समाधान जो मैं देख सकता हूं, सर्वर-साइड पर एक चाल करना है। सबसे पहले, भाषा पर सेट करने के लिए, ग्राहक पर एक कुकी बनाई जाएगी। सर्वर-साइड पर, मैं जेएस फाइलों के सभी अनुरोधों को पकड़ सकता हूं, फिर यदि कोई कुकी सेट की गई है (उदाहरण के लिए = 'fr'), तो मैं अनुरोधित जेएस फ़ाइल (MyClass.js) को अपने i18n के दोस्त (MyClass) के साथ जोड़ दूंगा .fr.js) गतिशील रूप से सर्वर पर और परिणाम लौटाएं। यह काम करेगा, लेकिन यह वास्तव में मुश्किल है क्योंकि यह अन्य चीजों का मतलब है (कैशिंग ...)।

हो सकता है कि सबसे अच्छा तरीका पहले व्यवहार मैं ExtJS ढांचा अपने आप में वर्णित ...

आपको क्या लगता है लागू करने के लिए है? मैं इसे करने का वास्तव में साफ और साफ तरीका ढूंढ रहा हूं! धन्यवाद :)

Answer 1

मैंने हाल ही में एक ही समस्या के साथ संघर्ष किया।

यह काफी एक चुनौती थी क्या करने के लिए एक साफ रास्ता ढूँढना - सबसे विकल्प या तो थे ..

1) लोकेल प्रति अपने कोड बेस (WTH)

2) डुप्लिकेट डाउनलोड के प्रत्येक अधिभावी स्थानीय फ़ाइलें आपके घटकों (रखरखाव नरक? गरीब अनुवादकों के बारे में क्या?)

3) अनुवाद वाली एक स्थिर फ़ाइल का उपयोग/उत्पन्न करें और इसे देखें (सभी भाषाओं को डाउनलोड किया गया है? इसे बनाने के लिए अतिरिक्त निर्माण चरण? आप उन्हें सिंक में कैसे रखते हैं ?)

मैं सभी दुनिया का सबसे अच्छा पाने की कोशिश की है और एक उपयोगिता वर्ग के लिए जिम्मेदार के साथ समाप्त हो गया:

1) ExtJS अनुवाद फ़ाइलें (जो मूल रूप से ExtJS आधार घटकों को ओवरराइड लागू)

2 लोड हो रहा है) सर्वर से एक लोकेल विशिष्ट प्रॉपर्टी संसाधनबंडल (लोड करने के लिए कौन सा लोकेल लोड करना) लोड हो रहा है।

3) एक अनुवाद() विधि के साथ प्रोटोटाइप स्ट्रिंग जो लोड किए गए स्टोर (सर्वर से संदेश बंडल युक्त) से पूछताछ करता है और स्ट्रिंग के मान के आधार पर अनुवाद देता है।

बंडल & प्रोटोटाइप:

localeStore.load({ 
    callback : function(records, operation, success) { 
     // Define translation function (NB! Must be defined before any components which want to use it.) 
     function translate() { 
      var record = localeStore.getById(this.valueOf()) ; 
      if(record === null) { 
       alert('Missing translation for: ' + this.valueOf()); // Key is not found in the corresponding messages_<locale>.properties file. 
       return this.valueOf(); // Return key name as placeholder 
      } else { 
       var value = record.get('value'); 
      } 
      return value; 
     } 

     String.prototype.translate = translate; 
     callback.call(); // call back to caller(app.js/Ext.Application), loading rest of application 
    } 
}); 

एक दृश्य से एक उदाहरण के रूप में: सर्वर (mesages_en.properties पर

this.copyButton = Ext.create('Ext.button.Button', { 
    disabled: true, 
    text: 'DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON'.translate(), 
    action: 'openCopyDialog' 
}); 

बंडल

यह बातें का सार है): DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON = फ़ाइल कॉपी करें ई टीसी ..

सकारात्मक:

• कोई उपद्रव कोड, 'Your_key'.translate() इसे पढ़ने के लिए आसान और जागरूक यह एक स्थानीय स्ट्रिंग है कि
• कोई नहीं/थोड़ा रख-रखाव भूमि के ऊपर बना देता है (ध्यान में रखते हुए प्रत्येक लोकेल के लिए एक ओवरराइड फ़ाइल? जीसस ..)
• आप केवल उस लोकेल को लोड करते हैं जिसे आप चाहते हैं - पूरे शबांग नहीं।
• यदि आप वास्तव में चाहते हैं, तो आप एक ही बंडल में ExtJS लोकेल फ़ाइलों के लिए अपना स्वयं का अनुवाद भी प्राप्त कर सकते हैं।
• आप इकाई परीक्षण लिख सकता है यह सुनिश्चित करें कि सभी बंडलों एक ही कुंजी होते हैं, इस प्रकार अनाथ अनुवाद बाद में

विपक्ष से परहेज:

• तुल्यकालिक - दुकान अपने मुख्य अनुप्रयोग शुरू होने से पहले लोड किया जाना चाहिए। मैंने उपयोगिता वर्ग से कॉलबैक जोड़कर हल किया जिसे एक बार सभी ग्रंथों को लोड किया गया था। पी

अब तक मेरी दृष्टिकोण मेरी आवश्यकताओं के लिए बहुत अच्छी तरह से बाहर काम किया है:

ग्रंथों की .. हालांकि मैं अपने उपयोगकर्ताओं बनाने के लिए नहीं करना चाहता था कोई वास्तविक समय जनसंख्या सर्वर या तो ओवरलोड। साइट लोड काफी धीमी नहीं है और बंडल (जिसमें ~ 200 कुंजी/प्रति बंडल मूल्य) लोड के दौरान ~ 10 केबी पर मापते हैं।

Answer 2

आपको पहले अपने विकास चरण अपने यूआई को पूरा करने और अपनी परियोजना का निर्माण या I18s को ext-all.js फ़ाइल का उपयोग करना चाहिए का अनुवाद

Answer 3

देखें: http://docs.sencha.com/ext-js/4-0/#!/example/locale/multi-lang.html उपयुक्त भाषा संशोधक लिपि (/ ext/स्थानीय/ext-lang-xxx.js) को लोड होने के बाद लोड किया जाना चाहिए (गतिशील रूप से लोड कक्षाओं सहित)। उपर्युक्त उदाहरण में, मैंने शायद Ext.Loader.loadScriptFile का उपयोग किया होगा लेकिन वे सीधे डाउनलोड किए गए एक को eval। एकमात्र अन्य बात यह है कि आपकी कक्षाओं को अलग-अलग भाषाओं में बनाया जाना चाहिए या आप चर का उपयोग करें और लैंग-विशिष्ट चर फ़ाइल का संदर्भ लें।

आप भी लोडर रास्तों में एक चर इस्तेमाल कर सकते हैं:

var lang='fr'; 
Loader 
{ 
paths: 
{ 
    'Ext': '.', 
    'My': './src/my_own_folder'+'/'+lang 
} 

Answer 4

वर्तमान में कोई समाधान तो मैं अपने ही हैक/Ext.Loader पर ऐड-ऑन बनाने का फैसला किया है। मैंने गिटहब पर कोड अपलोड किया: https://github.com/TigrouMeow/extjs-locale-loader। यह वही है जो मुझे चाहिए और मुझे उम्मीद है कि इससे दूसरों की भी मदद मिलेगी!