Can't find documentation for container()

In the codebase I'm currently working upon, I see this.container.getBounds()... but I can not find container in the API docs and only barely mentioned in the tutorials etc. Even docs are not very helpful either... other than to say this "container" thing exists.

The best I can fathom is that it is analogous to owner: foo .. So... moving-on with a "container is a black-box" hypothesis... i.e. using .container.getBounds() on a FittableRows kind (not knowing what or how container works, nor what methods I can call upon it)... I get height, left, top and width all undefined.

Please advise.


  • Check out UiComponent where the container property is defined. In general, you shouldn't need to reference the container of a control because you're breaking encapsulation. If you do determine you need to do it, you'll ideally already know what kind of thing your container is so you'll know what methods are available.

    At a minimum, you can probably safely assume that the object has the methods available on Control.
  • Why would the values be undefined? The component not being rendered at the point of the call?
  • edited May 2014
    this.container is either a property of enyo.Layout instance (can be found on enyo/source/kernel/Layout.js) or a published property of enyo.UiComponent (can be found on enyo/source/kernel/UiComponent .js) .

    A snippet of enyo.Layout constructor:

    constructor: function(inContainer) { this.container = inContainer; if (inContainer) { inContainer.addClass(this.layoutClass); } }
    This container points to the subkind of enyo.Layout from which the instance is created or to the instance of a UiComponent subkind. For example if you ll create a enyo.FittableColumns instance, the container will be that instance.

    Now lets take a look of the this.container.getBounds() function which inherits from enyo.Control .

    // enyo.Control.prototype.getBounds function () { var n = this.node || this.hasNode(); var b = enyo.dom.getBounds(n); return b || {left: undefined, top: undefined, width: undefined, height: undefined}; } //enyo.dom.getBounds function (n) { if (n) { return {left: n.offsetLeft, top: n.offsetTop, width: n.offsetWidth, height: n.offsetHeight}; } else { return null; } }
    So first enyo.Control.prototype.getBounds tries to retrieve the node and then passes this.node as an argument to enyo.dom.getBounds.

    enyo.dom.getBounds checks if a node is passed and returns the node's bounds or null when no node is passed which ,in your case, null is what it returns.

    Since null - which is falsy - is returned to enyo.Control.prototype.getBounds from enyo.dom.getBounds the fallback {left: undefined, top: undefined, width: undefined, height: undefined} is returned.

    Why? This, as the above code states and as explained above, happens cause no node is passed.
    What is node? A DOM element.
    Where is it then? There is none because enyo creates nodes as DOM elements only after enyo.Control.prototype.render is called and generates the node through enyo.Control.prototype.renderNode
    How should you use it? Probably in the rendered method of the FittableRows(based on your example) would be the best fit. Everything has rendered and you get a node.
    What methods can I call upon this.container? this.container points to the enyo.Layout subkind you are using to put your components. If you are using enyo.FittableColumns, you ll get all the methods of it's instance which you can find in the API viewer under enyo.FittableColumns. Nothing more, nothing less.

    working example:

    var fitC = new enyo.FittableColumns({ name: "layout", components: [{ content: "T", rendered: function() { console.log(JSON.stringify(this.container.getBounds())); this.inherited(arguments) } }, { content: "T" }, { content: "T" }] }); fitC.renderInto(document.body);
Sign In or Register to comment.