ExtJS MVC -- Correct Way to launch dynamic modals

Question

I'd like to use a single function onLaunchWindow() to launch different unique windows. The event is fired in the view and handled by a switch statement in the controller. In this example I'm firing an "add" event. I'd like to expand on this and include other scenarios such as "remove, edit, etc." My problem is I don't want to have to declare the Ext.window and it's config in my controller but I'm not sure how to proceed otherwise. Ideally I'd like to declare the Ext.window as an object in my view and pass it to the onLaunchWindow() function and change it's config on the fly to suite different needs in my application.

More plainly, I think, I need to access and modify the objects config after it has already been constructed.

View

...

,
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'
,

...

Controller

...

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: [ {

      } ]
    )

...

I've also tried declaring the window as an object in the view and passing it to the onLaunchWindow() function and setting it's config via Ext.apply() this works well for one window but I can't seem to reset the config each time the function is called.

Any help would be greatly appreciated!

I don't really understand what your question is. Are you specifically asking about using the `switch`? Or that you're using the config inline in the controller? — Evan Trimboli, Dec 31 '13 at 03:45
My question is more about where to declare `Ext.Window` and it's config in a MVC pattern app and whether I can dynamically change it's config. The question is how can I use one function `onLaunchWindow()` above to launch different modals. — Cadean, Dec 31 '13 at 13:55
I'm also concerned that the controller is not the proper place to declare the window and it's config but can't come up with a good solution given that I fire an event from the view and handle which window to show in the controller. — Cadean, Dec 31 '13 at 13:59
@Cadean I think what you are trying to achieve is very simple but there is a lot of misunderstanding in your question, can you rephrase please? — code4jhon, Dec 31 '13 at 16:32

Lorenz Meyer · Answer 1 · 2014-01-01T19:33:07.493

I don't know Coffeescript, so my code is plain javascript.

I see two possibilities to fit this neatly in a MVC system.

1) Define your window in a view, then extend it in the controller while you create it.

file /view/GenericWindow.js :

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

  } ]
})

controller :

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

2) Define a generic window class, then define your different windows by extending it.

file /view/GenericWindow.js like above file /view/AddWindow.js :

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

controller :

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

ExtJS MVC -- Correct Way to launch dynamic modals

1 Answers1