Google Closure Library - Adding non-TreeNode children to a TreeNode

I'm using the Google Closure Library and goog.ui.tree in particular to build a tree structure GUI component. It works pretty well out of the box, but I'd like to add a few extra controls to each of the leaves (goog.ui.Checkboxes in particular).

The problem is that Component.addChild has been overridden in BaseNode so that each added child is trea开发者_StackOverflow社区ted as a child tree node as opposed to a child component. In effect plenty of errors are thrown if you try to add anything else than an actual tree node as a child, as these children are traversed and BaseNode-specific functions are called on them.

I must admit I'm quite a Closure newb, but I reckon there must be some workaround for this, right? Essentially all I want to do is have a bunch of checkboxes appear next to each leaf in my tree.

Thanks, Andreas

In addition to the more general comment I left on your question, I found the following property on goog.ui.tree.BaseNode that may work for simple needs:

/**
 * Html that can appear after the label (so not inside the anchor).
 * @type {string}
 * @private
 */
goog.ui.tree.BaseNode.prototype.afterLabelHtml_ = '';

This can be set using:

/**
 * Sets the html that appears after the label. This is useful if you want to
 * put extra UI on the row of the label but not inside the anchor tag.
 * @param {string} html The html.
 */
goog.ui.tree.BaseNode.prototype.setAfterLabelHtml = function(html)

Looks like the TreeNode parent class implementation - goog.ui.tree.BaseNode - has violated some contract related to the ancestor class Component.

It is clear that goog.ui.tree.BaseNode.addChildAt method override changed the parent specification since it ignores the render boolean attribute.

The work around is to force the rendering by expanding the tree nodes that you need immediately for use. After you can collapse them again.

Implementation is a little bit crappy for this component.

tree = new goog.ui.tree.TreeControl( 'dammed useless node if show root = false' );
tree.setShowRootNode( false );
tree.render(); // at doc body

ref = new goog.ui.tree.TreeNode( 'click me' );
tree.add( ref );
tree.expandAll();
// now you can attach your checkbox
cb = new goog.ui.Checkbox( true );
cb.renderBefore( ref.getLabelElement() );
tree.collapseAll();