Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Location
    Birmingham, AL
    Posts
    88
    Vote Rating
    1
    re_buchanan is on a distinguished road

      0  

    Default Inter-component Communication and App Design

    Inter-component Communication and App Design


    I've been working seriously on learning Ext JS for about a week now and it's mostly coming together pretty well for me. But I'm a bit stuck on figuring out how to pass events around (or, perhaps, how Ext passes them about); in other words, how to do inter-component communication. I've read both Writing a Big Application in Ext (Parts 1 & 2) and I've studied Saki's Ext Example. So far as I can determine, the key bits in his example are as follows:
    Code:
    tpl:new Ext.XTemplate('<tpl for="links"><a class="examplelink" href="{href}">{text}</a></tpl>')
    (add a custom classname to the items whose events I want to capture so that they can be "identified" later)

    Code:
            
    this.linksPanel.on({
                 scope:this
                ,render:function() {
                    this.linksPanel.body.on({
                         scope:this
                        ,click:this.onLinkClick
                        ,delegate:'a.examplelink'
                        ,stopEvent:true
                    });
                }
            });
    (I really have no understanding of exactly what this is doing, but it seems to be the key to getting the 'linkClick' events out to the parent)

    Code:
    ,onLinkClick:function(e, t) {
            var title = t.innerHTML;
            var tab = this.tabPanel.items.find(function(i){return i.title === title;});
            if(!tab) {
                tab = this.tabPanel.add({
                     title:title
                    ,layout:'fit'
                    ,activate:true
                });
            }
            this.tabPanel.setActiveTab(tab);
     
        } // eo function onLinkClick
    (this is, obviously, what is ultimately handling the events)

    So here are my questions:

    1. What exactly is happenning in the 2nd snippet above?
    2. Is this the only way to do interprocess communication?
    3. Is this the best way to do interprocess communication?
    4. Are there any other Examples, FAQs, Posts, etc. where I might find more info on this topic?

    Thanks,

    Ron

    Thanks
    Last edited by re_buchanan; 20 Feb 2009 at 4:37 AM. Reason: I got logged out before I was done

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    I think the key thing to take away is that of "Observable" or events. You don't call methods directly, instead you subscribe and publish events. By using events you don't break your app just because the implementation changes. Think of the analogy if a tree falls in the woods and no one is there to here it, does it still make a sound?

    So snippet 2 above is adding a listener (the "on" is the same as addListener). So you're saying I want to listen to X. When X occurs do Y. Sometimes you may just want a particular Component to listen to something and then do something. Other times you may want to centralize the observations (application wide monitoring).

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2009
    Location
    Birmingham, AL
    Posts
    88
    Vote Rating
    1
    re_buchanan is on a distinguished road

      0  

    Default


    Thanks for the response. I think I pulled the trigger early when I posted this: shortly afterward I was continuing to look around for info on this topic and came across quite a bit on Observable, PageBus and other info about message buses. Nonetheless, I appreciate your reply as it confirms that Observable is the path I most likely want to follow.

Thread Participants: 1