1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Answers
    4
    Vote Rating
    0
    gnube is on a distinguished road

      0  

    Default Answered: What is the proper way to create listeners on reusable MVC views?

    Answered: What is the proper way to create listeners on reusable MVC views?


    So far i have been using a few mechanisms for creating listeners in my MVC Views. I want my views to be re-usable as well as be able to have multiple instances created on my page at one time. This means that I want to be sure my listeners are created and removed appropriately.


    I have managed to put 95% of my listener code into my controller and have mechanisms to identity the id's of the views responsible for firing events. But there are a few listeners stuck in view configs and plugin configs handling dd events, cell edits and the like.


    e.g. from an initComponent()
    PHP Code:
            //Dynamically create the plugin so that is valid for each instantiation
            
    me.plugins =     Ext.create('Ext.grid.plugin.TreeCellEditing'
            {
                
    clicksToEdit:2
                

                
    listeners: {
                    
    edit: function(editore) {
                        if (
    e.record.dirty){ // save and commit the changes via the controller after editing finished
                            
    var newRecord e.record.copy();
                            
    editor.grid.fireEvent('cxAfterCellEdit'editorenewRecord); // use the controller to keep data changes centralised
                        
    }
                    }
                }
            } 

    Firstly, I don't like that I have used an anonymous function, secondly I suspect that the listeners:{} configuration will not actually create managed listeners which will be destroyed when my control is destroyed.


    I have setup managed listeners in views with named functions outside of config descriptions and would like to configure the equivalent listeners in these config items so I feel sure that views can be destroyed cleanly e.g.

    PHP Code:
    me.addManagedListenerme'itemcontextmenu',me.doRowCtxMenu); 
    In my controllers I have used this.control({}) to setup listeners - I can't see the controllers being destroyed for any reason so I am not so concerned about these - from what I can see so far - these are also non-managed???
    PHP Code:
            this.control({
                
    'MyGrid button#refresh' : {
                    
    clickme.onGridButtonRefresh
                
    }, 

    How do I setup listeners in these viewConfigs and plugin configs properly so that they are destroyed when the view is destroyed by a tab panel closing or whatever?

  2. When you use this.control you aren't actually putting listeners on the view themselves. The view fires an event and the underlying Ext.app.EventBus gets this event and then goes through and finds any selector you specified in this.control and fires the listener. So Ext.app.EventBus is a middle man to the view and the Controller. The only time you have to manage removing listeners is if you use this.on or this.addListener within the view which you shouldn't do if you are using MVC.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,811
    Answers
    3467
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    When you use this.control you aren't actually putting listeners on the view themselves. The view fires an event and the underlying Ext.app.EventBus gets this event and then goes through and finds any selector you specified in this.control and fires the listener. So Ext.app.EventBus is a middle man to the view and the Controller. The only time you have to manage removing listeners is if you use this.on or this.addListener within the view which you shouldn't do if you are using MVC.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Answers
    4
    Vote Rating
    0
    gnube is on a distinguished road

      0  

    Default


    Excellent! Thanks Mitchell, nicely explained.

Thread Participants: 1