ExtJS MVC——启动动态模式的正确方法

Question

我想使用单个函数onLaunchWindow()来启动不同的唯一窗口。该事件在视图中激发，并由控制器中的switch语句处理。在这个例子中，我正在启动一个"添加"事件。我想对此进行扩展，并包括其他场景，如"删除、编辑等"。我的问题是，我不想在控制器中声明Ext.window和它的配置，但我不确定如何进行其他操作。理想情况下，我想在视图中将Ext.window声明为对象，并将其传递给onLaunchWindow()函数，然后动态更改其配置，以适应应用程序中的不同需求。

更简单地说，我认为，我需要在对象配置已经构建好之后访问和修改它。

查看

...
,
xtype: "button"
itemId: "testButton"
iconCls: "test-icon test-add"
tooltip: "Launch a Modal with Unique Properties"
hidden: false
margin: "0, 5, 0, 5"
cls:'x-btn-default-small'
border: 1
handler: () =>
action = "add"
@fireEvent( 'launchwindow', action )
style:
borderColor: '#D1D1D1',
borderStyle: 'solid'
,
...

控制器

...
control:
view:
'launchwindow': ( action ) ->
@onLaunchWindow( action )

...
onLaunchWindow: ( action ) ->
switch ( action )
when "add"
window = Ext.create( "Ext.Window",
layout: "fit"
width: 500
height: 300
modal: true
closeAction: "hide"
title: "Add"
items: [ {
} ]
)
...

我还尝试将窗口声明为视图中的对象，并将其传递给onLaunchWindow()函数，并通过Ext.apply()设置其配置。这对一个窗口来说很好，但我似乎无法在每次调用该函数时重置配置。

如有任何帮助，我们将不胜感激！

Answer 1

我不知道Coffeescript，所以我的代码是纯javascript。

我认为有两种可能性可以在MVC系统中巧妙地实现这一点。

1) 在视图中定义窗口，然后在创建窗口时在控制器中扩展窗口

file/view/GenericWindow.js:

Ext.define( 'App.view.GenericWindow', {
extend: "Ext.Window",
layout: "fit",
width: 500,
height: 300,
modal: true,
closeAction: "hide",
items: [ {
} ]
})

控制器：

OnLaunchWindow: ( action ) ->
switch ( action )
when "add"
window = Ext.create('App.view.GenericWindow', {
title: 'Add'
})

2) 定义一个通用窗口类，然后通过扩展它来定义不同的窗口

file/view/GenericWindow.js如上file/view/AddWindow.js:

Ext.define( 'App.view.AddWindow', {
extend: 'App.view.GenricWindow'
alias: 'widget.addwindow',
items: [ ... ]
})

控制器：

switch (action){
case 'add': xtype = 'addwindow'; break;
}
var window = Ext.create('widget.' + xtype)