2012-03-06 3 views
0
내가 엽차에 지역화를 사용할 필요가

1.1.1엽차는 현지화

Locale = { 
title: 'hello' 

}

//app-fr.js

Locale = { 
title: 'salut' 
을 //app-en.js

}

내 패널.

var panel = new Ext.Panel({fullscreen: true, html: 'Text to locate'}); 

어떻게 언어를 감지하고 변경할 수 있습니까?

미리 감사드립니다.

답변

0

로케일에 따라 적절한 자바 스크립트 파일을로드하십시오. 더 좋은 아이디어를 위해 this question 또는 this question을보십시오.

var panel = new Ext.Panel({ 
    fullscreen: true, 
    html: Locale.title 
}); 
0

당신은 재정의를 사용하여 뷰를 지역화하려는 :

은 그럼 그냥 코드이 방법을 사용합니다. 자세한 내용은이 사이트를 살펴 보자 : http://www.ladysign-apps.com/developer/how-to-localize-your-sencha-touch-applications/

Ext.define('MyApp.view.Main', { 
    extend: 'Ext.tab.Panel', 
    xtype: 'main', 
    requires: [ 
     'Ext.TitleBar', 
     'Ext.Video' 
    ], 
    TAB_ONE_TITLE_SHORT: 'Hello', 
    TAB_ONE_TITLE: 'Hello Sencha Touch 2', 
    TAB_ONE_HTML: 'This app was written in English.', 
    config: { 
     tabBarPosition: 'bottom', 
    }, 
    initialize: function() { 

     var items = [{ 
       title: this.TAB_ONE_TITLE_SHORT, 
       iconCls: 'home', 

       styleHtmlContent: true, 
       scrollable: true, 

       items: { 
        docked: 'top', 
        xtype: 'titlebar', 
        title: this.TAB_ONE_TITLE 
       }, 

       html: this.TAB_ONE_HTML 
      } 
     ]; 

     this.add(items); 
     this.callParent(); 
    } 
}); 

그리고 재정

Ext.define('MyApp.utils.nl.Main', { 
    override: 'MyApp.view.Main', 

    TAB_ONE_TITLE_SHORT: 'Hallo', 
    TAB_ONE_TITLE: 'Hallo Sencha Touch 2', 
    TAB_ONE_HTML: 'Deze app is geschreven in het Nederlands.', 
}); 

당신은 수를 대안으로, 또한 프레임 워크의 로더 클래스를 사용하여 기존 파일을 포함한다. 응용 프로그램이 실행되기 전에 호출됩니다

가 app.json

"js": [ 
    { 
     "path": "../touch/sencha-touch.js", 
     "x-bootstrap": true 
    }, 
    **{ 
     "path": "resources/translations/resources_nl.js", 
     "remote": true 
    }, 
    { 
     "path": "resources/translations/resources_de.js", 
     "remote": true 
    }, 
    { 
     "path": "resources/translations/resources_en.js", 
     "remote": true 
    }, 
    { 
     "path": "resources/translations/resources_fr.js", 
     "remote": true 
    },** 
    { 
     "path": "app.js", 
     "bundle": true, 
     "remote": true 
     /* Indicates that all class dependencies are concatenated into this file when build */ 
    } 
], 

내 사용자가 언어를 선택할 수 있습니다 귀하의 리소스 파일을 추가, 내가 저장 로컬 스토리지에 그. 내 후퇴는 영어입니다.

var Resources = Resources || {}; 

Resources.EN = { 
    texts: { 
     generic: { 
      loading: "Load...", 
      online: "Online", 
      offline: "Offline", 
      login: "Log in", 
      logoff: "Log out", 
      ... 
     }, 
     list: { 
      emptyText: "No elements have been found.", 
      ... 
     }, 
     map: { 
      noMarkers: "There is no data to display on the map.", 
      ... 
     }, 
     settings: { 
      scaleSize: "Scale screen?", 
      ... 
     }, 
     document: { 
      openingDocumentFailed: "Opening document failed. Do you have an application that can open this type of document?", 
      ... 
     } 
    } 
} 
다음은 언어 파일의 예 (자원/번역/resources_en.js는) 내가 Ext.Loader 클래스를 사용하여 내 app.js 필요한 언어 파일 여기

/* 
This file is generated and updated by Sencha Cmd. You can edit this file as 
needed for your application, but these edits will have to be merged by 
Sencha Cmd when it performs code generation tasks such as generating new 
models, controllers or views and when running "sencha app upgrade". 

Ideally changes to this file would be limited and most work would be done 
in other places (such as Controllers). If Sencha Cmd cannot merge your 
changes and its generated code, it will produce a "merge conflict" that you 
will need to resolve manually. 
*/ 

Ext.Loader.setConfig({ 
    enabled: true, 
    disableCaching: false 
}); 

**Ext.Loader.syncRequire(['resources/translations/*'], function() { 
    Resources = Resources[localStorage.getItem('language') || 'EN'].texts; 
});** 

Ext.application({ 
    name: 'MyApp', 

    requires: [], 

    models: [], 

    stores: [], 

    views: [], 

    controllers: [], 

    launch: function() { 
     ... 
    }, 

    onUpdated: function() { 
     Ext.Msg.confirm(
      "Application Update", 
      "This application has just successfully been updated to the latest version. Reload now?", 
      function(buttonId) { 
       if (buttonId === 'yes') { 
        window.location.reload(); 
       } 
      } 
     ); 
    } 
}); 

를로드입니다

이 솔루션의 장점은보기에서 선언적 인 다국어 텍스트를 사용할 수 있다는 것입니다.

Ext.create('Ext.Container', { 
    renderTo: Ext.getBody(), 
    items : [ 
     { 
      xtype: 'button', 
      text : **Resources.generic.cancel** 
     } 
    ] 
});