Print Friendly

Class Ext.tree.TreePanel

Package:Ext.tree
Class:TreePanel
Extends:Tree
Defined In:TreePanel.js

Properties   -  Methods   -  Events   -  Config Options

Public Properties

Property Defined By
  dragZone : Ext.tree.TreeDragZone TreePanel
The dragZone used by this tree if drag is enabled
  dropZone : Ext.tree.TreeDropZone TreePanel
The dropZone used by this tree if drop is enabled
  id : Object TreePanel
Read-only. The id of the container element becomes this TreePanel's id.
  root : Node Tree
The root node for this tree

Public Methods

Method Defined By
  TreePanel(String/HTMLElement/Element el, Object config) TreePanel
  addEvents(Object object) : void Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
  addListener(String eventName, Function handler, [Object scope], [Object options]) : void Observable
Appends an event handler to this component
  collapseAll() : void TreePanel
Collapse all nodes
  expandAll() : void TreePanel
Expand all nodes
  expandPath(String path, [String attr], [Function callback]) : void TreePanel
Expands a specified path in this TreePanel. A path can be retrieved from a node with Ext.data.Node.getPath
  fireEvent(String eventName, Object... args) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  getEl() : void TreePanel
Returns the container element for this TreePanel
  getLoader() : void TreePanel
Returns the default TreeLoader for this TreePanel
  getNodeById(String id) : Node Tree
Gets a node in this tree by its id
  getRootNode() : Node Tree
Returns this root node for this tree
  getSelectionModel() : void TreePanel
Returns the selection model used by this TreePanel
  hasListener(String eventName) : Boolean Observable
