Advanced MVC - Best Practices

[tobiu]

Hi team and community,

since i am going to talk about the application pattern and mvc at the Sourc{ SenchaDevs conference, i would like to make sure i am aiming into the right direction. My main problem is, that the documentation is still not at the level where i would need to have it right now and that the examples are quite simple: we always have 1 model combined with 1 controller and 1 view.

1) Usecase: Multiple Instances of a view

Lets say, we build a forums-app with multiple subforums. I would like to build 1 Model, 1 Controller (for all views), n instances of the view, n instances of the store. Since the controller is set up like:

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: ['Users'],
    ...
});

i guess it is mandatory to build 1 instance for each view as well, leading to:
1 Model, n controllers, n stores, n views


2) Usecase: Multiple Views sharing the same instance of a store

If you want to create different views on the exactly same set of data, i would go for
1 Model, 1 controller, 1 store, n views

In my fieldmanager app, i have a calendar like daily view and a court view, both showing the events of the same selected day. so it is important that both views do not only have the same store class, but the same instance of that store as well.

So i would go for an event controller handling both view.


I hope the ideas point in the direction the team wants to go with ext js 4, otherwise please let me know. discussions on other more advanced usecases are welcome! At the moment i am fighting a lot with the implementation


thanks and best regards
tobiu

[tobiu]

still thinking about this. if you do not use strings to fast address the stores, it might work to use just 1 controller. i will try it out this evening.

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: [
        this.storeIntance1 = Ext.create('AM.store.Users'),
        this.storeIntance2 = Ext.create('AM.store.Users')
    ],
    ...
});

[jay@moduscreate.com]

still thinking about this. if you do not use strings to fast address the stores, it might work to use just 1 controller. i will try it out this evening.

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: [
        this.storeIntance1 = Ext.create('AM.store.Users'),
        this.storeIntance2 = Ext.create('AM.store.Users')
    ],
    ...
});

Just an FYI, that code is not valid. "this" most likely is a reference to Window at that time.

[steffenk]

i would use the app references to store to create instances at any time. The nice thing in MVC is that you always have a reference to all controllers, models, stores and views, doesn't matter from which place.

Anyway as there are many ways to do this, we still need a "good practise" for complex things. The samples are too easy to create complex applications out of them.

[mschwartz]

Just an FYI, that code is not valid. "this" most likely is a reference to Window at that time.

It's not valid syntax either.

[steffenk]

that's always the case with pseudocode

Ext.create('World.Peace', {
   extend: 'Universe.Order',
   uses: 'World.Sunshine, World.Goodness',
   requires: 'A.lot.of.Money'
}).show(true);

[tobiu]

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: [
        Ext.create('AM.store.Users', {storeId: 'storeIntance1'}),
        Ext.create('AM.store.Users', {storeId: 'storeIntance2'})
    ],
    ...
});

fine now?

come on, this topic is not about the syntax but about the general best practices and possibilities of the currently impemented mvc.

the interesting part is, if you need one controller or multiple instances for multiple views.


best regards
tobiu

[wrfelts]

Tobias,

I don't think that is going to work. In the MVC examples, each view is tied to a specific store, each controller is tied to specific stores, views, and models, and each store is tied to a specific proxy (I need distinct proxies with the same MVC structure). I think that, to make this work, each one will have to have config values defined at all levels, starting like you did above, but with every reference into the MVC tree.

If we don't here back from anyone on this, I think that we may be forced to building out own MVC 'factory'. Not impossible, just a pain in the neck.

Honestly, I don't think the good folks at Sencha have gotten that far yet, but I could be wrong.

Randy

[tobiu]

hi randy,

i spent quite some time on this. i think going for classes a bit like in ext 3 style is probably a good idea. you can specify multiple instances of a view sharing one controller, but it does not feel like a clean solution.

items : [{
    xtype : 'messageslist',
    title  : 'forum 1'
}, {
    xtype : 'messageslist',
    title  : 'forum 2',
    store : Ext.create('App.store.MessagesStore', {...})
}

this way the first store gets the auto-generated store instance of the controller and the second view its own store. the controller can handle it (tested some events).

if you leave out the red line, both instances share one store. if you give it to both, you get 3 stores.

the cleaner way would be to create new child classes of the view each time, extending the original one almost without changing something and save it into a new file. quite a lot of boiler code though.


best regards
tobiu

[ykey]

I have been wondering how you might accomplish having two or more of the same controller each managing a complex custom component.

Say I have two complex window extensions (same xtype) open that are each managed by their own (but same) controller. I don't want the controller events to collide across windows. I think this is an extremely common use case and is not address by the MVC examples.