    Observable
      Node

# Class Ext.data.Node

Package: | Ext.data
Defined In: | Tree.js
Class: | Node
Subclasses: | TreeNode
Extends: | Observable

## Config Options

Config Options | Defined By
--- | ---
| id : String The id for this node. If one is not specified, one is generated. | Node
| leaf : Boolean true if this node is a leaf and does not have children | Node
| listeners : Object A config object containing one or more event handlers to be added to this object during initialization. This should ... A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. DOM events from ExtJs Components While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's `click` event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the Element after the Component has been rendered. A plugin can simplify this step:
    // Plugin is configured with a listeners config object.
    // The Component is appended to the argument list of all handler functions.
    Ext.DomObserver = Ext.extend(Object, {
        constructor: function(config) {
            this.listeners = config.listeners ? config.listeners : config;
        },

        // Component passes itself into plugin's init method
        init: function(c) {
            var p, l = this.listeners;
            for (p in l) {
                if (Ext.isFunction(l[p])) {
                    l[p] = this.createHandler(l[p], c);
                } else {
                    l[p].fn = this.createHandler(l[p].fn, c);
                }
            }

            // Add the listeners to the Element immediately following the render call
            c.render = c.render.createSequence(function() {
                var e = c.getEl();
                if (e) {
                    e.on(l);
                }
            });
        },

        createHandler: function(fn, c) {
            return function(e) {
                fn.call(this, e, c);
            };
        }
    });

    var combo = new Ext.form.ComboBox({

        // Collapse combo when its element is clicked on
        plugins: [ new Ext.DomObserver({
            click: function(evt, comp) {
                comp.collapse();
            }
        })],
        store: myStore,
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all'
    });
| Observable

## Public Properties

Property | Defined By
--- | ---
| attributes : Object The attributes supplied for the node. You can use this property to access any custom attributes you supplied. | Node
| childNodes : Array All child nodes of this node. | Node
| firstChild : Node The first direct child node of this node, or null if this node has no child nodes. | Node
| id : String The node id. | Node
| lastChild : Node The last direct child node of this node, or null if this node has no child nodes. | Node
| nextSibling : Node The node immediately following this node in the tree, or null if there is no sibling node. | Node
| parentNode : Node The parent node for this node. | Node
| previousSibling : Node The node immediately preceding this node in the tree, or null if there is no sibling node. | Node

## Public Methods

Method | Defined By
--- | ---
| Node( Object attributes ) Parameters: `attributes` : Object The attributes/config for the node Returns: void | Node
- | addEvents( Object|String o, string Optional. ) : void Adds the specified events to the list of events which this Observable may fire. Adds the specified events to the list of events which this Observable may fire. Parameters: `o` : Object|String Either an object with event names as properties with a value of `true` or the first event name string if multiple event names are being passed as separate parameters. `Optional.` : string Event name if multiple event names are being passed as separate parameters. Usage:
      this.addEvents('storeloaded', 'storecleared');
