How to call an EventType on a goog.ui.tree.Basenode?

Question

I am constructing a tree using the Google Closure Library. Now I want the nodes to expand on a single mouseclick, but I seem not to get it working.

I've tried calling goog.ui.component.EventType.SELECT, but it won't work.

At my tree-component class I've added the following event:

goog.events.listen(item, [goog.ui.Component.EventType.SELECT, goog.ui.tree.BaseNode.EventType.EXPAND], this.dispatchEvent, false, this);

And at my class calling the function i've added:

goog.events.listen(this._tree, [goog.ui.Component.EventType.SELECT, goog.ui.tree.BaseNode.EventType.EXPAND], this.treeClick, false, this)

Any suggestions on how I could expand my node with a single click?

Answer 1

I see that BaseNode is screwing up any click events:

/**
 * Handles a click event.
 * @param {!goog.events.BrowserEvent} e The browser event.
 * @protected
 * @suppress {underscore}
 */
goog.ui.tree.BaseNode.prototype.onClick_ = goog.events.Event.preventDefault;

When adding this code to the goog/demos/tree/demo.html:

   goog.ui.tree.BaseNode.prototype.onClick_ = function (e) {
       var qq = this.expanded_?this.collapse():this.expand();
   };

The tree control expands and collapses on one click.

Tried to extend goog.ui.tree.TreeControl and override createNode to return a custom goog.ui.tree.TreeNode that overrides onClick but could not do it without getting errors. In theory you could create your custom TreeControl that expands and collapses on one click.

If you want to support non collapsable content and other features I guess you have to trigger some sort of event instead of just extend or callapse the TreeNode.

[update]

After some fiddling I got it working by subclassing TreeControl and TreeNode added the following code to goog/demos/tree/demo.html

/**
 * This creates a myTreeControl object. A tree control provides a way to
 * view a hierarchical set of data.
 * @param {string} html The HTML content of the node label.
 * @param {Object=} opt_config The configuration for the tree. See
 *    goog.ui.tree.TreeControl.defaultConfig. If not specified, a default config
 *    will be used.
 * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
 * @constructor
 * @extends {goog.ui.tree.BaseNode}
 */
  var myTreeControl = function (html, opt_config, opt_domHelper) {
      goog.ui.tree.TreeControl.call(this, html, opt_config, opt_domHelper);
  };
  goog.inherits(myTreeControl, goog.ui.tree.TreeControl);
  /**
   * Creates a new myTreeNode using the same config as the root.
   * myTreeNode responds on single clicks
   * @param {string} html The html content of the node label.
   * @return {goog.ui.tree.TreeNode} The new item.
   * @override
   */
  myTreeControl.prototype.createNode = function (html) {
      return new myTreeNode(html || '', this.getConfig(),
          this.getDomHelper());
  };
/**
 * A single node in the myTreeControl.
 * @param {string} html The html content of the node label.
 * @param {Object=} opt_config The configuration for the tree. See
 *    goog.ui.tree.TreeControl.defaultConfig. If not specified, a default config
 *    will be used.
 * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
 * @constructor
 * @extends {goog.ui.tree.BaseNode}
 */
 var myTreeNode = function (html, opt_config, opt_domHelper) {
      goog.ui.tree.TreeNode.call(this,html, opt_config, opt_domHelper)
  }
  goog.inherits(myTreeNode, goog.ui.tree.TreeNode);
  /**
   * Handles a click event.
   * @param {!goog.events.BrowserEvent} e The browser event.
   * @override
   */
  myTreeNode.prototype.onClick_ = function (e) {
      goog.base(this, "onClick_", e);
      this.onDoubleClick_(e);
  };

Changed the creation of the tree variable:

tree = new myTreeControl('root', treeConfig);

Works on single clicks and have not noticed any other things breaking. I've added the annotations so it'll compile easier. You might put the declarations in a separate file with a goog.provide.

Too bad the handleMouseEvent_ of TreeControl is private or you'll just override that one but you can't without changing either TreeControl source or getting compile errors/warnings. Ach wel, jammer.