2 Aug 2010 1:37 PM #1
Deep propagation of config options
I have encountered on several occasions an extensive layering of components that have ancestors that need to be customized depending on the circumstances.
Here is a brief "realish" example of what I mean:
* Module is the main component and created by our MVC view.
* Module contains a child component called Designer.
* Designer contains a child component called DesignerWindow.
* DesignerWindow contains a child component called DesignerForm.
* DesignerForm has a plugin called InsertLink.
* InsertLink contains a child component called SearchWindow.
* SearchWindow contains a child component called SearchGrid.
* SearchGrid has a url config option that defaults to '/module/search'
The linear hierarchy is:
Module > Designer > DesignerWindow > DesignerForm > InsertLink > SearchWindow > SearchGrid.
Now if a similar hierarchy is ever reused by Module BB but the url in the SearchGrid needs to change, then that config needs to be defined and propagated down the entire tree! That type of problem has plagued me for quite some time. Most of my modules are not that deep (3 layers on average) but I have a situation with 7 layers as above that has me spinning.
Does anybody have a better option than this? How do the other big apps tackle this? Thanks everybody!
2 Aug 2010 3:55 PM #2
Somewhere in the initComponent method of SearchGrid, do something like this:
this.findParentByType(<xtype of containing Module>).<url config property>
2 Aug 2010 8:28 PM #3
Hmmm...my colleague had a similar idea. I guess there are drawbacks to every approach but I was hoping to avoid the components having any knowledge of their ancestors.
Any other ideas or design approaches??
3 Aug 2010 12:09 PM #4
I was thinking more about your idea @azuroff and another drawback is the lack of readability of the code. If an option is only being used by a deeply nested child, the purpose is vague and the code is cryptic. Documentation becomes an absolute necessity.
I have actually encountered a similar issue with ExtJS grids in which a config option (e.g. trackMouseOver) in the grid is not actually used by the grid. The documentation does not mention this and without searching, you won't know that the view uses it.
At least with the propagation approach, you can follow the chain, however tedious it is.
Does anyone have an option C???
3 Aug 2010 12:59 PM #5
I'm not sure how else you would do it, though.
3 Aug 2010 1:26 PM #6
@azuroff Thx for the feedback. I appreciate it. Have you encountered this issue in your development before?
3 Aug 2010 2:18 PM #7
Not that deep. I think the deepest nesting our current application has is 4 levels -
window -> panel -> child panel -> component
but even in that case there's no configuration that we need to push all the way down to the lowest component.
4 Aug 2010 8:47 AM #8
I appear to be out of options because I just encountered a flaw in the findParent strategy. A window does not have a parent (i.e. ownerCt). Therefore, the findParentByType will not be able to bubble up past the window.
By monkeyotta in forum Ext 3.x: Help & DiscussionReplies: 5Last Post: 29 Jul 2009, 8:05 AM
By alexhu01 in forum Ext 2.x: Help & DiscussionReplies: 0Last Post: 7 Feb 2008, 7:23 AM
By hhkaos in forum Ext 2.x: Help & DiscussionReplies: 2Last Post: 29 Nov 2007, 8:40 AM
By fawzyj in forum Ext 1.x: Help & DiscussionReplies: 5Last Post: 14 Oct 2007, 2:07 PM
By Victor83 in forum Community DiscussionReplies: 1Last Post: 14 Aug 2007, 8:40 AM