Results 1 to 10 of 10

Thread: MVC: How to listen to one common event from multiple views?

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    15

    Default Answered: MVC: How to listen to one common event from multiple views?

    Our app has one function (the Fav button) that is on all views. This is exactly like the 'Like' button on FB which is everywhere. Whenever this button is pressed, I'd like to emit a custom event with the ID of the item being fav'ed.

    A single piece of event handler code should handle this. My question is where do I put this code in my MVC app? Seems like controllers listen to events only from the views they control. Would it force me to have on controller that controls all views and listens to this one event? Or is there a better way?

    Gracias

  2. I create a controller only for this task, made this test and work for me:

    Code:
    //FavButtonController.js
    Ext.define('MyApp.controller.FavButtonController',{
        extend: 'Ext.app.Controller',
            
        init: function(){
            this.control({
                'button[action=fav]': {
                    click: this.favButtonHandler
                }
            });
        },
        
        favButtonHandler: function(){
            console.log('favButtonHandler');
        }
    });
    and added this controller to app
    Code:
    //app.js
    controllers: [..., 'FavButtonController']
    then in the views you can add the buttons
    Code:
    //MyView.js
    {
         xtype: 'button',
         text: 'Favorite',
         action: 'fav'
    }

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Moved to Ext JS 4 Q&A forum as appropriate.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    You should put your code in controller. Controller will listen to registered events from all components in your application provided that they are matched the selector.

  5. #4
    Sencha User
    Join Date
    May 2010
    Posts
    12
    Answers
    1

    Default

    I have a similar question, surely same answer, I need listen clicks on all link tags, Ext.addBehaviors works well with current links but how to listen the new ones created dinamically ? (I think calling this function every time is not a good practice)

  6. #5
    Sencha User
    Join Date
    May 2010
    Posts
    12
    Answers
    1

    Default

    A workaround was listen click on body and check for href attribute:

    Code:
    Ext.getBody().on('click', function(event, target){
      console.log(target.attributes['href'].value); 
      event.preventDefault();
    })

  7. #6
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    15

    Default

    @Vietits:
    Can you please elaborate on your answer? The problem I have is that multiple views, and multiple components from those views, from different parts of the application are throwing this one event. In this case, one controller will have to define refs to multiple components and also define "this.control" for each specific component as the code below does for grid and button below.

    refs:[{ref:'list', selector:'grid'}], init:function(){this.control({'button':{ click:this.refreshGrid }});}, refreshGrid:function(){this.getList().store.load();}
    My problem is this wont scale. This is ok for 1 or 2 or even 10 components for which control is defined. How do you scale it to 50? As I said, compare it to the Like action on facebook. It's all over the place. Almost all components in our app will have this button.

    Thats why I asked whether I can just listen to one named event centrally somewhere? No matter who threw it, 1 controller/class should be able to catch and handle it. Whats the best pattern for that?

    @ljparra : I agree that worst case you can let the event bubble to the body and listen to it. That kind of defeats the purpose of MVC and all the massive abstraction that ext provides. In my opinion, if I'm doing that, then why do MVC at all? Why not go back to developing pages/apps like we used to?

  8. #7
    Sencha User
    Join Date
    May 2010
    Posts
    12
    Answers
    1

    Default

    I create a controller only for this task, made this test and work for me:

    Code:
    //FavButtonController.js
    Ext.define('MyApp.controller.FavButtonController',{
        extend: 'Ext.app.Controller',
            
        init: function(){
            this.control({
                'button[action=fav]': {
                    click: this.favButtonHandler
                }
            });
        },
        
        favButtonHandler: function(){
            console.log('favButtonHandler');
        }
    });
    and added this controller to app
    Code:
    //app.js
    controllers: [..., 'FavButtonController']
    then in the views you can add the buttons
    Code:
    //MyView.js
    {
         xtype: 'button',
         text: 'Favorite',
         action: 'fav'
    }
    Last edited by ljparra; 9 Oct 2012 at 8:13 PM. Reason: add button code

  9. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    Hi Karan,

    You can refer to ljparra's solution in post #7. This is what I mean in my previous post.

  10. #9
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    15

    Default

    Thanks Guys.

    This seems to be the right solution. I'll give it a try and get back.

    One related question: How do I update the count back on the button? Should the button pass it's id as a part of the event?

  11. #10
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    With click event on button, the first argument passed to event handler is the button itself. See more information here http://docs.sencha.com/ext-js/4-1/#!...on-event-click

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •