以下是我的工作内容:我有一个顶部的工具栏,一个左侧导航和中心位置是工作区(基本上是选项卡面板),就像你所提到的。让我们分别来看一下应用程序的各个部分并进行解释。首先,这是我的视口外观:
Ext.define('App.view.Viewport',{
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'App.view.menu.NavigationPane',
'App.view.CenterPane',
'App.view.menu.Toolbar'
],
initComponent: function() {
Ext.apply(this, {
items: [{
region: 'north',
xtype: 'panel',
height: 24,
tbar: Ext.create('App.view.menu.Toolbar')
},{
title: 'Navigation Pane',
region: 'west',
width: 200,
layout: 'fit',
collapsible: true,
collapsed: true,
items: Ext.create('App.view.menu.NavigationPane')
},{
region: 'center',
xtype: 'centerpane'
}]
});
this.callParent(arguments);
}
});
您可以看到我有一个工具栏(App.view.menu.Toolbar),其中包含菜单和左侧导航(App.view.menu.NavigationPane)。这两个组件构成了我的主菜单或通往其他模块的入口。用户选择菜单项,适当的模块视图(如表单、网格、图表等)将加载到“centerpane”中。Centerpane只是Ext.tab.Panel的一个派生类。
正如您所说,我有一个主控制器来处理来自工具栏和导航窗格的所有请求。它仅处理工具栏和导航窗格的点击操作。以下是我的AppController:
Ext.define('CRM.controller.AppController',{
extend: 'Ext.app.Controller',
init: function() {
this.control({
'apptoolbar button[action="actionA"]' : {
click : function(butt,evt) {
this.application.getController('Controller1').displayList();
}
},
.
.
.
'apptoolbar button[action="actionB"]' : {
click : function(butt,evt) {
this.application.getController('Controller2').NewRequest();
}
}
});
}
});
看一下我的一个按钮处理器。我通过'application'属性获取控制器:
this.application.getController('Controller2').NewRequest()
借助 getController 方法,我获取控制器的实例,然后调用控制器内任意方法。现在让我们看一下我模块控制器的框架:
Ext.define('CRM.controller.Controller2',{
extend: 'Ext.app.Controller',
refs: [
{ref:'cp',selector: 'centerpane'},
],
views: ['c2.CreateForm','c2.EditForm','c2.SearchForm','c2.SearchForm'],
init: function() {
this.control({
'newform button[action="save"]' : {
},
'editform button[action="save"]' : {
},
'c2gridx click' : {
}
});
},
NewRequest: function() {
var view = Ext.widget('newform');
var cp = this.getCp();
cp.add(view);
cp.setActiveTab(view);
},
displayList: function() {
}
});
我的模块控制器仅包含与该模块相关的操作(模块的网格、表单等)。这应该有助于您开始朝着正确的方向推进。