PDA

View Full Version : MVC Example



sg707
16 Feb 2011, 1:50 PM
Does anyone have a working sample of MVC? If so, can you share?

brian.moeskau
16 Feb 2011, 1:56 PM
The new MVC capabilities will be included and fully explained in a forthcoming release prior to 4.0 final.

sg707
16 Feb 2011, 2:03 PM
Awesome!!! I'm just glad to have a early package~ :D

estesbubba
17 Feb 2011, 6:41 AM
Look at Ext.regApplication(), regModel(), regStore(), and regController(). Download Sencha Touch and there are a couple of simple MVC examples - Kiva and Twitter I believe. I'm assuming (and really hoping) the MVC model and data package between Touch and Ext JS 4 will be the same.

Here is another Touch MVC demo:

https://github.com/RobinQu/Phone-Demo

One pattern I noticed is the examples use the same name for JavaScript files:

Model - Contacts.js
Store - Contacts.js
Controller - Contacts.js
View - Contacts.js

I found this hard to find the correct JS in Chrome Developer Tools. So I did it this (and didn't see any problems doing it):

Model - ContactsModel.js
Store - ContactsStore.js
Controller - ContactsController.js
View - Contacts.js

The other method we found useful was Ext.dispatch().

westy
17 Feb 2011, 6:46 AM
The new MVC capabilities will be included and fully explained in a forthcoming release prior to 4.0 final.

Ah, so the MVC stuff is not working in the preview?

Explains why I get an error (Ext.Viewport.init is not a function) when just trying to do:

Ext.regApplication({
name: 'Test',
launch: function() {
console.log('launch called...')
}
});

I assume I just need to include the bootstrap.js (and ext css) to get everything up and running?

Shame, cause was looking forward to playing with it...

TommyMaintz
17 Feb 2011, 7:51 AM
As mentioned by Brian, we are hoping to release MVC as part of one of the upcoming beta releases. We know you guys are anxious to get your hands on this, but we just want to be sure to have the absolute best solution before giving something this important to you guys and thus we want to do more internal testing.

westy
17 Feb 2011, 8:20 AM
Ah ok, thanks Tommy.

I hope the beta release schedule is aggressive!
Really looking forward to using it, and the pressure is starting to mount up...

Cheers,
Westy

TommyMaintz
17 Feb 2011, 8:22 AM
We are aiming for an aggressive release schedule ;)

Pandaxia
19 Feb 2011, 11:23 PM
I'm hoping my post at http://www.sencha.com/forum/showthread.php?124508-Ext.Application-Functional-or-In-Development#post_573012 will be helpful and correct for the final release. Maybe it'll help you to start using some of the features now.

westy
20 Feb 2011, 12:15 AM
I'm hoping my post at http://www.sencha.com/forum/showthread.php?124508-Ext.Application-Functional-or-In-Development#post_573012 will be helpful and correct for the final release. Maybe it'll help you to start using some of the features now.

Ah, excellent! I didn't look into it anymore after reading it was not included.
I'll have another look next week.

Cheers,
Westy

Kazuhiro Kotsutsumi
20 Feb 2011, 4:52 AM
https://github.com/xenophy/PerfectDay/tree/master/public_html/model/src
(https://github.com/xenophy/PerfectDay/tree/master/public_html/model/src)
I make in the form of MVC.

westy
21 Feb 2011, 1:51 AM
Thanks Kazuhiro, a nice and simple example to build on.

Cheers,
Westy

Kazuhiro Kotsutsumi
21 Feb 2011, 2:03 AM
np lol

sg707
21 Feb 2011, 8:48 AM
Thanks for a great demo code! I'm beginning to see a light through Sencha MVC. But, I am still confused in some of the parts.

1) Controller is tied to a specific view
When I look at your code


index: function() {

PerfectDay.views.viewport = new PerfectDay.views.Viewport();
console.log("index action controller.");
}
It's tied to a very specific view. If I wanted to reuse the controller w/ different view or pass to another controller then it I would have to add "if" statement for each type of view I add into my code. I guess the Controller has to be aware of Sencha Touch View and ExtJS4 View.

