Bộ điều khiển được sử dụng với MVC trong ứng dụng Extjs

Question

Tôi khá mới với Extjs và sau khi thực hiện một số hướng dẫn và blog trên mẫu Extjs MVC, tôi không rõ ràng về cách ứng dụng phức tạp (nói điều hướng trang 10 - 15) được xây dựng trên nền tảng extjs.

Từ diễn đàn sencha, đề xuất rằng tất cả các trình điều khiển cần phải được xác định trước trong app.js (vì bộ điều khiển tải trước khi quay tay sẽ không phải là lần truy cập hiệu suất so với giao diện người dùng tải DOM. bởi một người quản lý diễn đàn sencha).

Đi bằng phương pháp trên, tôi có vài câu hỏi:

• khi nào một bộ điều khiển được khởi tạo? Tất cả đều được tải và instatiated khi tải ứng dụng và tiếp tục nghe các sự kiện được xác định trong chúng cho đến khi đời của ứng dụng?

• Việc xác định Mô hình [], Lưu trữ [] và Chế độ xem [] trong lớp điều khiển có nghĩa là gì? Khi nào chúng được tải và khởi tạo?

• Cách điều hướng các trang hoạt động với bộ điều khiển? Nếu điều hướng đến một trang mới chỉ dịch sang getParentContainer.remove (componentX) và getParentContainer.add (componentY), thì mục đích của bộ điều khiển chỉ là một tệp để xử lý các sự kiện?

• Có phạm vi nào (instantiation> destruction) với bộ điều khiển không? Nếu không làm thế nào có thể nhiều trường hợp được tạo ra và bị phá hủy để hành động của tôi không được lắng nghe bởi trường hợp sai (tôi đã thấy một số blog đề cập đến bộ điều khiển chủ yếu là singleton)?

Ai đó có thể vui lòng bỏ một chút ánh sáng về điều này? Bất kỳ ví dụ/minh họa nào sẽ giúp ích rất nhiều.

Cảm ơn

Answer 1

Trong các lớp Ext JS, Ext.app.Controller (không có trong hộp) được khởi tạo với khởi tạo ứng dụng. Trong thực tế, init() của bộ điều khiển được gọi trước khi khởi chạy() của chính ứng dụng. Vì vậy, có, bộ điều khiển là "lifers", lắng nghe từ thời điểm ứng dụng bắt đầu trong suốt vòng đời của ứng dụng. Có là cách tạo và hủy điều khiển động, nhưng điều này sẽ yêu cầu triển khai tùy chỉnh.

Trong Ext JS 5, tuy nhiên, khái niệm về ViewController đã được giới thiệu. Nó mở rộng cùng một cơ sở (Ext.app.BaseController) như Ext.app.Controller, nhưng không giống như ở trên, ViewController được tạo ra và bị phá hủy cùng với thể hiện khung nhìn mà nó bị ràng buộc. Điều này được xử lý tự động bởi khung công tác - không cần thực hiện tùy chỉnh để làm việc đó.

Về mô hình: [], cửa hàng: [] và chế độ xem: [], về cơ bản chúng tôi yêu cầu() đối với bộ điều khiển, hướng dẫn nó để đảm bảo rằng các lớp này được tải. Các quy ước chỉ đơn giản là cách viết tắt của yêu cầu các lớp này từ các không gian tên cụ thể của chúng (ví dụ: AppName.view, AppName.store, v.v.). Trong trường hợp quan điểm và các cửa hàng, quy ước này cũng sẽ tạo ra các getters cho các lớp được yêu cầu.

Về điều hướng, tùy thuộc vào bạn. Có một số cách bạn có thể tạo ứng dụng Ext JS của mình. Bạn có thể làm ứng dụng "một trang", nơi điều hướng có thể giống với những gì bạn đã đề cập khá chặt chẽ (rất nhiều của tôi). Bạn cũng có thể tạo các ứng dụng nhiều trang có thể mang lại cảm giác trang-truyền thống hơn của trang web, nhưng tận dụng mã và các lớp phổ biến cho mỗi trang, tùy thuộc vào nhu cầu của mỗi trang.

Cuối cùng, liên quan đến câu hỏi về xung đột người nghe, câu trả lời là "nó phụ thuộc". Nếu bạn đang sử dụng Ext JS 4, bạn chỉ có chỉ có bộ điều khiển "lifer", và do đó tránh va chạm trong người nghe là vấn đề cực kỳ nhận thức của bộ chọn mà bạn đang sử dụng trong listen() hoặc control() các phần và đảm bảo rằng bạn không sao chép người nghe (hoặc thông qua sao chép rõ ràng hoặc quá rộng của công cụ chọn) trừ khi đó là những gì bạn muốn làm. Tuy nhiên, với Ext JS 5, khái niệm ViewController nhiều hơn hoặc ít hơn sẽ loại bỏ mối quan tâm này khi miền "nghe" của ViewController bị ràng buộc với cá thể của khung nhìn mà nó bị ràng buộc.

Theo như ví dụ, tôi chắc chắn sẽ khuyên bạn bắt đầu với các tài liệu cho Ext JS 5:

http://docs.sencha.com/extjs/5.0/whats_new/5.0/whats_new.html

http://docs.sencha.com/extjs/5.0.1/

Các "Có gì mới" tài liệu có một số cuộc thảo luận Kiến trúc thực sự tuyệt vời mà đi sâu vào chi tiết của các khái niệm này nhiều hơn khả thi trên SO.