이 강좌전에 Getting Start Eui Framework 를 읽지 않으셨다면 필독하시기 바랍니다.

이 강좌의 결과를 확인하시려면 여기를 클릭하시면 샘플프로그램을 실행해 볼수 있습니다.

eui프레임웍은 다국어 및 메시지를 위한 처리가 적용되어 있습니다. 일반적인 다국어는 extjs가 사용하는 컴포넌트의 기본 메시지나 레이블을 의미하며 이러한 처리의 변경은 sdk내부의 여러 국가별 로케일 파일을 적용하여 해결합니다. eui프레임웍에서의 다국어는 Ajax통신을 통해 얻어온 메시지를 또는 레이블을 컴포넌트에 쉽게 적용할 수 있는 방법을 제시합니다.

또한 Ajax호출을 하지 않고 Config클래스를 override하여 재정의 할수 있습니다. 이번 강좌에서는 이러한 다국어 처리를 위한 방법을 소개합니다.

Step 1 : eui.Config클래스의 override

eui-sample/override/eui/Config.js파일을 열어보자.

Ext.define('Override.eui.Config', {
    override: 'eui.Config',
    localeUrl: 'resources/data/i18n.json',

    message: [
        {"MSG_ID": "행추가2", "MSG_LABEL": "신청일자를 입력해 주세요."}
    ]
});

위의 파일은 eui.Config클래스를 override하여 eui-sample앱에서 재정의한 것이다. localeUrl 은 서버사이드를 통해 메시지 또는 레이블을 제공받기 위한 설정이고 message 배열변수는 static 하게 파일에 직접 정의하는 경우이다.

message변수를 통해 알수 있지만 MSG_ID와 MSG_LABEL을 정의해주면 해당 MSG_ID를 컴포넌트 내부에서 '#{행추가2}' 이러한 형식으로 사용할 수 있게 된다.

탭패널에 그리드를 추가하고 그리드 title 요소에 "행추가2"라는 MSG_ID를 적용해 "신청일자를 입력해 주세요."를 출력해보자.

우선 샘플코드 중 그리드용 샘플클래스인 Eui.sample.view.grid.Basic 클래스를 app.js의 mainView로 설정하고 브라우저를 리로드하자.

Ext.application({
    name: 'Eui.sample',

    extend: 'Eui.sample.Application',
    requires: [
        'Eui.sample.view.main.Main'
    ],
    init: function () {
        eui.Config.initLocaleMessage();
    },

     mainView: 'Eui.sample.view.grid.Basic'
   // mainView: 'Eui.sample.view.main.Main'
});

http://localhost:1841/eui-sample를 브라우저에서 실행하면 아래와 같은 화면이 출력된다.

Alt text

이제 그리드 패널의 title요소를 설정해보자. 동시에 컬럼헤더의 text설정도 동일하게 적용해보자.

Ext.define('Eui.sample.view.grid.Basic', {
    extend: 'eui.grid.Panel',
    xtype: 'sample-basic-grid',

    title :'#{행추가2}',
    ....
    columns: [
        {
            text: '#{행추가2}',
            ...
        },
        {
            text: 'MSG_LABEL',
            flex: 1,
            dataIndex: 'MSG_LABEL',
            editor: {
                bind : "{messageRecord.MSG_LABEL}",
                xtype: 'textfield'

            }
        }
    ]    
});

결과를 확인하면 아래 그림처럼 우리가 원하던 메시지가 title과 text에 적용된 것을 확인할 수 있다. Alt text

이렇게 간단히 '#{메시지코드}' 라고 사용하면 원하는 메시지가 컴포넌트 내부에 적용되게 된다. 그러나 Eui.sample.view.grid.Basic 클래스는 eui.grid.Panel클래스를 확장했고 클래스 내부에 title이 변환되도록 설정되어 있기 때문이다. 만약 eui.grid.Panel클래스를 확장하지 않고 Ext.grid.Panel클래스를 확장하도록 Eui.sample.view.grid.Basic클래스를 변경하면 어떻게 될까?

Ext.define('Eui.sample.view.grid.Basic', {
    extend: 'Ext.grid.Panel',
    ...
});

title구성요소는 이전과 달리 메시지코드가 노출되고 그리드 컬럼헤더의 text 구성요소는 이전과 같이 유지가 되고 있다. Alt text

이렇게 되는 이유는 title구성요소에 대한 메시지설정이 eui.grid.Panel클래스 내부에 있어 확장을 Ext.grid.Panel로 변경하여 적용되지 않은 것이고 컬럼헤더의 text구성요소에 대한 메시지처리 설정은 eui패키지 내부의 override폴더의 Ext.grid.column.Column클래스에 설정되어 있기 때문에 그대로 유지 되는 것이다.

일반적으로 override는 모든 클래스에 원하는 코드를 적용하기 위해 사용한다.

Ext.define('eui.grid.Panel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.spgrid',
    ...
    localeProperties: ['title'],    // 메시지 처리설정.

    mixins: [
        'eui.mixin.Panel'
    ],
    ..
});

Ext.define('Override.grid.column.Column', {
    override: 'Ext.grid.column.Column',
    localeProperties: ['text'], // 메시지 처리설정.
    initComponent: function () {
        this.callParent(arguments);
    }
});

그렇다면 이러한 점을 이용해 Ext.grid.Panel클래스를 확장한 컴포넌트에도 메시지코드를 적용하도록 해보자.

우선 eui-sample/override폴더에 아래와 같이 폴더 및 파일을 만들고 코딩하자. 이 코드는 Ext.grid.Panel클래스를 override하고 localeProperties 구성요소를 설정한 것이다. 이 요소는 배열이고 title 이외에도 추가로 설정이 가능하게 되어 있다.

eui-sample
            /override
                    /grid/Panel.js
                         
Ext.define('Override.grid.Panel', {
    override: 'Ext.grid.Panel',
    localeProperties: ['title']
});

이제 다시 실행하면 아래 그림처럼 메시지 처리가 정상적으로 작동하는 것을 확인할 수 있을 것이다. Alt text

이러한 원리로 버튼 등 다른 컴포넌트에도 적용이 가능하다.