ExtJS MVC-dynamisches laden und i18n

Ich vor kurzem kämpfte mit dem gleichen problem.

Finden eine saubere Art und Weise zu tun, war schon eine Herausforderung - die meisten alternativen waren entweder..

1) kopieren Sie Ihre code-Basis, die pro Ort (WTH)

2) Download der lokalisierten Dateien überschreiben jede Ihrer Komponenten (Wartung Hölle? Was über die schlechten übersetzer?)

3) Verwenden/erzeugen eine statische Datei mit den übersetzungen und verweisen (Alle Sprachen heruntergeladen werden? Zusätzliche build-Schritt, ihn zu erzeugen? Wie halten Sie Sie in Sync?)

Habe ich versucht, die beste aller Welten, und endete mit eine utility-Klasse verantwortlich für:

1) Laden der ExtJS-übersetzung Dateien (die im Grunde Außerkraftsetzungen anwenden extjs Basis-Komponenten)

2) Laden eine locale-spezifische Eigenschaft resourcebundle (mit Angabe, welche locale zu laden) vom server.

3) Prototyping-String mit translate () - Methode Abfragen-den store geladen (mit der message-bundle vom server) und gibt die übersetzung basiert auf den Wert der Zeichenfolge.

Dies ist der Kern der Dinge:

Bundle & prototyping:

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

Als ein Beispiel aus einer Sicht:

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

Bundle auf dem server (mesages_en.Eigenschaften):
DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON=Datei Kopieren
etc..

Vorteile:

• No-fuss-code, "Your_key'.translate() macht es leicht zu Lesen und zu wissen, dass dies eine lokalisierte Zeichenfolge
• Keine/wenig Wartungsaufwand (Halten eine override-Datei für jedes Gebietsschema? Jesus..)
• Sie nur laden Sie das Gebietsschema, die Sie brauchen - nicht die ganze shabang.
• Wenn Sie wirklich wollen, Sie können sogar Ihre eigene übersetzung für das ExtJS locale-Dateien in der gleichen Bündel.
• Könnten Sie schreiben unit tests, um sicherzustellen, dass alle bundles enthalten die gleichen Schlüssel, so dass verwaiste übersetzungen später

Nachteile:

• Synchron - store geladen werden müssen, bevor Sie Ihre Haupt-app startet. Ich löste dies durch hinzufügen einer callback-aus der utility-Klasse, die aufgerufen wurde, wenn alle Texte geladen wurden.
• Kein real-time-Bevölkerung von Texten.. obwohl ich nicht möchte, dass meine Benutzer die überlastung der server entweder 😛

Bisher mein Ansatz ist bisher ziemlich gut für meine Anforderungen.
Site-Belastung ist nicht spürbar langsamer und die Bündel (mit ~200 Schlüssel/Werte-pro Bündel) zu Messen, bei ~10kb beim laden.

InformationsquelleAutor JaySee

Sollten Sie zuerst vervollständigen Sie Ihre Entwicklungsphase und erstellen Sie Ihr Projekt, oder verwenden Sie ext-all.js Datei I18s übersetzen der Benutzeroberfläche

InformationsquelleAutor PHPst