ExtJS MVC - 正确启动动态模态的方法

时间:2013-12-30 21:48:58

标签: javascript extjs coffeescript extjs-mvc

我想使用单个函数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()设置它的配置这适用于一个窗口,但我似乎无法看到每次调用函数时重置配置。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

我不知道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)定义一个通用窗口类,然后通过扩展它来定义不同的窗口。

文件/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)