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 |