Can someone explain what the item in Ext.util.Observable.mon does?

[whirling dervish]

From the documentation,

Shorthand for addManagedListener.
Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
Available since: Ext 4
Parameters

• item : Ext.util.Observable/Ext.ElementThe item to which to add a listener/listeners.
• ename : Object/StringThe event name, or an object containing event name properties.
• fn : Function (optional)If the ename parameter was an event name, this is the handler function.
• scope : Object (optional)If the ename parameter was an event name, this is the scope (this reference) in which the handler function is executed.
• options : Object (optional)If the ename parameter was an event name, this is the addListener options.

I don't understand what the first argument is suppose to represent? Is that the item containing managed listener that will be cleaned up with that item is deleted?

So in grid.feature.AbstractSummary, just to use a random example,

    init: function() {
        var me = this;


        // Summary rows must be kept in column order, so view must be refreshed on column move
        me.grid.optimizedColumnMove = false;


        me.view.mon(me.view.store, {
            update: me.onStoreUpdate,
            scope: me
        });
    },

What is me.view.store representing in this case and what is me.view representing? What is their relationship to the listener?

Is someone could expand upon the documentation and give me a few examples on mon I would appreciate it.

[evant]

It's for listening to events on other observables that you want cleaned up when the current observable is destroyed.

In the example you posted, we want to listen to some things on the store so that we can react to them in the plugin. By using mon, those listeners will be automatically removed when the view is destroyed, so we don't need to clean them up manually.

[whirling dervish]

So the equivalent .on would be

        me.view.store.on({
            update: me.onStoreUpdate,
            scope: me
        });

and me.view is unneeded because there is no managed cleanup.

Did I understand you correctly?

[evant]

Correct.

[whirling dervish]

Thanks a lot, that was helpful.

So in general should I be using managed listeners instead of ones I have to manually clean up?

[skirtle]

So in general should I be using managed listeners instead of ones I have to manually clean up?

No, you can't generalise in that way. As a rule of thumb you should be registering the listeners against whichever object will be destroyed first. Listeners get cleaned up automatically with either method, the difference is which object's destruction triggers the clean up.