View or Widget

[mrinsan]

What i understand from the docs and forum is

in Extjs-MVC controllers are not tied to a view
all the controllers have application wide scope having said that
if i have a controller defined as below then it will trigger refreshGrid function for any button defined in the application (not just for buttons inside a particular view).

or in other words extjs do not provide a way to define a controller for a view. and to overcome this our component selectors must be very specific






Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',


refs: [{ref:'list', selector:'grid'}],


init: function() {
this.control({
'button': {click: this.refreshGrid}
});
},


refreshGrid: function() {
this.getList().store.load();
}
});



also my understanding is that once a controller event is defined there is no way you can destroy it.


Now my questions are

1. Is my above understanding true ?

2. If true, then for a large project where i have about 60-70 views and many more event listener. should i take the approach of creating widget instead of the views because when you create a widget and destroy it, along with it all its listeners are also destroyed whereas in views the all the listeners in the controller will be active and consume resource .

3. can anyone provide me a way to measure the cost of maintaining a event listeners so that i can take an informed decisions

[mitchellsimoens]

Your selector is quite generic. Your app probably has lots of application views using Ext.define and therefore you should have many xtypes that you can use to get more specific without much work. So say you have a view that has an xtype of 'test-user-grid' and you want to have the click event on a button within it then you can use:


'test-user-grid button' : {
click : this.refreshGrid
}

However that will fire for all buttons under that grid so we now need to target which button under that grid we want this to fire on. For this I often use a custom property call action. If you specify your button like:


{
xtype : 'button',
text : 'Refresh Grid',
action : 'RefreshGrid'
}

then you can do this in your controller:


'test-user-grid button[action=RefreshGrid]' : {
click : this.refreshGrid
}

Now it will only fire for a button that has action = 'RefreshGrid' within a component that has an xtype of 'test-user-grid'

[mrinsan]

thanks for the reply. but i am not concerned on how can i can have selectors to target a specific component

my question is that
when i take the MVC approach and have too many view-event-listeners in an app which cannot be destroyed. is it a resource eater ?

So which is better if i define widgets where the associates listeners will be created and destroyed as and when i instantiate and destroy them
Vs
having the all the View listeners alive throughout the application. ??

[mitchellsimoens]

Sorry, when I read "to overcome this our component selectors must be very specific" I figured I'd help you a little there, you're welcome.

The listeners in a controller are never applied onto components so there isn't really any performance degradation having them in the controller at all times.

[metalinspired]

Or you can take approach where you don't use controllers at all.
I code all of my components to do their job by them self.
This way I achieve three things:
I don't have to be careful if controller will distinguish one component from another.
Code for dealing with what each component does is inside the definition of that component so if I never use (therefore never create) that component, the code is not loaded and it saves on memory.
It is so much simpler to reuse a component if all it's logic is inside it self.