在 ExtJS 4 MVC 中,可以使用多个控制器来处理不同的页面和逻辑。以下是使用多个控制器的步骤:
- 建立多个控制器类:在 ExtJS 4 MVC 中,可以使用 Ext.define() 函数来建立多个控制器类。例如,建立一个名为 "Controller1" 和 "Controller2" 的控制器类。Ext.define('MyApp.controller.Controller1', {
extend: 'Ext.app.Controller',
// 定义需要使用的组件和事件
views: ['Viewport', 'Panel1'],
refs: {
panel1: {
selector: 'panel1'
}
}
});
Ext.define('MyApp.controller.Controller2', {
extend: 'Ext.app.Controller',
// 定义需要使用的组件和事件
views: ['Viewport', 'Panel2'],
refs: {
panel2: {
selector: 'panel2'
}
}
});Ext.define('MyApp.controller.Controller1', {
extend: 'Ext.app.Controller',
// 定义需要使用的组件和事件
views: ['Viewport', 'Panel1'],
refs: {
panel1: {
selector: 'panel1'
}
}
});Ext.application({
name: 'MyApp',
controllers: [
'Controller1',
'Controller2'
],
launch: function() {
Ext.create('MyApp.view.Viewport');
}
});Ext.define('MyApp.view.Viewport', {
extend: 'Ext.container.Viewport',
controller: 'Controller1',
items: [
{
xtype: 'panel',
title: 'Panel 1',
items: [
{
xtype: 'button',
text: 'Button 1'
}
]
},
{
xtype: 'panel',
title: 'Panel 2',
items: [
{
xtype: 'button',
text: 'Button 2'
}
]
}
]
});以上步骤
- 建立多个视图:在控制器类中,可以使用 views 属性来指定需要使用的视图。例如,在 "Controller1" 控制器类中,指定 "Panel1" 组件为视图。
- 在应用程序中注册控制器:在应用程序中,可以使用 Ext.application() 函数来注册控制器。
- 在视图中使用控制器:在视图中,可以使用控制器的实例来处理页面和逻辑。例如,在 "Viewport" 视图类中,使用 "Controller1" 控制器类的实例来处理页面和逻辑。