Returns: void | Observable
- | addListener( String eventName, Function handler, [Object scope], [Object options] ) : void Appends an event handler to this object. Appends an event handler to this object. Parameters: `eventName` : String The name of the event to listen for. `handler` : Function The method the event invokes. `scope` : Object (optional) The scope (`this` reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. `options` : Object (optional) An object containing handler configuration. properties. This may contain any of the following properties: scope : Object The scope (`this` reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. delay : Number The number of milliseconds to delay the invocation of the handler after the 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. target : Observable Only call the handler if the event was fired on the target Observable, not if the event was bubbled up from a child Observable. Combining Options Using the options argument, it is possible to combine different types of listeners: A delayed, one-time listener.
      myDataView.on('click', this.onClick, this, {
      single: true,
      delay: 100
      });
  Attaching multiple handlers in 1 call The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.
      myGridPanel.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:
      myGridPanel.on({
      'click' : this.onClick,
      'mouseover' : this.onMouseOver,
      'mouseout' : this.onMouseOut,
       scope: this
      });
Returns: void | Observable
| appendChild( Node/Array node ) : Node Insert node(s) as the last child node of this node. Insert node(s) as the last child node of this node. Parameters: `node` : Node/Array The node or Array of nodes to append Returns: `Node` The appended node if single append, or null if an array was passed | Node
| bubble( Function fn, [Object scope], [Array args] ) : void Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function will... Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function will be the args provided or the current node. If the function returns false at any point, the bubble is stopped. Parameters: `fn` : Function The function to call `scope` : Object (optional) The scope (`this` reference) in which the function is executed. Defaults to the current Node. `args` : Array (optional) The args to call the function with (default to passing the current Node) Returns: void | Node
| cascade( Function fn, [Object scope], [Array args] ) : void Cascades down the tree from this node, calling the specified function with each node. The arguments to the function w... Cascades down the tree from this node, calling the specified function with each node. The arguments to the function will be the args provided or the current node. If the function returns false at any point, the cascade is stopped on that branch. Parameters: `fn` : Function The function to call `scope` : Object (optional) The scope (`this` reference) in which the function is executed. Defaults to the current Node. `args` : Array (optional) The args to call the function with (default to passing the current Node) Returns: void | Node
| contains( Node node ) : Boolean Returns true if this node is an ancestor (at any point) of the passed node. Returns true if this node is an ancestor (at any point) of the passed node. Parameters: `node` : Node Returns: `Boolean` | Node
| destroy() : void Destroys the node. Destroys the node. Parameters: None. Returns: void | Node
| eachChild( Function fn, [Object scope], [Array args] ) : void Interates the child nodes of this node, calling the specified function with each node. The arguments to the function ... Interates the child nodes of this node, calling the specified function with each node. The arguments to the function will be the args provided or the current node. If the function returns false at any point, the iteration stops. Parameters: `fn` : Function The function to call `scope` : Object (optional) The scope (`this` reference) in which the function is executed. Defaults to the current Node in the iteration. `args` : Array (optional) The args to call the function with (default to passing the current Node) Returns: void | Node
| enableBubble( String/Array events ) : void Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present.... Enables events fired by this Observable to bubble up an owner hierarchy by calling `this.getBubbleTarget()` if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example:
    Ext.override(Ext.form.Field, {
        //  Add functionality to Field's initComponent to enable the change event to bubble
        initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
            this.enableBubble('change');
        }),

        //  We know that we want Field's events to bubble directly to the FormPanel.
        getBubbleTarget : function() {
            if (!this.formPanel) {
                this.formPanel = this.findParentByType('form');
            }
            return this.formPanel;
        }
    });

    var myForm = new Ext.formPanel({
        title: 'User Details',
        items: [{
            ...
        }],
        listeners: {
            change: function() {
                // Title goes red if form has been modified.
                myForm.header.setStyle('color', 'red');
            }
        }
    });
