Localization

Ext's Localization Files

ExtJS 4.x의 압축파일 안에는 locale이라는 폴더가있다. 해당 폴더안에 ext-lang-ko.js가 있는대 파일을 보면 어떻게 한글화가 되는지 알 수가 있다.

Ext.Date.monthNames = [
        "1월",
        "2월",
        "3월",
        "4월",
        "5월",
        "6월",
        "7월",
        "8월",
        "9월",
        "10월",
        "11월",
        "12월"
    ];

    Ext.Date.dayNames = [
        "일",
        "월",
        "화",
        "수",    
        "목",
        "금",
        "토"
    ];

Utilizing Localization

다국어처리를 지원하는 방법으로는 2가지 방법이 있겠다. 하나는 정적으로 적용하는 것이고 하나는 동적으로 적용하는 것이다. 본 문서에서는 동적으로 지원하는 방법에 대하여 기술하겠다.

아래와 같이 기본적인 HTML코드를 작성한다.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Localization example</title>
    <!-- Ext Library Files -->
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
    <script src="ext/ext-all-debug.js"></script>
    <!-- App Scripts -->
    <script src="languages.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div id="languages"></div>
    <div id="datefield"></div>
</body>
</html>

우리는 두개의 자바스크립트 파일이 있다. 하나는 언어목록을 가지고 있는 파일이고 다른하나는 어플리케이션 파일이다. 또한 두개의 div 태그가 있는대 첫번째는 사용자가 선택할 언어 콤보박스이고 두번째는 data picker용이다.

이제 languages.js를 만들어 보자.

Ext.namespace('Ext.local');

Ext.local.languages = [
    ['af', 'Afrikaans'],
    ['bg', 'Bulgarian'],
    ['ca', 'Catalonian'],
    ['cs', 'Czech'],
    ['da', 'Danish'],
    ['de', 'German'],
    ['el_GR', 'Greek'],
    ['en_GB', 'English (UK)'],
    ['en', 'English'],
    ['es', 'Spanish/Latin American'],
    ['fa', 'Farsi (Persian)'],
    ['fi', 'Finnish'],
    ['fr_CA', 'French (Canadian)'],
    ['fr', 'French (France)'],
    ['gr', 'Greek (Old Version)'],
    ['he', 'Hebrew'],
    ['hr', 'Croatian'],
    ['hu', 'Hungarian'],
    ['id', 'Indonesian'],
    ['it', 'Italian'],
    ['ja', 'Japanese'],
    ['ko', 'Korean'],
    ['lt', 'Lithuanian'],
    ['lv', 'Latvian'],
    ['mk', 'Macedonian'],
    ['nl', 'Dutch'],
    ['no_NB', 'Norwegian Bokmål'],
    ['no_NN', 'Norwegian Nynorsk'],
    ['pl', 'Polish'],
    ['pt_BR', 'Portuguese/Brazil'],
    ['pt_PT', 'Portuguese/Portugal'],
    ['ro', 'Romanian'],
    ['ru', 'Russian'],
    ['sk', 'Slovak'],
    ['sl', 'Slovenian'],
    ['sr_RS', 'Serbian Cyrillic'],
    ['sr', 'Serbian Latin'],
    ['sv_SE', 'Swedish'],
    ['th', 'Thai'],
    ['tr', 'Turkish'],
    ['ukr', 'Ukrainian'],
    ['vn', 'Vietnamese'],
    ['zh_CN', 'Simplified Chinese'],
    ['zh_TW', 'Traditional Chinese']
];

locale폴더안에 제공된 언어들에 대한 리스트를 모두 위의 파일에 넣었다.

Next, we'll start building the application itself. Using the module pattern, we will have four methods: init, onSuccess, onFailure and setup.

다음으로 app.js를 모듈페턴을 이용하여 MultiLangDemo 만들어보겠다.

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'ext/examples/ux/');
Ext.require([
    'Ext.data.*',
    'Ext.tip.QuickTipManager',
    'Ext.form.*',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.grid.Panel'
]);

Ext.onReady(function() {

    MultiLangDemo = (function() {
        return {
            init: function() {

            },
            onSuccess: function() {

            },
            onFailure: function() {

            },
            setup: function() {

            }
        };
    })();

    MultiLangDemo.init();
});

선택 가능한 언어목록을 콤보박스에 담기위해선 먼저 array store를 만들어야 한다.

var store = Ext.create('Ext.data.ArrayStore', {
    fields: ['code', 'language'],
    data  : Ext.local.languages //from languages.js
});

위에서 우리가 namespace로 지정하였듯이 해당 store의 데이타를 Ext.local.languages로 지정하고 두 필드로 코드와 언어를 지정하였다. 브라우저에서 Ext.local.languages를 콘솔에 찍어보면 어떤 값이 들어있는지 알 수 있다.

이제 init 함수 안에 combobox를 만들어 보자.

var combo = Ext.create('Ext.form.field.ComboBox', {
    renderTo: 'languages',
    store: store,
    displayField: 'language',
    queryMode: 'local',
    emptyText: 'Select a language...',
    hideLabel: true,
    listeners: {
        select: {
            fn: function(cb, records) {
                var record = records[0];
                window.location.search = Ext.urlEncode({"lang":record.get("code")});
            },
            scope: this
        }
    }
});

브라우저를 리플레쉬 하면 아래와 같은 그림을 볼 수 있다.

After the creation of the combobox, we're going to check to see if any language has been previously selected and act accordingly by checking the URL with Ext's urlDecode function.

var params = Ext.urlDecode(window.location.search.substring(1));

if (params.lang) {
    var url = Ext.util.Format.format('ext/locale/ext-lang-{0}.js', params.lang);

   Ext.Ajax.request({
        url: url,
        success: this.onSuccess,
        failure: this.onFailure,
        scope: this
    });

// check if there's really a language with passed code
var record = store.findRecord('code', params.lang, null, null, null, true);
// if language was found in store, assign it as current value in combobox

    if (record) {
        combo.setValue(record.data.language);
    }
} else {
    // no language found, default to english
    this.setup();
}

Ext.tip.QuickTipManager.init();