Extjs: Вложенные приложения

Question

Я пытаюсь переместить довольно сложное приложение в Extjs. В нашем текущем приложении мы использовали очень модульный подход, в котором мы структурировали приложение в нескольких суб-приложениях, которые были загружены основным приложением. Я хотел бы использовать этот подход с помощью Extjs, используя новую «базу MVC» для каждого приложения.

На данный момент у меня есть простое основное приложение и простое приложение-клиент. Оба работают красиво независимо. Но как только я пытаюсь добавить клиента в основное приложение, я просто вижу пустую область.

Может быть, более рекомендуемый способ сделать это?

Мой главный приложение:

Ext.application({ 
    name: 'ISA', 
    appFolder: 'app', 
    launch: function() { 
     Ext.create('Ext.container.Viewport', { 
      layout:'border', 
      defaults: { 
       collapsible: true, 
       split: false, 
       bodyStyle: 'padding:15px' 
      }, 
      items: [{ 
       title: 'ProcessBar', 
       region: 'north', 
       height: 150, 
       cmargins: '5 0 0 0' 
      },{ 
       title: 'Main Area', 
       id:'desktop', 
       xtype:"panel", 
       collapsible:false, 
       region:'center', 
       margins: '5 0 0 0', 
       cmargins: '0 0 0 0', 
       height:300, 
       items:[{ 
        type:"ISA.extensions.customer", 
        height:300 
       }] 

      }] 
     }); 
    } 
}); 

Мой клиент App:

Ext.define('ISA.extensions.customer',{ 
    extend:'Ext.app.Application', 
    alias:'customer', 
    name: 'ISA.extensions.customer', 
    appFolder: 'app',  
    controllers: [ 
     'Users' 
    ], 
    launch: function() { 
     Ext.create('Ext.panel.Panel', { 
      layout:'border', 
      height: 400, 
      renderTo: "desktop", 
      defaults: { 
       collapsible: false, 
       split: false, 
       bodyStyle: 'padding:0px' 

      }, 
      items: [{ 
       title: 'Customer App', 
       region:'center', 
       margins: '0 0 0 0', 
       cmargins: '0 0 0 0', 
       width: 175, 
       minSize: 100, 
       maxSize: 250, 
       items: { 
        xtype: 'userlist' 
       } 
      }] 
     }); 
    } 
}); 


Ext.define('ISA.extensions.customer.view.user.List' ,{ 
    extend: 'Ext.grid.Panel', 
    alias : 'widget.userlist', 

    title : 'All Users', 

    initComponent: function() { 
     this.store = { 
      fields: ['name', 'email'], 
      data : [ 
       {name: 'Ed', email: 'ed@sencha.com'}, 
       {name: 'Tommy', email: 'tommy@sencha.com'} 
      ] 
     }; 

     this.columns = [ 
      {header: 'Name', dataIndex: 'name', flex: 1}, 
      {header: 'Email', dataIndex: 'email', flex: 1} 
     ]; 

     this.callParent(arguments); 
    } 
}); 

Ext.define('ISA.extensions.customer.controller.Users', { 
    extend: 'Ext.app.Controller', 
    views: [ 
     'user.List' 
    ], 
    init: function() { 
     this.control({ 
      'viewport > panel': { 
       render: this.onPanelRendered 
      } 
     }); 
    }, 

    onPanelRendered: function() { 
     console.log('The customer list was rendered'); 
    } 
}); 

Answer 1

Текущий ExtJs MVC подход Предположим, у вас есть весь код внутри одного приложения. Вы можете разделить различные функции, используя разные представления, контроллер и магазины, но приложение должно быть одно.

Answer 2

Я считаю, что это то, что вы ищете: https://github.com/mitchellsimoens/SubAppDemo;

Если это не поможет, я могу рассказать вам довольно много о динамической загрузке представлений/контроллеров.

Answer 3

Другим решением IST с помощью инъекции зависимостей: http://deftjs.org/