我正在尝试将一个相当复杂的应用程序移至 Extjs。在我们当前的应用程序中，我们使用了一种非常模块化的方法，我们将应用程序构建为多个子应用程序，这些子应用程序由一个主应用程序加载。我想在每个子应用程序中使用新的“MVC 基础”来重用这种方法和 Extjs。
目前我有一个简单的主应用程序和简单的客户子应用程序。两者都很好地独立工作。但是一旦我尝试将客户添加到主应用程序，我只会看到一个空白区域。
有没有更推荐的方法呢？
我的主要应用程序：
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
}]
}]
});
}
});
我的客户应用程序：
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');
}
});