We should probably add some documentation regarding containers and controlParents
Today I ran into some problems while refactoring part of our UI library. I solved them, but it took quite a bit of digging around in the source. My case was as follows.
I have a PopupDecorator component, which loosely couples an Activator component to a ContextualPopup component. If the Activator is clicked, the Popup opens or closes, pretty similar to the way it's done in Onyx.
To render content inside the Popup, I wanted to use the
Next up, I wanted to create a PopupMenu kind. This would be a sub-kind of the PopupDecorator that puts a ScrollingMenu inside the ContextualPopup. The content defined in
In order to render my ScrollingMenu into the ContextualPopup, I would need to set the Popup to be the PopupMenu's
The solution I came up with was the following:
- PopupDecorator overrides
- PopupMenu overrides
-
This works, and is actually quite powerful, but I don't see it documented anywhere. It probably should be, because it seems like a very fundamental property of the framework.
Another way to make my ScrollingMenu render inside of the ContextualPopup, would be to set the Popup instance as the
I have a PopupDecorator component, which loosely couples an Activator component to a ContextualPopup component. If the Activator is clicked, the Popup opens or closes, pretty similar to the way it's done in Onyx.
To render content inside the Popup, I wanted to use the
PopupDecorator.components property. So, I set the controlParentName of my PopupDecorator to the name of the ContextualPopup instance and all was good.Next up, I wanted to create a PopupMenu kind. This would be a sub-kind of the PopupDecorator that puts a ScrollingMenu inside the ContextualPopup. The content defined in
PopupMenu.components should be rendered inside the client of the Scroller of the ScrollingMenu. This is where things got complicated...In order to render my ScrollingMenu into the ContextualPopup, I would need to set the Popup to be the PopupMenu's
controlParent. But once the ScrollingMenu is rendered, controlParent should change tot the ScrollingMenu, so it can cascade the content all the way down to the client of it's scroller.The solution I came up with was the following:
- PopupDecorator overrides
enyo.Component.createChrome to create the Activator and ContextualPopup. It then sets the controlParent to the ContextualPopup instance.- PopupMenu overrides
PopupDecorator.createChrome to create the ScrollingMenu after the Activator and ContextualPopup have been created. It then sets the controlParent to the ScrollingMenu instance.-
enyo.Component.createClientComponents will create the content and it will be passed down to the client of the ScrollingMenu's scroller.This works, and is actually quite powerful, but I don't see it documented anywhere. It probably should be, because it seems like a very fundamental property of the framework.
Another way to make my ScrollingMenu render inside of the ContextualPopup, would be to set the Popup instance as the
container of the menu when creating the ScrollingMenu component. Are there any side-effects to using the container property on the child rather than using the controlParent property on the ancestor? If so, this should probably also be documented. Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!