Hey, I need some help with onyx.Popup and setBounds().

Hi, I'm pretty new using enyo and I want to make something but I don't know if it's possible. The app I'm trying to do has an enyo.List, beside this list there's another enyo control that has an onyx.Popup what I want to do is that when the user taps any item of the list, the popup shows right next to the item. I don't use showAtEvent because that would show it where the user clicked and thats not what I mean, what I mean is to show the popup inside the popup area where i declared the popup originally but with it's Y coordinate aligned with the tapped item's top. I tried using inEvent.originator.getBounds() in the ontap handler to get the coordinates of the item but it always returns something like {top: undefined, bottom: undefined, left: ......} it's undefined, then I tried using inEvent.clientY but that is never precise it always returns different values very close but not enough. So can anyone help me doing this? is there any way this is supposed to be done in enyo?


  • Could you maybe modify the events to set the X cord to the popups containers X cord?
    the showAtEvent is similar to:
    showAtEvent: function (e, offset) {
    // Calculate our ideal target based on the event position and offset
    var p = {
    left: e.centerX || e.clientX || e.pageX,
    top: e.centerY || e.clientY || e.pageY
    if (offset) {
    p.left += offset.left || 0;
    p.top += offset.top || 0;
    So, looks like it looks for centerX, then clientX, then pageX.
    So you could probably override 1 or all those params before passing it to showAtEvent
  • That's kinda what I'm doing but this clientY is the Y coordinate from where the user clicked not the item's top.
  • The problem isn't showing the popup anywhere, the problem is getting the right position based on the selected item's bounds. Any ideas?
  • edited September 2014
    Browsing through the list source, i see these function:
    //* Gets node height, width, top, and left values.
    getNodeStyle: function(index) {
    var node = this.$.generator.fetchRowNode(index);
    if (!node) {
    var offset = this.getRelativeOffset(node, this.hasNode());
    var dimensions = enyo.dom.getBounds(node);
    return {h: dimensions.height, w: dimensions.width, left: offset.left, top: offset.top};
    or this one:
    //* Gets the position of a node (identified via index) on the page.
    getIndexPosition: function(index) {
    return enyo.dom.calcNodePosition(this.$.generator.fetchRowNode(index));
    Maybe try one of those and see if it gets what you want?
Sign In or Register to comment.