Last active
November 27, 2017 15:04
-
-
Save rattanchauhan/811e586a106aeeeab13589f90e5f4edf to your computer and use it in GitHub Desktop.
Extjs I18n (Keys & Translations loaded from remote endpoint)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Ext.define('App.view.authentication.Login', { | |
extend: 'Ext.container.Container', | |
xtype: 'login-view', | |
items : [ | |
{ | |
xtype: 'formpanel', | |
title : I18n.get('Login.Title.Text') | |
} | |
] | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"lang": "en", | |
"key": "Login.Title.Text", | |
"value" : "Welcome to your Account" | |
} | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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