Checks to see if this object is currently listening for a specified event
  on(String eventName, Function handler, [Object options]) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  removeListener(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener
  render() : void TreePanel
Trigger rendering of this TreePanel
  selectPath(String path, [String attr], [Function callback]) : void TreePanel
Selects the node in this tree at the specified path. A path can be retrieved from a node with Ext.data.Node.getPath
  setRootNode(Node node) : Node Tree
Sets the root node for this tree
  un(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener (shorthand for removeListener)

Public Events

Event Defined By
  append : (Tree tree, Node parent, Node node, Number index) Tree
Fires when a new child node is appended to a node in this tree.
  beforeappend : (Tree tree, Node parent, Node node) Tree
Fires before a new child is appended to a node in this tree, return false to cancel the append.
  beforechildrenrendered : (Node node) TreePanel
Fires right before the child nodes for a node are rendered
  beforeclick : (Node node, Ext.EventObject e) TreePanel
Fires before click processing on a node. Return false to cancel the default action.
  beforecollapse : (Node node, Boolean deep, Boolean anim) TreePanel
Fires before a node is collapsed, return false to cancel.
  beforeexpand : (Node node, Boolean deep, Boolean anim) TreePanel
Fires before a node is expanded, return false to cancel.
  beforeinsert : (Tree tree, Node parent, Node node, Node refNode) Tree
Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
  beforeload : (Node node) TreePanel
Fires before a node is loaded, return false to cancel
  beforemove : (Tree tree, Node node, Node oldParent, Node newParent, Number index) Tree
Fires before a node is moved to a new location in the tree. Return false to cancel the move.
  beforenodedrop : (Object dropEvent) TreePanel
Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The drop...
  beforeremove : (Tree tree, Node parent, Node node) Tree
Fires before a child is removed from a node in this tree, return false to cancel the remove.
  click : (Node node, Ext.EventObject e) TreePanel
Fires when a node is clicked
  collapse : (Node node) TreePanel
Fires when a node is collapsed
  contextmenu : (Node node, Ext.EventObject e) TreePanel
Fires when a node is right clicked
  dblclick : (Node node, Ext.EventObject e) TreePanel
Fires when a node is double clicked
  disabledchange : (Node node, Boolean disabled) TreePanel
Fires when the disabled status of a node changes
  dragdrop : (Ext.tree.TreePanel this, Ext.tree.TreeNode node, DD dd, event e) TreePanel
Fires when a dragged node is dropped on a valid DD target
  enddrag : (Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e) TreePanel
Fires when a drag operation is complete
  expand : (Node node) TreePanel
Fires when a node is expanded
  insert : (Tree tree, Node parent, Node node, Node refNode) Tree
Fires when a new child node is inserted in a node in this tree.
  load : (Node node) TreePanel
Fires when a node is loaded
  move : (Tree tree, Node node, Node oldParent, Node newParent, Number index) Tree
Fires when a node is moved to a new location in the tree
  nodedragover : (Object dragOverEvent) TreePanel
Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent ...
  nodedrop : (Object dropEvent) TreePanel
Fires after a DD object is dropped on a node in this tree. The dropEvent passed to handlers has the following propert...
  remove : (Tree tree, Node parent, Node node) Tree
Fires when a child node is removed from a node in this tree.
  startdrag : (Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e) TreePanel
Fires when a node starts being dragged
  textchange : (Node node, String text, String oldText) TreePanel
Fires when the text for a node is changed

Config Options

Config Options Defined By
  animate : Boolean TreePanel
true to enable animated expand/collapse
  containerScroll : Boolean TreePanel
true to register this container with ScrollManager
  ddAppendOnly : String TreePanel
True if the tree should only allow append drops (use for trees which are sorted)
  ddGroup : String TreePanel
The DD group this TreePanel belongs to
  ddScroll : Boolean TreePanel
true to enable YUI body scrolling
  dragConfig : Object TreePanel
Custom config to pass to the Ext.tree.TreeDragZone instance
  dropConfig : Object TreePanel
Custom config to pass to the Ext.tree.TreeDropZone instance
  enableDD : Boolean TreePanel
true to enable drag and drop
  enableDrag : Boolean TreePanel
true to enable just drag
  enableDrop : Boolean TreePanel
true to enable just drop
  hlColor : String TreePanel
The color of the node highlight (defaults to C3DAF9)
  hlDrop : Boolean TreePanel
false to disable node highlight on drop (defaults to true)
  lines : Boolean TreePanel
false to disable tree lines (defaults to true)
  loader : Boolean TreePanel
A TreeLoader for use with this TreePanel
  rootVisible : Boolean TreePanel
false to hide the root node (defaults to true)
  selModel : Boolean TreePanel
A tree selection model to use with this TreePanel (defaults to a Ext.tree.DefaultSelectionModel)
  singleExpand : Boolean TreePanel
true if only 1 node per branch may be expanded

Property Details

dragZone

public Ext.tree.TreeDragZone dragZone
The dragZone used by this tree if drag is enabled
This property is defined by TreePanel.

dropZone

public Ext.tree.TreeDropZone dropZone
The dropZone used by this tree if drop is enabled
This property is defined by TreePanel.

id

public Object id
Read-only. The id of the container element becomes this TreePanel's id.
This property is defined by TreePanel.

root

public Node root
The root node for this tree
This property is defined by Tree.

Constructor Details

TreePanel

public function TreePanel(String/HTMLElement/Element el, Object config)
Parameters:
  • el : String/HTMLElement/Element
    The container element
  • config : Object

Method Details

addEvents

public function addEvents(Object object)
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:
  • object : Object
    The object from which to copy events
Returns:
  • void
This method is defined by Observable.

addListener

public function addListener(String eventName, Function handler, [Object scope], [Object options])
Appends an event handler to this component
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} True to prevent the default action
    • stopPropagation {Boolean} True to prevent event propagation
    • normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
    • delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.
    • single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.

    Combining Options
    Using the options argument, it is possible to combine different types of listeners:

    A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

    Code: 
    el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });

    The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

    Attaching multiple handlers in 1 call
    Code: 

    el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });

    Or a shorthand syntax:
    Code: 

    el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
Returns:
  • void
This method is defined by Observable.

collapseAll

