4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.tree.TreePanel
15 * @extends Roo.data.Tree
17 * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
18 * @cfg {Boolean} lines false to disable tree lines (defaults to true)
19 * @cfg {Boolean} enableDD true to enable drag and drop
20 * @cfg {Boolean} enableDrag true to enable just drag
21 * @cfg {Boolean} enableDrop true to enable just drop
22 * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
23 * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
24 * @cfg {String} ddGroup The DD group this TreePanel belongs to
25 * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
26 * @cfg {Boolean} ddScroll true to enable YUI body scrolling
27 * @cfg {Boolean} containerScroll true to register this container with ScrollManager
28 * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
29 * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
30 * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
31 * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
32 * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
33 * @cfg {Boolean} loader A TreeLoader for use with this TreePanel
34 * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
35 * @cfg {Function} renderer Sets the rendering (formatting) function for the nodes. to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
36 * @cfg {Function} rendererTip Sets the rendering (formatting) function for the nodes hovertip to return HTML markup for the tree view. The render function is called with the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
39 * @param {String/HTMLElement/Element} el The container element
40 * @param {Object} config
42 Roo.tree.TreePanel = function(el, config){
50 loader = config.loader;
54 Roo.apply(this, config);
55 Roo.tree.TreePanel.superclass.constructor.call(this);
56 this.el = Roo.get(el);
57 this.el.addClass('x-tree');
60 this.setRootNode( Roo.factory(root, Roo.tree));
63 this.loader = Roo.factory(loader, Roo.tree);
66 * Read-only. The id of the container element becomes this TreePanel's id.
72 * Fires before a node is loaded, return false to cancel
73 * @param {Node} node The node being loaded
78 * Fires when a node is loaded
79 * @param {Node} node The node that was loaded
84 * Fires when the text for a node is changed
85 * @param {Node} node The node
86 * @param {String} text The new text
87 * @param {String} oldText The old text
92 * Fires before a node is expanded, return false to cancel.
93 * @param {Node} node The node
94 * @param {Boolean} deep
95 * @param {Boolean} anim
97 "beforeexpand" : true,
99 * @event beforecollapse
100 * Fires before a node is collapsed, return false to cancel.
101 * @param {Node} node The node
102 * @param {Boolean} deep
103 * @param {Boolean} anim
105 "beforecollapse" : true,
108 * Fires when a node is expanded
109 * @param {Node} node The node
113 * @event disabledchange
114 * Fires when the disabled status of a node changes
115 * @param {Node} node The node
116 * @param {Boolean} disabled
118 "disabledchange" : true,
121 * Fires when a node is collapsed
122 * @param {Node} node The node
127 * Fires before click processing on a node. Return false to cancel the default action.
128 * @param {Node} node The node
129 * @param {Roo.EventObject} e The event object
134 * Fires when a node with a checkbox's checked property changes
135 * @param {Node} this This node
136 * @param {Boolean} checked
141 * Fires when a node is clicked
142 * @param {Node} node The node
143 * @param {Roo.EventObject} e The event object
148 * Fires when a node is double clicked
149 * @param {Node} node The node
150 * @param {Roo.EventObject} e The event object
155 * Fires when a node is right clicked
156 * @param {Node} node The node
157 * @param {Roo.EventObject} e The event object
161 * @event beforechildrenrendered
162 * Fires right before the child nodes for a node are rendered
163 * @param {Node} node The node
165 "beforechildrenrendered":true,
168 * Fires when a node starts being dragged
169 * @param {Roo.tree.TreePanel} this
170 * @param {Roo.tree.TreeNode} node
171 * @param {event} e The raw browser event
176 * Fires when a drag operation is complete
177 * @param {Roo.tree.TreePanel} this
178 * @param {Roo.tree.TreeNode} node
179 * @param {event} e The raw browser event
184 * Fires when a dragged node is dropped on a valid DD target
185 * @param {Roo.tree.TreePanel} this
186 * @param {Roo.tree.TreeNode} node
187 * @param {DD} dd The dd it was dropped on
188 * @param {event} e The raw browser event
192 * @event beforenodedrop
193 * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
194 * passed to handlers has the following properties:<br />
195 * <ul style="padding:5px;padding-left:16px;">
196 * <li>tree - The TreePanel</li>
197 * <li>target - The node being targeted for the drop</li>
198 * <li>data - The drag data from the drag source</li>
199 * <li>point - The point of the drop - append, above or below</li>
200 * <li>source - The drag source</li>
201 * <li>rawEvent - Raw mouse event</li>
202 * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
203 * to be inserted by setting them on this object.</li>
204 * <li>cancel - Set this to true to cancel the drop.</li>
206 * @param {Object} dropEvent
208 "beforenodedrop" : true,
211 * Fires after a DD object is dropped on a node in this tree. The dropEvent
212 * passed to handlers has the following properties:<br />
213 * <ul style="padding:5px;padding-left:16px;">
214 * <li>tree - The TreePanel</li>
215 * <li>target - The node being targeted for the drop</li>
216 * <li>data - The drag data from the drag source</li>
217 * <li>point - The point of the drop - append, above or below</li>
218 * <li>source - The drag source</li>
219 * <li>rawEvent - Raw mouse event</li>
220 * <li>dropNode - Dropped node(s).</li>
222 * @param {Object} dropEvent
226 * @event nodedragover
227 * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
228 * passed to handlers has the following properties:<br />
229 * <ul style="padding:5px;padding-left:16px;">
230 * <li>tree - The TreePanel</li>
231 * <li>target - The node being targeted for the drop</li>
232 * <li>data - The drag data from the drag source</li>
233 * <li>point - The point of the drop - append, above or below</li>
234 * <li>source - The drag source</li>
235 * <li>rawEvent - Raw mouse event</li>
236 * <li>dropNode - Drop node(s) provided by the source.</li>
237 * <li>cancel - Set this to true to signal drop not allowed.</li>
239 * @param {Object} dragOverEvent
241 "nodedragover" : true
244 if(this.singleExpand){
245 this.on("beforeexpand", this.restrictExpand, this);
248 Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
250 animate: Roo.enableFx,
253 hlDrop : Roo.enableFx,
259 restrictExpand : function(node){
260 var p = node.parentNode;
262 if(p.expandedChild && p.expandedChild.parentNode == p){
263 p.expandedChild.collapse();
265 p.expandedChild = node;
270 setRootNode : function(node){
271 Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
272 if(!this.rootVisible){
273 node.ui = new Roo.tree.RootTreeNodeUI(node);
279 * Returns the container element for this TreePanel
286 * Returns the default TreeLoader for this TreePanel
288 getLoader : function(){
295 expandAll : function(){
296 this.root.expand(true);
302 collapseAll : function(){
303 this.root.collapse(true);
307 * Returns the selection model used by this TreePanel
309 getSelectionModel : function(){
311 this.selModel = new Roo.tree.DefaultSelectionModel();
313 return this.selModel;
317 * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
318 * @param {String} attribute (optional) Defaults to null (return the actual nodes)
319 * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
322 getChecked : function(a, startNode){
323 startNode = startNode || this.root;
326 if(this.attributes.checked){
327 r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
330 startNode.cascade(f);
335 * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
336 * @param {String} path
337 * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
338 * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
339 * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
341 expandPath : function(path, attr, callback){
343 var keys = path.split(this.pathSeparator);
344 var curNode = this.root;
345 if(curNode.attributes[attr] != keys[1]){ // invalid root
347 callback(false, null);
353 if(++index == keys.length){
355 callback(true, curNode);
359 var c = curNode.findChild(attr, keys[index]);
362 callback(false, curNode);
367 c.expand(false, false, f);
369 curNode.expand(false, false, f);
373 * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
374 * @param {String} path
375 * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
376 * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
377 * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
379 selectPath : function(path, attr, callback){
381 var keys = path.split(this.pathSeparator);
384 var f = function(success, node){
386 var n = node.findChild(attr, v);
401 this.expandPath(keys.join(this.pathSeparator), attr, f);
405 callback(true, this.root);
410 getTreeEl : function(){
415 * Trigger rendering of this TreePanel
419 return this; // stop it rendering more than once!!
422 this.innerCt = this.el.createChild({tag:"ul",
423 cls:"x-tree-root-ct " +
424 (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
426 if(this.containerScroll){
427 Roo.dd.ScrollManager.register(this.el);
429 if((this.enableDD || this.enableDrop) && !this.dropZone){
431 * The dropZone used by this tree if drop is enabled
432 * @type Roo.tree.TreeDropZone
434 this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
435 ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
438 if((this.enableDD || this.enableDrag) && !this.dragZone){
440 * The dragZone used by this tree if drag is enabled
441 * @type Roo.tree.TreeDragZone
443 this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
444 ddGroup: this.ddGroup || "TreeDD",
445 scroll: this.ddScroll
448 this.getSelectionModel().init(this);
450 console.log("ROOT not set in tree");
454 if(!this.rootVisible){
455 this.root.renderChildren();