Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Container
        Panel
          TreePanel

Class Ext.tree.TreePanel

Package:Ext.tree
Defined In:TreePanel.js
Class:TreePanel
Subclasses:ColumnTree
Extends:Panel
xtype:treepanel

The TreePanel provides tree-structured UI representation of tree-structured data.

TreeNodes added to the TreePanel may each contain metadata used by your application in their attributes property.

A TreePanel must have a root node before it is rendered. This may either be specified using the root config option, or using the setRootNode method.

An example of tree rendered to an existing div:

var tree = new Ext.tree.TreePanel({
    renderTo: 'tree-div',
    useArrows: true,
    autoScroll: true,
    animate: true,
    enableDD: true,
    containerScroll: true,
    border: false,
    // auto create TreeLoader

    dataUrl: 'get-nodes.php',

    root: {
        nodeType: 'async',
        text: 'Ext JS',
        draggable: false,
        id: 'source'
    }
});

tree.getRootNode().expand();

The example above would work with a data packet similar to this:

[{
    "text": "adapter",
    "id": "source\/adapter",
    "cls": "folder"
}, {
    "text": "dd",
    "id": "source\/dd",
    "cls": "folder"
}, {
    "text": "debug.js",
    "id": "source\/debug.js",
    "leaf": true,
    "cls": "file"
}]

An example of tree within a Viewport:

new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        xtype: 'treepanel',
        width: 200,
        autoScroll: true,
        split: true,
        loader: new Ext.tree.TreeLoader(),
        root: new Ext.tree.AsyncTreeNode({
            expanded: true,
            children: [{
                text: 'Menu Option 1',
                leaf: true
            }, {
                text: 'Menu Option 2',
                leaf: true
            }, {
                text: 'Menu Option 3',
                leaf: true
            }]
        }),
        rootVisible: false,
        listeners: {
            click: function(n) {
                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
            }
        }
    }, {
        region: 'center',
        xtype: 'tabpanel',
        // remaining code not shown ...

    }]
});

Config Options

Config OptionsDefined By
 animate : Boolean
true to enable animated expand/collapse (defaults to the value of Ext.enableFx)
TreePanel
 bubbleEvents : Array

An array of events that, when fired, should be bubbled to any parent container. Defaults to ['add', 'remove'].

TreePanel
 collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
 collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
 containerScroll : Boolean
true to register this container with ScrollManager
TreePanel
 ddAppendOnly : Boolean
true if the tree should only allow append drops (use for trees which are sorted)
TreePanel
 ddGroup : String
The DD group this TreePanel belongs to
TreePanel
 ddScroll : Boolean
true to enable body scrolling
TreePanel
 dragConfig : Object
Custom config to pass to the Ext.tree.TreeDragZone instance
TreePanel
 dropConfig : Object
Custom config to pass to the Ext.tree.TreeDropZone instance
TreePanel
 enableDD : Boolean
true to enable drag and drop
TreePanel
 enableDrag : Boolean
true to enable just drag
TreePanel
 enableDrop : Boolean
true to enable just drop
TreePanel
 headerAsText : Boolean
true to display the panel title in the header, false to hide it (defaults to true).
Panel
 hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
 hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
Panel
 hlColor : String
The color of the node highlight (defaults to 'C3DAF9')
TreePanel
 hlDrop : Boolean
false to disable node highlight on drop (defaults to the value of Ext.enableFx)
TreePanel
 lines : Boolean
false to disable tree lines (defaults to true)
TreePanel
 loader : Ext.tree.TreeLoader
A Ext.tree.TreeLoader for use with this TreePanel
TreePanel
 minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 pathSeparator : String
The token used to separate sub-paths in path strings (defaults to '/')
TreePanel
 requestMethod : String
The HTTP request method for loading data (defaults to the value of Ext.Ajax.method).
TreePanel
 resizeEvent : String
The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
Panel
 root : Ext.tree.TreeNode
The root node for the tree.
TreePanel
 rootVisible : Boolean
false to hide the root node (defaults to true)
TreePanel
 selModel : Object
A tree selection model to use with this TreePanel (defaults to an Ext.tree.DefaultSelectionModel)
TreePanel
 singleExpand : Boolean
true if only 1 node per branch may be expanded
TreePanel
 trackMouseOver : Boolean
false to disable mouse over highlighting
TreePanel
 useArrows : Boolean
true to use Vista-style arrows in the tree (defaults to false)
TreePanel
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
 bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
 collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
 dragZone : Ext.tree.TreeDragZone
The dragZone used by this tree if drag is enabled (see enableDD or enableDrag)
TreePanel
 dropZone : Ext.tree.TreeDropZone
The dropZone used by this tree if drop is enabled (see enableDD or enableDrop)
TreePanel
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 rendered : Boolean
True if this component has been rendered. Read-only.
Component
 root : Ext.tree.TreeNode
The root node of this tree.
TreePanel

Public Methods

MethodDefined By

Public Events

EventDefined By