public function collapseAll()
Collapse all nodes
Parameters:
  • None.
Returns:
  • void
This method is defined by TreePanel.

expandAll

public function expandAll()
Expand all nodes
Parameters:
  • None.
Returns:
  • void
This method is defined by TreePanel.

expandPath

public function expandPath(String path, [String attr], [Function callback])
Expands a specified path in this TreePanel. A path can be retrieved from a node with Ext.data.Node.getPath
Parameters:
  • path : String
  • attr : String
    (optional) The attribute used in the path (see Ext.data.Node.getPath for more info)
  • callback : Function
    (optional) The callback to call when the expand is complete. The callback will be called with (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
Returns:
  • void
This method is defined by TreePanel.

fireEvent

public function fireEvent(String eventName, Object... args)
Fires the specified event with the passed parameters (minus the event name).
Parameters:
  • eventName : String
  • args : Object...
    Variable number of parameters are passed to handlers
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true
This method is defined by Observable.

getEl

public function getEl()
Returns the container element for this TreePanel
Parameters:
  • None.
Returns:
  • void
This method is defined by TreePanel.

getLoader

public function getLoader()
Returns the default TreeLoader for this TreePanel
Parameters:
  • None.
Returns:
  • void
This method is defined by TreePanel.

getNodeById

public function getNodeById(String id)
Gets a node in this tree by its id
Parameters:
  • id : String
Returns:
  • Node
This method is defined by Tree.

getRootNode

public function getRootNode()
Returns this root node for this tree
Parameters:
  • None.
Returns:
  • Node
This method is defined by Tree.

getSelectionModel

public function getSelectionModel()
Returns the selection model used by this TreePanel
Parameters:
  • None.
Returns:
  • void
This method is defined by TreePanel.

hasListener

public function hasListener(String eventName)
Checks to see if this object is currently listening for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
This method is defined by Observable.

on

public function on(String eventName, Function handler, [Object options])
Appends an event handler to this element (shorthand for addListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • options : Object
    (optional)
Returns:
  • void
This method is defined by Observable.

purgeListeners

public function purgeListeners()
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
This method is defined by Observable.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])
Removes a listener
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

render

public function render()
Trigger rendering of this TreePanel
Parameters:
  • None.
Returns:
  • void
This method is defined by TreePanel.

selectPath