I think a better way would be to change how Controller is invoked


{controller: 'dashboard', action: 'index'}

to

{controller: 'dashboard', action: 'index', view: {
success: 'PerfectDay.views.Viewport'
}
}

index: function() {
this.data['books'] = this.store.data;
return 'success';
}

Then in the controller code you just return a string of "success". Just my 2 cent.


2) Store is instantiated through View
Again in the controller index method


PerfectDay.views.viewport = new PerfectDay.views.Viewport();
This is where you create this class along w/ store. I guess a better way is to put "load store" logic in the index method instead. I don't think View should know the logic on how it retrieve the data. It should only take list of "models" for display only. I guess I would do it


this.store.books.load({
callback : function(r, options, success) {
if (success) PerfectDay.views.viewport = new PerfectDay.views.Viewport(r, this.store.books);
},
scope : this
});

This is still 1000000x better architecture than mine :D:D:D I'm hoping Secha demo would give a bit more complex example that uses multiple controller, validation, multiple view, and etc... Thanks again!

sg707
21 Feb 2011, 11:57 AM
Found Sencha Touch MVC tutorial!

I'm sure it's fairly similar

http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap

Jehu
3 Mar 2011, 2:51 AM
I think a better way would be to change how Controller is invoked


{controller: 'dashboard', action: 'index'}

to

{controller: 'dashboard', action: 'index', view: {
success: 'PerfectDay.views.Viewport'
}
}

index: function() {
this.data['books'] = this.store.data;
return 'success';
}

Then in the controller code you just return a string of "success". Just my 2 cent.


Interesting idea to define views in the route.
But the code below is not work in my experiments with Ext JS 4:



Ext.Router.draw(function(map) {
map.connect("cockpit", {
controller: "app.controllers.cockpit", action: 'index', view: {
success: "app.views.Viewport"
}
});
});


No JS errors in console. No output.

sg707
3 Mar 2011, 6:04 AM
Of course, that won't work. It was just a suggestion to Sencha about "view" routing. Typically in MVC, Controller should not be aware of the View implementations. The job of the controller is to execute business logic like login() method, create model needed to display onto the view, and return the "state" status of the controller (success/failure/etc..). Then, there should be a Master View which reads the state and forwards to specific view based on that value. Hope this make sense.

icflorescu
3 Mar 2011, 8:27 AM
MVC patterns and architectures are, like most conventions, a highly debatable subject and can be implemented in many different ways... And some people can get quite religious on the matter :).
For instance, there are some PHP MVC frameworks out there like Kohana and CodeIgniter in which there's a common practice to have the controller choose/invoke the view.
In the end I think there's no absolutely right or wrong way of doing it; there's no one-fits-all solution and your approach should mostly depend on your project's complexity.

One thing is for sure, any architecture is better than no architecture at all, but on the other hand I've seen far too many examples of "multi-tier enterprise blog applications" out there and some people got the wrong idea that you need to use a complex MVC for everything, even for trivial stuff like a contact form...

h.wagner@telekom.de
9 Mar 2011, 8:05 AM
How does fit in this (JS) MVC pattern the code generated by ExtDesigner? Or the two are supposed to never mix?

Thanks in advance.

netemp
29 Jul 2011, 3:20 AM
https://github.com/xenophy/PerfectDay/tree/master/public_html/model/src
(https://github.com/xenophy/PerfectDay/tree/master/public_html/model/src)
I make in the form of MVC.

The above link is not working.. could you please share your code again.. It would be a great help.

Thanks in Advance.

Wilkins
29 Jul 2011, 9:10 AM
netemp,

Just go here:

https://github.com/xenophy/PerfectDay

netemp
31 Jul 2011, 10:01 PM
netemp,

Just go here:

https://github.com/xenophy/PerfectDay

Thanks Wilkins.