Ext.js - Bản địa hóa
Tốt nhất là giao tiếp với người dùng bằng ngôn ngữ mà họ hiểu và yêu thích. Gói bản địa hóa Extjs hỗ trợ hơn 40 ngôn ngữ như Đức, Pháp, Hàn Quốc, Trung Quốc, v.v. Rất đơn giản để triển khai ngôn ngữ trong ExtJs. Bạn sẽ tìm thấy tất cả các tệp ngôn ngữ được gói trong thư mục ghi đè của gói ngôn ngữ mở rộng. Các tệp ngôn ngữ chỉ ghi đè yêu cầu Ext JS thay thế các giá trị tiếng Anh mặc định của các thành phần nhất định.
Chương trình sau đây là hiển thị tháng ở các ngôn ngữ khác nhau để xem hiệu quả. Hãy thử chương trình sau.
<!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>Chương trình trên sẽ cho kết quả như sau
Để sử dụng ngôn ngữ khác ngoài tiếng Anh, chúng tôi cần thêm tệp ngôn ngữ cụ thể vào chương trình của mình. Ở đây chúng tôi đang sử dụng https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.js cho tiếng Pháp. Bạn có thể sử dụng ngôn ngữ khác nhau cho các ngôn ngữ khác nhau, chẳng hạn như https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js cho tiếng Hàn, v.v.
Chương trình sau đây là hiển thị bộ chọn ngày bằng ngôn ngữ Hàn Quốc để xem hiệu quả. Hãy thử chương trình sau.
<!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>Chương trình trên sẽ tạo ra kết quả sau:
Bảng sau liệt kê một số ngôn ngữ có sẵn trong ExtJS và URL ngôn ngữ của tệp chính sẽ được thay đổi.
| Ngôn ngữ | Ngôn ngữ | URL ngôn ngữ |
|---|---|---|
| ko | Hàn Quốc | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js |
| fr | người Pháp | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js |
| es | người Tây Ban Nha | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js |
| ja | tiếng Nhật | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js |
| nó | người Ý | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js |
| ru | tiếng Nga | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js |
| zh_CN | Đơn giản hóa tiếng Trung | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js |