Skip to content

Instantly share code, notes, and snippets.

@rattanchauhan rattanchauhan/I18n.js
Last active Nov 27, 2017

Embed
What would you like to do?
Extjs I18n (Keys & Translations loaded from remote endpoint)
Ext.define('App.common.locale.I18n', {
extend: 'Ext.Base',
singleton: true,
alternateClassName: ['I18n'],
requires: [
'App.store.locale.Translations', // in memory store to keep translations
'App.api.config.Endpoints', // config file with endpoint information
],
initLocale: function (language) {
// STEP 1. find which language to load
var pageParameters = Ext.urlDecode(window.location.search.substring(1));
if (language) {
this.locale = language;
localStorage.setItem('userLanguage', language);
} else if (pageParameters.lang && (pageParameters.lang === 'en' || pageParameters.lang === 'de' || pageParameters.lang === 'fr' || pageParameters.lang === 'it')) {
// check in url
localStorage.setItem('userLanguage', pageParameters.lang);
this.locale = pageParameters.lang;
} else {
// check in localStorage
var storedLocale = localStorage.getItem('userLanguage');
this.locale = storedLocale ? storedLocale : 'en';
}
// STEP 2. Load translations
// initialize translations from remote endpoint based on the language
var translationStore = Ext.getStore('Translations');
translationStore = translationStore || Ext.create('App.store.locale.Translations');
var translations = this.doGetSynchronous(this.locale);
translationStore.setProxy({ type: "memory", data: translations }).load();
this.initialized = true;
},
get: function (key) {
if (!this.initialized) {
this.initLocale();
}
if (!key) {
return '';
}
var store = Ext.getStore('Translations'),
record = null;
record = store.findRecord('key', key);
if (record) {
return record.get('value');
} else {
console.warn('No translation found for key ' + key);
return key;
}
},
locale: null,
initialized: false,
changeLanguage: function (language) {
var newURL = window.location.pathname;
// clean URL
window.history.pushState("App", "App", newURL);
this.initLocale(language);
window.location.reload();
},
doGetSynchronous: function (language) {
var response = null;
Ext.Ajax.request({
url: Endpoints.getUrl(Endpoints.urls.translations) + '/' + language,
async: false,
success: function (data) {
var data = data || {};
response = Ext.decode(data.responseText, true);
},
failure: function (error) {
response = error;
}
});
return response;
}
});
Ext.define('App.view.authentication.Login', {
extend: 'Ext.container.Container',
xtype: 'login-view',
items : [
{
xtype: 'formpanel',
title : I18n.get('Login.Title.Text')
}
]
});
[
{
"lang": "en",
"key": "Login.Title.Text",
"value" : "Welcome to your Account"
}
]
Ext.define('App.store.locale.Translations', {
extend: 'Ext.data.Store',
alias: 'store.translations',
storeId : 'Translations',
fields: [ 'lang', 'key', 'value'],
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.