View Full Version : MVC Architeture + Reusable Components

31 May 2011, 11:11 PM

Trying to apply the suggested MVC architecture that places all code in an appFolder, I started to wonder how to manage reuseable components.

Let's assume that I want to reuse the "Article" part of the FeedViewer example (see extjs 4.X examples). Currently this part is dropped on a TabPanel, but nothing should prevent me to use it in my own application.

With this is in mind I wonder how to structure my code. The FeedViewer example has its own "app" structure (controller, model, store etc.). My application will have its own structure (app, controller, model, view etc.) structure too. Does this imply that I have to copy each of the involved artifacts from the sample app structure to my app structure ? Isn't there a general structure that allows me to define reusable components ? Do I define both structures in a root app (as in done in the examples shipped with extjs) and can I then reference among them ?

I'd appreciate any suggestion.



7 Sep 2011, 12:19 PM
Hi Vincent,
I had the same question, I'd solved it, maybe it's not correct but, for example let's try to resolve a problem of creation reusable SearchField.
1. Create new module name in controller and view paths, (controller/search, view/search)
Then create controller (controller/search/Controller.js) and views (view/search/SearchField.js)
Controller contains handlers for trigger icons click for SearchField.

Ext.define('App.controller.searh.Controller', {
extend : "Ext.app.Controller",
views : [
init : function(){
'SearchField [ref="core-searchfield"]' : {
trigger1click : fuction(){//stuff;}

View :

Ext.define('App.view.searh.SearchField', {
extend : "Ext.form.field.Trigger",
constructor : function(){
this.ui = 'app-search-field',
this.ref = 'core-searchfield';

In the panel that should contains search-field write something like:

items : [{
xtype : "SearchField",
ui : "custom-ui"

Now, if you need to customize it, for example add some new logic you just extends the controllers to include new searchField-view, and handle events be view's new ref.
and in panel with SearchField adds ref

items : [{
xtype : "SearchField",
ui : "custom-ui",
ref : "user-search"

8 Sep 2011, 6:27 AM
Hi Rsqw,

I just realized that you replied to my question on how to setup the ExtJS for reusable components. I see that you've opted for creating "sub packages" to store the reuseable parts of your application. Initially I opted for this solution too but today I have a different view on this.

Creating sub packages in the controller, store, view etc. folders is nice, but your code is still kept in the same application (note that the root is still the app of your application). Meaning that moving your common code to another application is not straight forward as following this approach you would have to "copy" the common sub packages to any other application in need of it.

That's why today I would opt for dropping common code in a different "app" folder. Note that this "app" would than have its own namespace.

All you need to do afterwards is basically include this "common" app in the application where you need it. You can specify this in your loader application.

Building a bit further on this you can see that splitting up the logic in different "apps" is also nice as this allows for dynamic loading of these "apps" based on needs. For example, if your application consists of different modules, you could model each module in an "app", and only load the code for the app when the module is being accessed (resulting in performance improvements).

Hope you get the idea. If not let me know.


9 Sep 2011, 7:02 AM
This have been discussed in this thread (http://www.sencha.com/forum/showthread.php?139944-MVC-and-Reusable-Widgets-(Feedback-from-Sencha-would-be-great-))) as well. There's not so much guidance on how to deal with reusable components... mainly because ExtJS native components aren't structured in MVC. I am currently trying to find a good solution by looking at the Cocoa framework which is built with MVC in mind from the ground.

23 Dec 2011, 7:44 AM
I have been wondering this myself. I may have found a solution and would like some input. I created a thread about this before stumbling onto this one: http://www.sencha.com/forum/showthread.php?164136-Adding-components-on-page-with-MVC-architecture&p=697423 . What do you guys think?