public function selectPath(String path, [String attr], [Function callback])
Selects the node in this tree at the specified path. A path can be retrieved from a node with Ext.data.Node.getPath
Parameters:
  • path : String
  • attr : String
    (optional) The attribute used in the path (see Ext.data.Node.getPath for more info)
  • callback : Function
    (optional) The callback to call when the selection is complete. The callback will be called with (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
Returns:
  • void
This method is defined by TreePanel.

setRootNode

public function setRootNode(Node node)
Sets the root node for this tree
Parameters:
  • node : Node
Returns:
  • Node
This method is defined by Tree.

un

public function un(String eventName, Function handler, [Object scope])
Removes a listener (shorthand for removeListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

Event Details

append

public event append
Fires when a new child node is appended to a node in this tree.
Subscribers will be called with the following parameters:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The newly appended node
  • index : Number
    The index of the newly appended node
This event is defined by Tree.

beforeappend

public event beforeappend
Fires before a new child is appended to a node in this tree, return false to cancel the append.
Subscribers will be called with the following parameters:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node to be appended
This event is defined by Tree.

beforechildrenrendered

public event beforechildrenrendered
Fires right before the child nodes for a node are rendered
Subscribers will be called with the following parameters:
  • node : Node
    The node
This event is defined by TreePanel.

beforeclick

public event beforeclick
Fires before click processing on a node. Return false to cancel the default action.
Subscribers will be called with the following parameters:
  • node : Node
    The node
  • e : Ext.EventObject
    The event object
This event is defined by TreePanel.

beforecollapse

public event beforecollapse
Fires before a node is collapsed, return false to cancel.
Subscribers will be called with the following parameters:
  • node : Node
    The node
  • deep : Boolean
  • anim : Boolean
This event is defined by TreePanel.

beforeexpand

public event beforeexpand
Fires before a node is expanded, return false to cancel.
Subscribers will be called with the following parameters:
  • node : Node
    The node
  • deep : Boolean
  • anim : Boolean
This event is defined by TreePanel.

beforeinsert

public event beforeinsert
Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
Subscribers will be called with the following parameters:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node to be inserted
  • refNode : Node
    The child node the node is being inserted before
This event is defined by Tree.

beforeload

public event beforeload
Fires before a node is loaded, return false to cancel
Subscribers will be called with the following parameters:
  • node : Node
    The node being loaded
This event is defined by TreePanel.

beforemove

public event beforemove
Fires before a node is moved to a new location in the tree. Return false to cancel the move.
Subscribers will be called with the following parameters:
  • tree : Tree
    The owner tree
  • node : Node
    The node being moved
  • oldParent : Node
    The parent of the node
  • newParent : Node
    The new parent the node is moving to
  • index : Number
    The index it is being moved to
This event is defined by Tree.

beforenodedrop

public event beforenodedrop
Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent passed to handlers has the following properties:
  • tree - The TreePanel
  • target - The node being targeted for the drop
  • data - The drag data from the drag source
  • point - The point of the drop - append, above or below
  • source - The drag source
  • rawEvent - Raw mouse event
  • dropNode - Drop node(s) provided by the source OR you can supply node(s) to be inserted by setting them on this object.
  • cancel - Set this to true to cancel the drop.
Subscribers will be called with the following parameters:
  • dropEvent : Object
This event is defined by TreePanel.

beforeremove

public event beforeremove
Fires before a child is removed from a node in this tree, return false to cancel the remove.
Subscribers will be called with the following parameters:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node to be removed
This event is defined by Tree.

click

public event click
Fires when a node is clicked
Subscribers will be called with the following parameters:
  • node : Node
    The node
  • e : Ext.EventObject
    The event object
This event is defined by TreePanel.

collapse

public event collapse
Fires when a node is collapsed
Subscribers will be called with the following parameters:
  • node : Node
    The node
This event is defined by TreePanel.

contextmenu

public event contextmenu
Fires when a node is right clicked
Subscribers will be called with the following parameters:
  • node : Node
    The node
  • e : Ext.EventObject
    The event object
This event is defined by TreePanel.

dblclick

public event dblclick
Fires when a node is double clicked
Subscribers will be called with the following parameters:
  • node : Node
    The node
  • e : Ext.EventObject
    The event object
This event is defined by TreePanel.

disabledchange

public event disabledchange
Fires when the disabled status of a node changes
Subscribers will be called with the following parameters:
  • node : Node
    The node
  • disabled : Boolean
This event is defined by TreePanel.

dragdrop

public event dragdrop
Fires when a dragged node is dropped on a valid DD target
Subscribers will be called with the following parameters:
  • this : Ext.tree.TreePanel
  • node : Ext.tree.TreeNode
  • dd : DD
    The dd it was dropped on
  • e : event
    The raw browser event
This event is defined by TreePanel.

enddrag

public event enddrag
Fires when a drag operation is complete
Subscribers will be called with the following parameters:
  • this : Ext.tree.TreePanel
  • node : Ext.tree.TreeNode
  • e : event
    The raw browser event
This event is defined by TreePanel.

expand

public event expand
Fires when a node is expanded
Subscribers will be called with the following parameters:
  • node : Node
    The node
This event is defined by TreePanel.

insert

public event insert
Fires when a new child node is inserted in a node in this tree.
Subscribers will be called with the following parameters:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node inserted
  • refNode : Node
    The child node the node was inserted before
This event is defined by Tree.

load

public event load
Fires when a node is loaded
Subscribers will be called with the following parameters:
  • node : Node
    The node that was loaded
This event is defined by TreePanel.

move

public event move
Fires when a node is moved to a new location in the tree
Subscribers will be called with the following parameters:
  • tree : Tree
    The owner tree
  • node : Node
    The node moved
  • oldParent : Node
    The old parent of this node
  • newParent : Node
    The new parent of this node
  • index : Number
    The index it was moved to
This event is defined by Tree.

nodedragover

public event nodedragover
Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent passed to handlers has the following properties:
  • tree - The TreePanel
  • target - The node being targeted for the drop
  • data - The drag data from the drag source
  • point - The point of the drop - append, above or below
  • source - The drag source
  • rawEvent - Raw mouse event
  • dropNode - Drop node(s) provided by the source.
  • cancel - Set this to true to signal drop not allowed.
Subscribers will be called with the following parameters:
  • dragOverEvent : Object
This event is defined by TreePanel.

nodedrop

public event nodedrop
Fires after a DD object is dropped on a node in this tree. The dropEvent passed to handlers has the following properties:
  • tree - The TreePanel
  • target - The node being targeted for the drop
  • data - The drag data from the drag source
  • point - The point of the drop - append, above or below
  • source - The drag source
  • rawEvent - Raw mouse event
  • dropNode - Dropped node(s).
Subscribers will be called with the following parameters:
  • dropEvent : Object
This event is defined by TreePanel.

remove

public event remove
Fires when a child node is removed from a node in this tree.
Subscribers will be called with the following parameters:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node removed
This event is defined by Tree.

startdrag

public event startdrag
Fires when a node starts being dragged
Subscribers will be called with the following parameters:
  • this : Ext.tree.TreePanel
  • node : Ext.tree.TreeNode
  • e : event
    The raw browser event
This event is defined by TreePanel.

textchange

public event textchange
Fires when the text for a node is changed
Subscribers will be called with the following parameters:
  • node : Node
    The node
  • text : String
    The new text
  • oldText : String
    The old text
This event is defined by TreePanel.

Config Details

animate

animate : Boolean
true to enable animated expand/collapse
This config option is defined by TreePanel.

containerScroll

containerScroll : Boolean
true to register this container with ScrollManager
This config option is defined by TreePanel.

ddAppendOnly

ddAppendOnly : String
True if the tree should only allow append drops (use for trees which are sorted)
This config option is defined by TreePanel.

ddGroup

ddGroup : String
The DD group this TreePanel belongs to
This config option is defined by TreePanel.

ddScroll

ddScroll : Boolean
true to enable YUI body scrolling
This config option is defined by TreePanel.

dragConfig

dragConfig : Object
Custom config to pass to the Ext.tree.TreeDragZone instance
This config option is defined by TreePanel.

dropConfig

dropConfig : Object
Custom config to pass to the Ext.tree.TreeDropZone instance
This config option is defined by TreePanel.

enableDD

enableDD : Boolean
true to enable drag and drop
This config option is defined by TreePanel.

enableDrag

enableDrag : Boolean
true to enable just drag
This config option is defined by TreePanel.

enableDrop

enableDrop : Boolean
true to enable just drop
This config option is defined by TreePanel.

hlColor

hlColor : String
The color of the node highlight (defaults to C3DAF9)
This config option is defined by TreePanel.

hlDrop

hlDrop : Boolean
false to disable node highlight on drop (defaults to true)
This config option is defined by TreePanel.

lines

lines : Boolean
false to disable tree lines (defaults to true)
This config option is defined by TreePanel.

loader

loader : Boolean
A TreeLoader for use with this TreePanel
This config option is defined by TreePanel.

rootVisible

rootVisible : Boolean
false to hide the root node (defaults to true)
This config option is defined by TreePanel.

selModel

selModel : Boolean
A tree selection model to use with this TreePanel (defaults to a Ext.tree.DefaultSelectionModel)
This config option is defined by TreePanel.

singleExpand

singleExpand : Boolean
true if only 1 node per branch may be expanded
This config option is defined by TreePanel.
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.