Sencha에서 일본어와 영어로의 전환.

이 글은 Sencha Advent Calendar 2012 16일째 되는 글이다.
선배의 지지를 받더라도 조금 더 노력해야 한다!
이번에는 Sencha/Ext JS의 언어 환경을 써 보겠습니다.

Sencha의 locale

Sencha 시리즈에서 언어의 변환은 언어마다 준비된locale 파일을 통해 이루어진다.
주요 JavaScript를 읽은 후 locale를 읽으면 JavaScript를 사용하여 각 단계의 언어 속성(태그 등)을 위에 씁니다.
index.html

<script type="text/javascript" charset="utf-8" src="extjs/ext-all.js"></script>
<script type="text/javascript" charset="utf-8" src="extjs/locale/ext-lang-ja.js"></script>

위의 HTML에서 지정한 ext-lang-ja를 사용합니다.ext-lang-en.js로 바꾸면 영어, ext-lang-fr.js로 바꾸면 프랑스어로 바뀐다.
앱을 만들 때 다양한 언어에 대응하는 것이 큰 도움이 됐다.센카는 프레임 쪽에서 이걸 준비하는 상황입니다.
실제 행동에서 다음과 같은 언어 전환 견본이 이해하기 쉬운가.
Multi-Lang Excample

움직이고 싶어!

방금 샘플에서 전환할 때마다 페이지를 다시 불러옵니다.
라벨을 바꾸는 등 DOM 트리에 생성된 것들이 번거롭기 때문일 것으로 추정된다.
학급 정의는 다시 쓰지만 실례까지는 귀찮지 않다.라고 적었다.
그래도 역동적으로 전환하고 싶군요...
그리고 예전@kotsutsumi선생님이 하신 것 같아서 복습을 해 봤어요.

단추를 누르면locale 스크립트를 불러옵니다

알림(refresh 처리)

이 모든 구성 요소에 불러왔습니다
이런 흐름.
마운트 알림에 관해서는 각 구성 요소가 이벤트를 보는 것이 좋지만, 샘플이기 때문에 좋아하지 않습니다.

먼저

위의 컨텐트를 적용할 샘플을 준비한 다음 API 문서의 샘플을 평소와 같이 복사합니다.
이번에는 데이트필드에서 흰 깃털 화살을 쏘았다.Ext.form.field.Date

Ext.Application으로 MVC 형태로 제작하면 다음과 같은 느낌이 든다.
sample-app.js

Ext.application({
    name      : 'MyApp',
    appFolder : 'MyApp',
    launch: function() {
        Ext.create('MyApp.view.FormPanel').render(Ext.getBody());
    }
});

sample-view.js

Ext.define('MyApp.view.FormPanel', {
    extend   : 'Ext.form.Panel',
    alias    : 'widget.myapp-form',
    width       : 300,
    bodyPadding : 10,
    frame       : true,
    items : [{
        xtype   : 'datefield',
        anchor  : '100%',
        name    : 'from_date',
        fieldLabel: 'From',
        maxValue: new Date()
    }, {
        xtype   : 'datefield',
        anchor  : '100%',
        name    : 'to_date',
        fieldLabel: 'To',
        value   : new Date()
    }]
});

locale 로드 처리 추가

언어 전환을 시작하기 위해 단추와locale 파일의 불러오기 처리를 추가합니다.
영어(기본값) 상태입니다.

view/FormPanel.js

Ext.define('MyApp.view.FormPanel', {
    extend   : 'Ext.form.Panel',
    alias    : 'widget.myapp-form',
    requires : [
       'MyApp.view.ToDateField',
       'MyApp.view.FromDateField'
    ],
    width       : 300,
    bodyPadding : 10,
    frame       : true,
    items : [{
        xtype   : 'fromdatefield',
        anchor  : '100%',
        name    : 'from_date',
        maxValue: new Date()
    }, {
        xtype   : 'todatefield',
        anchor  : '100%',
        name    : 'to_date',
        value   : new Date()
    }],
    buttons : [{
        text : 'English',
        type : 'en'
    }, {
        text : 'Japanese',
        type : 'ja'
    }]
});

controller/Main.js

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',
    views : ['FormPanel'],
    refs  : [{
        ref     : 'form',
        selector: 'myapp-form'
    }],
    init : function() {
        var me = this;
        me.control({
            'myapp-form button': {
                click: function(btn) {
                    me.getScript(btn.type);
                }
            }
        });
    },
    getScript: function(lang) {
        var me = this;
        Ext.Ajax.request({
            url : 'extjs/locale/ext-lang-'+lang+'.js',
            success: function(response){
                new Function(response.responseText)();
            }
        });
        Ext.Ajax.request({
            url : 'MyApp/locale/lang-'+lang+'.js',
            success: function(response){
                new Function(response.responseText)();
                //ここはイベント化したほうが良いところ
                me.getForm().items.each(function(item) {
                    item.refreshLang();
                });
            }
        });
    }
});

내 앱.view.ToDateField, From DateField는 다시 로드된 Refresh 처리(refreshLang 함수)가 있는 Ext.form입니다.field.Date의 확장.
locale 파일은 다음과 같이 준비되어 있습니다.
이번엔 라벨밖에 없어요.본가와 마찬가지로 오버라이드에 쓰여 있다.
locale/lang-ja.js

Ext.onReady(function() {
    Ext.define("MyApp.locale.ja.view.ToDateField", {
        override: "MyApp.view.ToDateField",
        fieldLabel : "トゥー"
    });
    Ext.define("MyApp.locale.ja.view.FromDateField", {
        override: "MyApp.view.FromDateField",
        fieldLabel : "フロム"
    });
});

이렇게 준비하면 "Japanese"버튼을 눌렀을 때 ↓처럼 언어를 전환한다.
English 버튼을 누르면 원래 상태로 돌아갑니다.

눈여겨본 일

이번 샘플을 제작한 결과 다트피커가 DOM을 반복적으로 사용하고 있었다.
따라서 위의refresh 처리에서 삭제하지 않으면 언어를 덮어쓸 수 없습니다.

Ext JS 본사의 locale 파일에는 두 가지 속성이 부족합니다.
(이번 ext-lang-en.js의 DatePicker 주변에 없는 녀석들)
이거 누구한테 말해야 되지??

샘플 소스를 밑에 놓았다.
LangSample
다음엔 없어...위기!?(^_^;)
누구세요~w
Sencha Advent Calendar 2012