ExtJS MVC, tải động và i18n

Question

Tôi muốn dịch ứng dụng ExtJS của mình bằng các ngôn ngữ khác nhau. Vấn đề của tôi là tôi đang sử dụng khuôn khổ ExtJS MVC, và hầu hết các tệp JS của tôi được tải xuống tự động bởi chính khuôn khổ đó.

Giải pháp lý tưởng (mà tôi nghĩ đến) sẽ là có thêm tùy chọn trong Ext.Loader (hoặc trong Ext.app.Application) sẽ xác định ngôn ngữ để sử dụng và tùy thuộc vào điều này để tự động tải xuống tệp như "a.MyClass.fr.js" sau khi tải "a.MyClass.js" của tôi (có chứa Ext.apply, ghi đè tài nguyên chuỗi của tôi). Điều đó có lẽ không có sẵn trong khung công tác ExtJS vào lúc này.

Giải pháp thay thế tôi có thể thấy, là thực hiện một mẹo ở phía máy chủ. Đầu tiên, một cookie sẽ được tạo trên máy khách, để thiết lập ngôn ngữ. Về phía máy chủ, tôi có thể nắm bắt tất cả các yêu cầu đối với các tệp JS, sau đó nếu cookie được đặt (ví dụ: 'fr'), tôi sẽ kết hợp tệp JS được yêu cầu (MyClass.js) với người bạn i18n của nó (MyClass .fr.js) động trên máy chủ và trả lại kết quả. Điều đó sẽ hiệu quả, nhưng nó thực sự phức tạp vì nó ngụ ý những thứ khác (caching ...).

Có lẽ cách tốt nhất là để thực hiện các hành vi đầu tiên tôi đã mô tả trong khuôn khổ ExtJS bản thân mình ...

Bạn nghĩ gì? Tôi đang tìm một cách thực sự sạch sẽ và gọn gàng để làm điều đó! Cảm ơn :)

Answer 1

Gần đây tôi đã gặp khó khăn với cùng một vấn đề.

Tìm một cách sạch để làm điều này là một thách thức khá - hầu hết lựa chọn thay thế là một trong hai ..

1) Duplicate cơ sở mã của bạn mỗi địa phương (WTH)

2) Tải file cục bộ trọng mỗi bạn Các thành phần (Bảo trì địa ngục? Điều gì về những người dịch kém?)

3) Sử dụng/tạo một tệp tĩnh chứa các bản dịch và tham khảo nó (Tất cả ngôn ngữ được tải xuống? Bước bổ sung để tạo? Làm cách nào để giữ chúng trong đồng bộ ?)

Tôi cố gắng để tận dụng tốt nhất của tất cả các thế giới và kết thúc với một lớp tiện ích trách nhiệm:

1) tải các tập tin dịch ExtJS (mà về cơ bản áp dụng ghi đè các thành phần ExtJS cơ sở)

2) Nạp một tài nguyên thuộc tính cụ thể của miền địa phương (chỉ định miền địa phương nào cần tải) từ máy chủ.

3) Tạo mẫu chuỗi bằng phương thức translate() truy vấn kho lưu trữ (chứa gói thư từ máy chủ) và trả về bản dịch dựa trên giá trị của chuỗi.

Đây là ý chính của điều:

Bundle & mẫu:

localeStore.load({ 
    callback : function(records, operation, success) { 
     // Define translation function (NB! Must be defined before any components which want to use it.) 
     function translate() { 
      var record = localeStore.getById(this.valueOf()) ; 
      if(record === null) { 
       alert('Missing translation for: ' + this.valueOf()); // Key is not found in the corresponding messages_<locale>.properties file. 
       return this.valueOf(); // Return key name as placeholder 
      } else { 
       var value = record.get('value'); 
      } 
      return value; 
     } 

     String.prototype.translate = translate; 
     callback.call(); // call back to caller(app.js/Ext.Application), loading rest of application 
    } 
}); 

Như một ví dụ từ một cái nhìn:

this.copyButton = Ext.create('Ext.button.Button', { 
    disabled: true, 
    text: 'DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON'.translate(), 
    action: 'openCopyDialog' 
}); 

Bundle trên máy chủ (mesages_en.properties): DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON = Sao chép tệp e tc ..

Ưu điểm:

đang

• Không-om sòm, 'Your_key'.translate() giúp bạn dễ dàng đọc và nhận thức được rằng đây là một chuỗi cục bộ
• Không/ít bảo trì trên không (Giữ một tệp ghi đè cho từng ngôn ngữ? Jesus ..)
• Bạn chỉ tải ngôn ngữ bạn cần - không phải toàn bộ shabang.
• Nếu bạn thực sự muốn, bạn thậm chí có thể có bản dịch của riêng bạn cho các tệp miền địa phương ExtJS trong cùng một gói.
• Bạn có thể viết các bài kiểm tra đơn vị để đảm bảo rằng tất cả các gói chứa các phím tương tự, như vậy tránh dịch mồ côi sau

Nhược điểm:

• Synchronous - các cửa hàng phải được nạp trước khi bắt đầu ứng dụng chính của bạn. Tôi đã giải quyết điều này bằng cách thêm một cuộc gọi lại từ lớp tiện ích được gọi khi tất cả các văn bản đã được nạp.
• Không real-time dân số văn bản .. dù tôi không muốn làm cho người dùng của tôi quá tải máy chủ hoặc là: P

Cho đến nay phương pháp của tôi đã làm việc ra khá tốt cho các yêu cầu của tôi. Tải trang web không chậm hơn đáng kể và các gói (chứa ~ 200 khóa/giá trị cho mỗi nhóm) đo lường ở mức ~ 10kb khi tải.

Answer 2

Trước tiên, bạn nên hoàn thành giai đoạn phát triển và xây dựng dự án của bạn hoặc sử dụng tập tin ext-all.js để I18s dịch UI của bạn

Answer 3

see: http://docs.sencha.com/ext-js/4-0/#!/example/locale/multi-lang.html Kịch bản sửa đổi ngôn ngữ thích hợp (/ ext/local/ext-lang-xxx.js) cần được tải sau khi ext được tải (bao gồm các lớp được nạp động). Trong ví dụ trên, tôi có lẽ đã sử dụng Ext.Loader.loadScriptFile nhưng chúng đánh giá trực tiếp một tệp tải xuống. Điều duy nhất khác là các lớp của bạn cần phải được xây dựng bằng các ngôn ngữ khác nhau hoặc bạn chỉ sử dụng các biến và tham chiếu đến tệp biến lang cụ thể.

bạn cũng có thể sử dụng một biến trong các đường dẫn tải:

var lang='fr'; 
Loader 
{ 
paths: 
{ 
    'Ext': '.', 
    'My': './src/my_own_folder'+'/'+lang 
} 

Answer 4

Hiện nay chưa có giải pháp vì vậy tôi quyết định tạo ra Hack riêng tôi/addon trên Ext.Loader. Tôi đã tải lên mã trên GitHub: https://github.com/TigrouMeow/extjs-locale-loader. Đó là chính xác những gì tôi cần và tôi thực sự hy vọng nó cũng sẽ giúp người khác!