View Full Version : Component communication

2 Apr 2012, 3:39 AM
I am trying to build anapp but I have been stuck in the component communication concept. Themain idea of my app is to have a “viewport” that will have eastand center sections. In the east section there will be a tree panelthat will represent the full name of “members”. The centersection will be a container that will hold tab-panels. Each tab-panelwill contain three (3) panels as a border layout: center, west andsouth. Each tab-panel will present info for each member: center willshow a biography of a member, east will show related to a memberitems (books, cds, journals, etc) and the south will show apreview-summary of related items. The tree will be loaded from itsown table (database) as also books, cds and journal. So, the flow is:click a node from the tree (member name) then open up a tab-panel. Init, at the center a biography of the member will show up, at the eastsection related items (as links maybe) show up and, finally if youclick one of the links (related items) a preview-summary will appearat the south section.
The question is how can Iload the related data in these different components? Is there a clearway (pattern) the above components to communicate seamlessly and loaddata?
My code is in an attachedzip file.
I don't need anyone towrite my code but, I need some advices and hints in order to move on!
With respect,

2 Apr 2012, 4:03 AM
In order to maintain a separation of concerns, as a general rule, I only allow communication between components at the controller level, by getting other controllers and calling methods on them.

So in your example, the member tree's Controller receives a select event, it gets the member view's Controller from the Ext.app.Application (which I store as a global), and calls something like 'load member with id'.

The member view's Controller then async loads that member's data, including related Models eg for your east section. The server returns nested json. on success the controller loads the 'form' with the Member model (if not editing use Display fields) and the east and south views with the member's related stores (binding them to a dataview or a grid).

Kind of abstract for sure, but I hope you get the idea.

2 Apr 2012, 8:01 AM
Thank you for your answer,
Indeed, that is the proper way of how to handle data “distribution” in an Ext app. The point is that I cannot find a way to implement it. I cannot find any tutorial that showing how to do that! It will be very helpful if you know a website to find such info to point me there.
Thank you again,

3 Apr 2012, 4:47 AM
Yea, sorry I don't know of any websites either. I figured this approach out by myself, which means hopefully you can too.

Start from the MVC examples and work from there. PM me if you post again and need some specific pointers.

3 Apr 2012, 5:23 AM
Thank you,
I will give a try to MVC. If I face a problem i will PM you.