开发者

Internationalization in Extjs Without exporting project?

开发者 https://www.devze.com 2023-03-09 08:55 出处:网络
I am developing a project using ExtJS 3.2.1 for UI design. I want to implement Internationalization (i18n) in the same. (without exporting the project) ?

I am developing a project using ExtJS 3.2.1 for UI design. I want to implement Internationalization (i18n) in the same. (without exporting the project) ?

I have referred the following links :

http://www.sencha.com/learn/Tutorial:Localizing_Ext

http://extjstutorial.org/e开发者_JAVA技巧xtjs/meertalig-i18n-met-extjs-en-codeigniter/

Can any one suggest some step-by-step tutorail/ebook for further reference?

Thanks!


In addition to localizing Ext's built-in strings, as per your link, we have a global function that returns a localized string, and call that everywhere we want to display a string. We also store the user's currently selected language in a variable and a cookie.

I would suggest from our experience that you probably want to store the localized strings on your server in a DB and bring them down via an Ajax call on load. This allows you to manage these strings without deploying code changes.

When the user changes the language, we set the language cookie and reload the whole browser window.

// global shortcut function for retrieving a localized string
function i18n(key, arrInsertValues) {
    return Local.getLocalizedString(key, Local.languageCode, arrInsertValues);
}

// "Local" is a simple "static" object containing methods and localization strings
Local = {

    // Default locale code - set based on cookie at the bottom of this script
    languageCode: 'en',
    languageCodeDefault: 'en',
    charset: 'utf-8',

    languages: [
        ['en', 'English', 'utf-8'],
        ['ja', '日本語', 'utf-8']
    ],

    getLocalizedString: function(key, languageCode, arrInsertValues) {
        if (!this.localizedStrings[key]) {
            // return empty string if key is undefined
            return '';
        }
        if (!this.localizedStrings[key][languageCode]) {
            // return default language string or empty string if the string for the specified language is undefined
            return this.formatString(this.localizedStrings[key][this.lcDefault] || '', arrInsertValues);
        }
        // give 'em what they asked for
        return (this.formatString(this.localizedStrings[key][languageCode], arrInsertValues));
    },


    // returns a localized string formatted to replace values {0},{1} etc with values from the passed array
    formatString: function(string, arrInsertValues) {
        var formattedString = string;
        if (arrInsertValues && arrInsertValues.constructor.toString().indexOf("Array") != -1) {
            for (var i = 0; i < arrInsertValues.length; i++) {
                formattedString = formattedString.replace('{' + i + '}', arrInsertValues[i]);
            }
        }
        return formattedString;
    },

    localizedStrings: {
        tEN: { en: 'Eng', ja: '英語' },
        tJPN: { en: 'Jpn', ja: '日本語' },            
        tYes: { en: 'Yes', ja: 'はい' },
        tNo: { en: 'No', ja: 'いいえ' },    
        tAnd: { en: 'and', ja: 'と' },
        tOr: { en: 'or', ja: 'or' },    
        tDateFormat : { en: 'Y\/m\/d - g\:iA', ja: 'G\:i - Y年m月d日' },    
        tGoodMorning: { en: 'Good morning, {0}.', ja: '{0}様、おはようございます。' }
    }
}

// this is the first script to run, so we can set default language here based on cookie
var cookie = new Ext.state.CookieProvider();
Local.languageCode = cookie.get('languageCode') ? cookie.get('languageCode') : Local.languageCodeDefault;
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号