Ext.js-현지화

사용자가 이해하고 선호하는 언어로 소통하는 것이 항상 최선입니다. Extjs 지역화 패키지는 독일어, 프랑스어, 한국어, 중국어 등 40 개 이상의 언어를 지원합니다. ExtJ에서 로케일을 구현하는 것은 매우 간단합니다. ext-locale 패키지의 재정의 폴더에서 번들 로케일 파일을 모두 찾을 수 있습니다. 로케일 파일은 Ext JS에게 특정 구성 요소의 기본 영어 값을 대체하도록 지시하는 재정의 일뿐입니다.

다음 프로그램은 효과를보기 위해 다른 로케일로 월을 표시하는 것입니다. 다음 프로그램을 시도하십시오.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
            var ds = Ext.create('Ext.data.Store', {
               fields: ['month'],
               remoteSort: true,
               pageSize: 6,
               
               proxy: {
                  type: 'memory',
                  enablePaging: true,
                  data: monthArray,
                  reader: {type: 'array'}
               }
            });
            Ext.create('Ext.grid.Panel', {
               renderTo: 'grid',
               id : 'gridId',
               width: 600,
               height: 200,
               title:'Month Browser',
               
               columns:[{
                  text: 'Month of the year',
                  dataIndex: 'month',
                  width: 300
               }],
               store: ds,
               bbar: Ext.create('Ext.toolbar.Paging', {
                  pageSize: 6,
                  store: ds,
                  displayInfo: true
               })
            }); 
            Ext.getCmp('gridId').getStore().load();
         });
      </script>
   </head>
   
   <body>
      <div id = "grid" />
   </body>
</html>

위의 프로그램은 다음 결과를 생성합니다

영어 이외의 다른 로케일을 사용하려면 프로그램에 로케일 특정 파일을 추가해야합니다. 여기에서는 프랑스어 용 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.js를 사용하고 있습니다. 한국어의 경우 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js와 같이 다른 언어에 대해 다른 로케일을 사용할 수 있습니다.

다음 프로그램은 효과를보기 위해 한국어 로케일로 날짜 선택기를 표시하는 것입니다. 다음 프로그램을 시도하십시오.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.picker.Date', {
               renderTo: 'datePicker'
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "datePicker" />
   </body>
</html>

위의 프로그램은 다음 결과를 생성합니다-

다음 표에는 ExtJS에서 사용할 수있는 몇 가지 로케일과 변경할 기본 파일 로케일 URL이 나열되어 있습니다.

장소 언어 로케일 URL
ko 한국어 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js
fr 프랑스 국민 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js
es 스페인의 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js
ja 일본어 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js
그것 이탈리아 사람 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js
ru 러시아인 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js
zh_CN 중국어 간체 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js