Search code examples
javascripttreeviewyui

Extend YUI TreeView with Treeview Sortable


I'm using YUI3 to create an instance of Y.TreeView.

var treeview = new Y.TreeView({
        lazyRender: false,
        container: treeview,
        nodes: jsonTreeFile
});

Now I want to extend this object to use it with TreeView.Sortable, which mixes in Y.Tree.Sortable. The constructor is TreeView.Sortable () (See TreeView.Sortable Api ).

How do I do this, so I can use the TreeView.Sortable methods on the treeview object?

Here is the full context:

YUI({
    gallery: 'gallery-2013.07.31-22-47'}).use(
    'gallery-sm-treeview', 'gallery-sm-treeview-sortable', function (Y) {

      // Create a new TreeView in container with nodes.
      treeview = new Y.TreeView({
        lazyRender: false,
        container: treeview,
        nodes: jsonTreeFile
      });

      // Render the treeview inside the #treeId element.
      treeview.render();

      // Now, how do I extend and sort the treeview object?

}); 

Solution

  • In case anyone is interested in the solution, this is how subclassing in YUI works (thanks to Ryan Grove for helping out: codepen.io/rgrove/pen/vAuep)

    YUI({
        gallery: 'gallery-2013.07.31-22-47'
    }).use('gallery-sm-treeview', 'gallery-sm-treeview-sortable', function (Y) {
    
      var SortedTreeView = Y.Base.create('sortedTreeView', Y.TreeView, [Y.TreeView.Sortable], {
        sortComparator: function (node) {
          return node.label;
        }
      });
    
      var treeview = new SortedTreeView({
        container: '#treeview',
        nodes: [{label: 'hi!'}, {label: 'hello!'}]
      });
    
      treeview.render();
    });