Alien-Web-ExtJS-V3
view release on metacpan or search on metacpan
share/docs/source/TreePanel.html view on Meta::CPAN
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-tree-TreePanel-method-constructor'><span id='Ext-tree-TreePanel-cfg-requestMethod'><span id='Ext-tree-TreePanel-cfg-useArrows'><span id='Ext-tree-TreePanel-cfg-pathSeparator'><span id='Ext-tree-TreePan...
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> * @class Ext.tree.TreePanel
* @extends Ext.Panel
* <p>The TreePanel provides tree-structured UI representation of tree-structured data.</p>
* <p>{@link Ext.tree.TreeNode TreeNode}s added to the TreePanel may each contain metadata
* used by your application in their {@link Ext.tree.TreeNode#attributes attributes} property.</p>
* <p><b>A TreePanel must have a {@link #root} node before it is rendered.</b> This may either be
* specified using the {@link #root} config option, or using the {@link #setRootNode} method.
* <p>An example of tree rendered to an existing div:</p><pre><code>
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();
* </code></pre>
* <p>The example above would work with a data packet similar to this:</p><pre><code>
[{
"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"
}]
* </code></pre>
* <p>An example of tree within a Viewport:</p><pre><code>
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 ...
}]
});
</code></pre>
*
* @cfg {Ext.tree.TreeNode} root The root node for the tree.
* @cfg {Boolean} rootVisible <tt>false</tt> to hide the root node (defaults to <tt>true</tt>)
* @cfg {Boolean} lines <tt>false</tt> to disable tree lines (defaults to <tt>true</tt>)
* @cfg {Boolean} enableDD <tt>true</tt> to enable drag and drop
* @cfg {Boolean} enableDrag <tt>true</tt> to enable just drag
* @cfg {Boolean} enableDrop <tt>true</tt> to enable just drop
* @cfg {Object} dragConfig Custom config to pass to the {@link Ext.tree.TreeDragZone} instance
* @cfg {Object} dropConfig Custom config to pass to the {@link Ext.tree.TreeDropZone} instance
* @cfg {String} ddGroup The DD group this TreePanel belongs to
* @cfg {Boolean} ddAppendOnly <tt>true</tt> if the tree should only allow append drops (use for trees which are sorted)
* @cfg {Boolean} ddScroll <tt>true</tt> to enable body scrolling
* @cfg {Boolean} containerScroll <tt>true</tt> to register this container with ScrollManager
* @cfg {Boolean} hlDrop <tt>false</tt> to disable node highlight on drop (defaults to the value of {@link Ext#enableFx})
* @cfg {String} hlColor The color of the node highlight (defaults to <tt>'C3DAF9'</tt>)
* @cfg {Boolean} animate <tt>true</tt> to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx})
* @cfg {Boolean} singleExpand <tt>true</tt> if only 1 node per branch may be expanded
* @cfg {Object} selModel A tree selection model to use with this TreePanel (defaults to an {@link Ext.tree.DefaultSelectionModel})
( run in 0.748 second using v1.01-cache-2.11-cpan-119454b85a5 )