docs/app/view/tree/Tree.js

   1 /**
   2  * The class tree
   3  */
   4 Ext.define('Docs.view.tree.Tree', {
   5     extend: 'Ext.tree.Panel',
   6     alias : 'widget.classtree',
   7     requires: [
   8         'Docs.view.HoverMenuButton',
   9         'Docs.Favorites',
  10         'Docs.History'
  11     ],
  12
  13     cls: 'class-tree iScroll',
  14     folderSort: true,
  15     useArrows: true,
  16     rootVisible: false,
  17
  18     border: false,
  19     bodyBorder: false,
  20
  21     initComponent: function() {
  22         this.addEvents(
  23             /**
  24              * @event
  25              * Fired when class in tree was clicked on and needs to be loaded.
  26              * @param {String} cls  name of the class.
  27              */
  28             "classclick"
  29         );
  30
  31         // Expand the main tree
  32         this.root.expanded = true;
  33         this.root.children[0].expanded = true;
  34
  35         this.on("itemclick", this.onItemClick, this);
  36
  37         this.dockedItems = [
  38             {
  39                 xtype: 'container',
  40                 layout: 'hbox',
  41                 dock: 'top',
  42                 margin: '0 0 15 0',
  43                 items: [
  44                     {
  45                         xtype: 'hovermenubutton',
  46                         cls: 'icon-fav sidebar',
  47                         text: 'Favorites',
  48                         menuCfg: {
  49                             cls: 'sidebar',
  50                             emptyText: 'No favorites',
  51                             showCloseButtons: true
  52                         },
  53                         store: Ext.getStore('Favorites'),
  54                         listeners: {
  55                             closeclick: function(cls) {
  56                                 Docs.Favorites.remove(cls);
  57                             }
  58                         }
  59                     },
  60                     {
  61                         xtype: 'hovermenubutton',
  62                         cls: 'icon-hist sidebar',
  63                         text: 'History',
  64                         menuCfg: {
  65                             cls: 'sidebar',
  66                             emptyText: 'No history',
  67                             showCloseButtons: true
  68                         },
  69                         store: Ext.getStore('History'),
  70                         listeners: {
  71                             closeclick: function(cls) {
  72                                 Docs.History.removeClass(cls);
  73                             }
  74                         }
  75                     }
  76                 ]
  77             }
  78         ];
  79
  80         this.callParent();
  81
  82         // Add links for favoriting classes
  83         //
  84         // We should be able to just listen the "render" event of tee,
  85         // but for some reason the tree nodes aren't quite ready when
  86         // "render" fires (setting text on node will cause an
  87         // exception because the actual dom node seems to be missing,
  88         // although setting text on the currently hidden nodes will
  89         // work).  I found a workaround by listening the "refresh"
  90         // event which seems to first fire when all tree nodes are
  91         // ready.  Most ceartanly a big hack.
  92         //
  93         // Additionally all this is done after callParent, because the
  94         // getRootNode() will work after initComponent has run.
  95         // Probably not neccessary, because "refresh" should happen
  96         // after that anyway, but just to play it safe.
  97         Docs.Favorites.setTree(this);
  98         Ext.getStore("Favorites").on("load", function() {
  99             this.getView().on("refresh", function(){
 100                 this.getRootNode().cascadeBy(this.addFavIcons, this);
 101             }, this, {single: true});
 102         }, this);
 103     },
 104
 105     addFavIcons: function(node) {
 106         if (node.get("leaf")) {
 107             var cls = node.raw.clsName;
 108             var show = Docs.Favorites.has(cls) ? "show" : "";
 109             node.set("text", node.get("text") + Ext.String.format('<a rel="{0}" class="fav {1}"></a>', cls, show));
 110             node.commit();
 111         }
 112     },
 113
 114     onItemClick: function(view, node, item, index, e) {
 115         var clsName = node.raw ? node.raw.clsName : node.data.clsName;
 116
 117         if (clsName) {
 118             if (e.getTarget(".fav")) {
 119                 var favEl = Ext.get(e.getTarget(".fav"));
 120                 if (favEl.hasCls('show')) {
 121                     Docs.Favorites.remove(clsName);
 122                 }
 123                 else {
 124                     Docs.Favorites.add(clsName);
 125                 }
 126             }
 127             else {
 128                 this.fireEvent("classclick", clsName);
 129             }
 130         }
 131         else if (!node.isLeaf()) {
 132             if (node.isExpanded()) {
 133                 node.collapse(false);
 134             }
 135             else {
 136                 node.expand(false);
 137             }
 138         }
 139     },
 140
 141     /**
 142      * Selects class node in tree by name.
 143      *
 144      * @param {String} cls
 145      */
 146     selectClass: function(cls) {
 147         var r = this.findRecordByClassName(cls);
 148         if (r) {
 149             this.getSelectionModel().select(r);
 150             r.bubble(function(n) {
 151                 n.expand();
 152             });
 153         }
 154     },
 155
 156     /**
 157      * Sets favorite status of class on or off.
 158      *
 159      * @param {String} cls  name of the class
 160      * @param {Boolean} enable  true to mark class as favorite.
 161      */
 162     setFavorite: function(cls, enable) {
 163         var r = this.findRecordByClassName(cls);
 164         if (r) {
 165             var show = enable ? "show" : "";
 166             r.set("text", r.get("text").replace(/class="fav *(show)?"/, 'class="fav '+show+'"'));
 167             r.commit();
 168         }
 169     },
 170
 171     findRecordByClassName: function(cls) {
 172         return this.getRootNode().findChildBy(function(n) {
 173             return cls === n.raw.clsName;
 174         }, this, true);
 175     }
 176 });