Parameters: `events` : String/Array The event name to bubble, or an Array of event names. Returns: void | Observable
| findChild( String attribute, Mixed value, [Boolean deep] ) : Node Finds the first child that has the attribute with the specified value. Finds the first child that has the attribute with the specified value. Parameters: `attribute` : String The attribute name `value` : Mixed The value to search for `deep` : Boolean (Optional) True to search through nodes deeper than the immediate children Returns: `Node` The found child or null if none was found | Node
| findChildBy( Function fn, [Object scope], [Boolean deep] ) : Node Finds the first child by a custom function. The child matches if the function passed returns true. Finds the first child by a custom function. The child matches if the function passed returns `true`. Parameters: `fn` : Function A function which must return `true` if the passed Node is the required Node. `scope` : Object (optional) The scope (`this` reference) in which the function is executed. Defaults to the Node being tested. `deep` : Boolean (Optional) True to search through nodes deeper than the immediate children Returns: `Node` The found child or null if none was found | Node
| fireEvent( String eventName, Object... args ) : Boolean Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse... Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble. Parameters: `eventName` : String The name of the event to fire. `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. | Observable
| getDepth() : Number Returns depth of this node (the root node has a depth of 0) Returns depth of this node (the root node has a depth of 0) Parameters: None. Returns: `Number` | Node
| getOwnerTree() : Tree Returns the tree this node is in. Returns the tree this node is in. Parameters: None. Returns: `Tree` | Node
| getPath( [String attr] ) : String Returns the path for this node. The path can be used to expand or select this node programmatically. Returns the path for this node. The path can be used to expand or select this node programmatically. Parameters: `attr` : String (optional) The attr to use for the path (defaults to the node's id) Returns: `String` The path | Node
| hasChildNodes() : Boolean Returns true if this node has one or more child nodes, else false. Returns true if this node has one or more child nodes, else false. Parameters: None. Returns: `Boolean` | Node
| hasListener( String eventName ) : Boolean Checks to see if this object has any listeners for a specified event Checks to see if this object has any listeners 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 | Observable
| indexOf( Node node ) : Number Returns the index of a child node Returns the index of a child node Parameters: `node` : Node Returns: `Number` The index of the node or -1 if it was not found | Node
| insertBefore( Node node, Node refNode ) : Node Inserts the first node before the second node in this nodes childNodes collection. Inserts the first node before the second node in this nodes childNodes collection. Parameters: `node` : Node The node to insert `refNode` : Node The node to insert before (if null the node is appended) Returns: `Node` The inserted node | Node
| isAncestor( Node node ) : Boolean Returns true if the passed node is an ancestor (at any point) of this node. Returns true if the passed node is an ancestor (at any point) of this node. Parameters: `node` : Node Returns: `Boolean` | Node
| isExpandable() : Boolean Returns true if this node has one or more child nodes, or if the expandable node attribute is explicitly specified as... Returns true if this node has one or more child nodes, or if the `expandable` node attribute is explicitly specified as true (see attributes), otherwise returns false. Parameters: None. Returns: `Boolean` | Node
| isFirst() : Boolean Returns true if this node is the first child of its parent Returns true if this node is the first child of its parent Parameters: None. Returns: `Boolean` | Node
| isLast() : Boolean Returns true if this node is the last child of its parent Returns true if this node is the last child of its parent Parameters: None. Returns: `Boolean` | Node
| isLeaf() : Boolean Returns true if this node is a leaf Returns true if this node is a leaf Parameters: None. Returns: `Boolean` | Node
| item( Number index ) : Node Returns the child node at the specified index. Returns the child node at the specified index. Parameters: `index` : Number Returns: `Node` | Node
| on( String eventName, Function handler, [Object scope], [Object options] ) : void Appends an event handler to this object (shorthand for addListener.) Appends an event handler to this object (shorthand for addListener.) Parameters: `eventName` : String The type of event to listen for `handler` : Function The method the event invokes `scope` : Object (optional) The scope (`this` reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. `options` : Object (optional) An object containing handler configuration. Returns: void | Observable
| purgeListeners() : void Removes all listeners for this object Removes all listeners for this object Parameters: None. Returns: void | Observable
| relayEvents( Object o, Array events ) : void Relays selected events from the specified Observable as if the events were fired by this. Relays selected events from the specified Observable as if the events were fired by `this`. Parameters: `o` : Object The Observable whose events this object is to relay. `events` : Array Array of event names to relay. Returns: void | Observable
| remove( Boolean destroy ) : Node Removes this node from its parent Removes this node from its parent Parameters: `destroy` : Boolean `true` to destroy the node upon removal. Defaults to `false`. Returns: `Node` this | Node
| removeAll( Boolean destroy ) : Node Removes all child nodes from this node. Removes all child nodes from this node. Parameters: `destroy` : Boolean `true` to destroy the node upon removal. Defaults to `false`. Returns: `Node` this | Node
| removeChild( Node node, Boolean destroy ) : Node Removes a child node from this node. Removes a child node from this node. Parameters: `node` : Node The node to remove `destroy` : Boolean `true` to destroy the node upon removal. Defaults to `false`. Returns: `Node` The removed node | Node
| removeListener( String eventName, Function handler, [Object scope] ) : void Removes an event handler. Removes an event handler. Parameters: `eventName` : String The type of event the handler was associated with. `handler` : Function The handler to remove. This must be a reference to the function passed into the addListener call. `scope` : Object (optional) The scope originally specified for the handler. Returns: void | Observable
| replaceChild( Node newChild, Node oldChild ) : Node Replaces one child node in this node with another. Replaces one child node in this node with another. Parameters: `newChild` : Node The replacement node `oldChild` : Node The node to replace Returns: `Node` The replaced node | Node
| resumeEvents() : void Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event... Resume firing events. (see suspendEvents) If events were suspended using the `queueSuspended` parameter, then all events fired during event suspension will be sent to any listeners now. Parameters: None. Returns: void | Observable
| setId( String id ) : void Changes the id of this node. Changes the id of this node. Parameters: `id` : String The new id for the node. Returns: void | Node
| sort( Function fn, [Object scope] ) : void Sorts this nodes children using the supplied sort function. Sorts this nodes children using the supplied sort function. Parameters: `fn` : Function A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order. `scope` : Object (optional)The scope (`this` reference) in which the function is executed. Defaults to the browser window. Returns: void | Node
| suspendEvents( Boolean queueSuspended ) : void Suspend the firing of all events. (see resumeEvents) Suspend the firing of all events. (see resumeEvents) Parameters: `queueSuspended` : Boolean Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events; Returns: void | Observable
| un( String eventName, Function handler, [Object scope] ) : void Removes an event handler (shorthand for removeListener.) Removes an event handler (shorthand for removeListener.) Parameters: `eventName` : String The type of event the handler was associated with. `handler` : Function The handler to remove. This must be a reference to the function passed into the addListener call. `scope` : Object (optional) The scope originally specified for the handler. Returns: void | Observable

## Public Events

Event | Defined By
--- | ---
| append : ( Tree tree, Node this, Node node, Number index ) Fires when a new child node is appended Fires when a new child node is appended Listeners will be called with the following arguments: `tree` : Tree The owner tree `this` : Node This node `node` : Node The newly appended node `index` : Number The index of the newly appended node | Node
| beforeappend : ( Tree tree, Node this, Node node ) Fires before a new child is appended, return false to cancel the append. Fires before a new child is appended, return false to cancel the append. Listeners will be called with the following arguments: `tree` : Tree The owner tree `this` : Node This node `node` : Node The child node to be appended | Node
| beforeinsert : ( Tree tree, Node this, Node node, Node refNode ) Fires before a new child is inserted, return false to cancel the insert. Fires before a new child is inserted, return false to cancel the insert. Listeners will be called with the following arguments: `tree` : Tree The owner tree `this` : Node This node `node` : Node The child node to be inserted `refNode` : Node The child node the node is being inserted before | Node
| beforemove : ( Tree tree, Node this, Node oldParent, Node newParent, Number index ) Fires before this node is moved to a new location in the tree. Return false to cancel the move. Fires before this node is moved to a new location in the tree. Return false to cancel the move. Listeners will be called with the following arguments: `tree` : Tree The owner tree `this` : Node This node `oldParent` : Node The parent of this node `newParent` : Node The new parent this node is moving to `index` : Number The index it is being moved to | Node
| beforeremove : ( Tree tree, Node this, Node node ) Fires before a child is removed, return false to cancel the remove. Fires before a child is removed, return false to cancel the remove. Listeners will be called with the following arguments: `tree` : Tree The owner tree `this` : Node This node `node` : Node The child node to be removed | Node
| insert : ( Tree tree, Node this, Node node, Node refNode ) Fires when a new child node is inserted. Fires when a new child node is inserted. Listeners will be called with the following arguments: `tree` : Tree The owner tree `this` : Node This node `node` : Node The child node inserted `refNode` : Node The child node the node was inserted before | Node
| move : ( Tree tree, Node this, Node oldParent, Node newParent, Number index ) Fires when this node is moved to a new location in the tree Fires when this node is moved to a new location in the tree Listeners will be called with the following arguments: `tree` : Tree The owner tree `this` : Node This node `oldParent` : Node The old parent of this node `newParent` : Node The new parent of this node `index` : Number The index it was moved to | Node
| remove : ( Tree tree, Node this, Node node ) Fires when a child node is removed Fires when a child node is removed Listeners will be called with the following arguments: `tree` : Tree The owner tree `this` : Node This node `node` : Node The removed node | Node