-
Notifications
You must be signed in to change notification settings - Fork 2
Localization
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 = [
"일",
"월",
"화",
"수",
"목",
"금",
"토"
];
다국어처리를 지원하는 방법으로는 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를 만들어야 한다. 아래로 To create the combobox that will contain all the possible language selections we first need to create an array store in the init function like so.
var store = Ext.create('Ext.data.ArrayStore', { fields: ['code', 'language'], data : Ext.local.languages //from languages.js }); This is a very simple store that contains the two fields that correspond to the two values for each record in the languages.js file. As we gave it a namespace, we can refer to it as Ext.local.languages. You can type this in your browser's console to see what it consists of.
Now create the combobox itself, again, within the init function: