Ứng dụng Extjs Gọi một ứng dụng Extjs khác

Question

sau khi tạo không gian làm việc bằng Sencha Cmd và tạo hai ứng dụng khác nhau, tôi chỉ muốn chạy ứng dụng đầu tiên và sau đó nhấp vào nút, ứng dụng thứ hai :) Giống như ứng dụng chính gọi một ứng dụng phụ khác là có cách nào để thực hiện không? thx để được trợ giúp

Answer 1

Bạn có thể phát triển các mô-đun riêng biệt có thể hoạt động cùng nhau mà không gặp sự cố nào. Cả hai khái niệm đều không xung đột chút nào.

Hãy để tôi chia sẻ kinh nghiệm của mình tại đây. Khi chúng tôi bắt đầu trong dự án hiện tại của chúng tôi (từ đầu) có hai đội khác phát triển hai ứng dụng khác sau một thời gian, chúng tôi nên 'tích hợp' chúng chỉ trong một ứng dụng lớn. Bạn không phải là một thiên tài để dự đoán kết quả cuối cùng, phải không? Mọi thứ trở nên tồi tệ hơn khi chúng tôi nghe khách hàng muốn có thêm công việc song song (nhiều đội phát triển mô-đun hơn).

Ý tưởng đầu tiên là sử dụng khung nội tuyến nhưng PoC đã chứng minh đó là một ý tưởng tồi nên chúng tôi đã dừng máy và bắt đầu thiết kế kiến ​​trúc có thể cắm được. Chúng tôi đã làm tốt vì hiện tại chúng tôi có thể tải các mô-đun (chúng tôi gọi là plugin) được phát triển một cách dễ dàng. Ví dụ, hãy nhìn vào cách cấu trúc thư mục của chúng tôi trông giống như:

Và đây là các siêu dữ liệu mà chúng ta thiết lập các module chúng tôi muốn tải:

này có rất nhiều lợi thế :

• module có thể được phát triển song song,
• module có thể được kiểm tra cách ly,
Các mô-đun
• có thể được tải động, được bật hoặc tắt

Tất nhiên, đây không phải là thứ extjs cung cấp ngoài hộp nhưng bạn có thể làm điều đó vì nó đáng giá.

Vì vậy, câu trả lời ngắn gọn: vấn đề của bạn không phải là kích thước của ứng dụng mà là cấu trúc của nó thay thế. Thực hiện theo mô hình MVC được đề nghị với cấu trúc thư mục tùy chỉnh như chúng tôi làm.

Cập nhật:

Về metadata plugins. Bộ điều khiển chính của ứng dụng chỉ có một khả năng đáp ứng: tải các plugin. Này được thực hiện với mã này:

discoverPlugins: function() { 
    var me = this; 
    Ext.each(plugins(), function (d) { 
     me.loadPluginController(d.controller); 
    }); 

    App.History.notifyAppLoaded(); 
}, 

loadPluginController: function (controllerName) { 
    try { 
     var controller = App.current.getController(controllerName); 
     controller.init(App.current); 
    } catch (e) { 
     console.log(controllerName + ' controller couldn\'t be loaded.' + e); 
    } 
}, 

Và mỗi plug-in hành vi điều khiển như một điều phối, đây là, có một phần lịch sử nghe url (trong thanh địa chỉ) và khi nó thay đổi, lặp plugin bằng cách cắm chào bán để xử lý url. Quá trình kết thúc khi một plugin có thể xử lý url được yêu cầu.
Đây là cấu hình điều phối cho các plugins của hoạt động ':

constructor: function() { 
    this.callParent(arguments); 
    this.router.set({ 
     '!/operations/product/permissions/definition': this.viewPermissionsDefinition, 
     '!/operations/product/accesslist/create': this.createProductAccessList, 
     '!/operations/product/accesslist/{id}/edit': this.editProductAccessList, 
     '!/operations/product/accesslist/{id}': this.viewProductAccessList, 
     '!/operations/product/accesslist': this.viewProductAccessList, 
     '!/operations/{...}': this.notFound, 
     '!/operations': this.root 
    }); 
} 

Và Đây là phương pháp điều hướng của mã lớp học lịch sử:

navigate: function (token) { 
    var me = this, 
     handled; 

    if (token) { 
     handled = false; 
     for (var i = 0; i < me.routers.length; i++) { 
      if (me.routers[i].processToken(token)) { 
       handled = true; 
       break; 
      } 
     } 

     if (!handled) { 
      App.current.fail(404, 'Resource not found.'); 
     } 
    } else { 
     App.current.gotoUrl('/servicedesk/search'); 
    } 
}, 

Một điểm quan trọng là plugin chỉ có một tham chiếu đến một thành phần được chia sẻ: khu vực trung tâm nơi chúng được hiển thị:

refs: [ 
    { ref: 'main', selector: '#center-panel' } 
], 

Tham chiếu này được tất cả bộ điều khiển plugin thừa hưởng ich là các lớp con của một 'AbstractPluginController'. Điều này là quan trọng bởi vì là mô-đun duy nhất biết về hoster của chúng. Và đây là lý do tại sao chúng ta có thể phát triển song song.

Về AbstractPluginController, lớp này có một số chức năng cốt lõi hữu ích cho tất cả các trình điều khiển plugin, để tải tất cả các bộ điều khiển/khung/mô hình của chúng khi được yêu cầu và không trước đó, lớp này thực hiện các bộ điều khiển động tải như sau:

createControllerGetters: function (controllers) { 
    var me = this; 
    controllers = Ext.Array.from(controllers); 
    Ext.Array.each(controllers, function (controllerName) { 
     var parts = controllerName.split('.'), 
      idx = parts.indexOf('controller'), 
      significants = parts.slice(idx + 1), 
      name = significants.map(function (e) { return Ext.String.capitalize(e); }).join(''), 
      fn = 'get' + name + 'Controller'; 

     if (!me[fn]) { 
      me[fn] = Ext.Function.pass(me.getController, [controllerName], me); 
     } 
    }); 
}, 

getController: function (controllerName) { 
    this.controllerCache = this.controllerCache || {}; 
    var me = this, 
     cached = me.controllerCache[controllerName]; 

    if (!cached) { 
     me.controllerCache[controllerName] = cached = App.current.getController(controllerName); 
     if (cached) { 
      cached.init(); 
      cached.on('beforedestroy', function() { 
       me.controllerCache[ref] = null; 
      }); 
     } 
    } 

    return cached; 
}, 

Điều này cho phép chúng tôi chỉ định danh sách các điều khiển viên phụ, và cho phép chúng tôi tạo theo yêu cầu.

controllers: [ 
    'Operations.controller.ProductAccessListViewer', 
    'Operations.controller.ProductAccessListEditor', 
    'Operations.controller.ProductAccessListCreator' 
], 

Tóm tắt: Tôi nghĩ rằng những điểm chính là những:

1. module đừng phải biết bất cứ điều gì về các ứng dụng máy chủ.
2. navigation/giao tiếp thông qua liên kết, chủ yếu là
3. hội nhập được thực hiện bởi máy chủ bằng cách sử dụng siêu dữ liệu (plug-in có thể phơi bày thêm siêu dữ liệu quá)
4. tải lười biếng của bộ điều khiển (họ làm cái gì đó với quan điểm của họ)

Tôi hy vọng điều này mang lại cho bạn một ý tưởng. Có rất nhiều chi tiết về một số thủ thuật để tích hợp chúng nhưng về cơ bản, những gì tôi muốn hiển thị ở đây là một ứng dụng mô-đun có thể (hoặc nên) được phát triển với extjs chỉ với một chút nỗ lực.

Answer 2

Chủ đề này đã được đưa ra trước đó. Xem các đề xuất tại đây: Using more than one controller with ExtJS 4 MVC