Clear Up
SharpKit Reference

Panel Class

The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanel must be bound to a Ext.data.TreeStore. TreePanel's support multiple columns through the columns configuration.

Simple TreePanel using inline data:

  
var store = Ext.create('Ext.data.TreeStore', {
            root: {
            expanded: true,
            children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
            { text: "book report", leaf: true },
            { text: "alegrbra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
            ]
            }
            });
            Ext.create('Ext.tree.Panel', {
            title: 'Simple Tree',
            width: 200,
            height: 150,
            store: store,
            rootVisible: false,
            renderTo: Ext.getBody()
            });
            

For the tree node config options (like text, leaf, expanded), see the documentation of NodeInterface config options.

Namespace: Ext.tree

Constructors

Methods

Name Description
collapseAll(object, object) Collapse all nodes
collapseNode(Model, object, object, object) Collapses a record that is loaded in the tree.
expandAll(object, object) Expand all nodes
expandNode(Model, object, object, object) Expands a record that is loaded in the tree.
expandPath(JsString, object, object, object, object) Expand the tree to the path of a particular node.
getChecked() Retrieve an array of checked records.
getRootNode() Returns the root node for this tree.
selectPath(JsString, object, object, object, object) Expand the tree to the path of a particular node, then select it.
setRootNode(object) Sets root node of this tree.

Fields

Name Description
displayField The field inside the model that will be used as the node's text. Defaults to: "text"
folderSort True to automatically prepend a leaf sorter to the store.
lines False to disable tree lines. Defaults to: true
root Allows you to not specify a store on this TreePanel. This is useful for creating a simple tree with preloaded data without having to specify a TreeStore and Model. A store and model will be created and root will be passed to that store. For example:
  Ext.create('Ext.tree.Panel', {
            title: 'Simple Tree',
            root: {
            text: "Root node",
            expanded: true,
            children: [
            { text: "Child 1", leaf: true },
            { text: "Child 2", leaf: true }
            ]
            },
            renderTo: Ext.getBody()
            });
            
Defaults to: null
rootVisible False to hide the root node. Defaults to: true
singleExpand True if only 1 node per branch may be expanded. Defaults to: false
useArrows True to use Vista-style arrows in the tree. Defaults to: false
© Copyright 2005-2011 SharpKit. All rights reserved.