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
 * &lt;p&gt;The TreePanel provides tree-structured UI representation of tree-structured data.&lt;/p&gt;
 * &lt;p&gt;{@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.&lt;/p&gt;
 * &lt;p&gt;&lt;b&gt;A TreePanel must have a {@link #root} node before it is rendered.&lt;/b&gt; This may either be
 * specified using the {@link #root} config option, or using the {@link #setRootNode} method.
 * &lt;p&gt;An example of tree rendered to an existing div:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
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();
 * &lt;/code&gt;&lt;/pre&gt;
 * &lt;p&gt;The example above would work with a data packet similar to this:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
[{
    &quot;text&quot;: &quot;adapter&quot;,
    &quot;id&quot;: &quot;source\/adapter&quot;,
    &quot;cls&quot;: &quot;folder&quot;
}, {
    &quot;text&quot;: &quot;dd&quot;,
    &quot;id&quot;: &quot;source\/dd&quot;,
    &quot;cls&quot;: &quot;folder&quot;
}, {
    &quot;text&quot;: &quot;debug.js&quot;,
    &quot;id&quot;: &quot;source\/debug.js&quot;,
    &quot;leaf&quot;: true,
    &quot;cls&quot;: &quot;file&quot;
}]
 * &lt;/code&gt;&lt;/pre&gt;
 * &lt;p&gt;An example of tree within a Viewport:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
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: &quot;' + n.attributes.text + '&quot;');
            }
        }
    }, {
        region: 'center',
        xtype: 'tabpanel',
        // remaining code not shown ...
    }]
});
&lt;/code&gt;&lt;/pre&gt;
 *
 * @cfg {Ext.tree.TreeNode} root The root node for the tree.
 * @cfg {Boolean} rootVisible &lt;tt&gt;false&lt;/tt&gt; to hide the root node (defaults to &lt;tt&gt;true&lt;/tt&gt;)
 * @cfg {Boolean} lines &lt;tt&gt;false&lt;/tt&gt; to disable tree lines (defaults to &lt;tt&gt;true&lt;/tt&gt;)
 * @cfg {Boolean} enableDD &lt;tt&gt;true&lt;/tt&gt; to enable drag and drop
 * @cfg {Boolean} enableDrag &lt;tt&gt;true&lt;/tt&gt; to enable just drag
 * @cfg {Boolean} enableDrop &lt;tt&gt;true&lt;/tt&gt; 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 &lt;tt&gt;true&lt;/tt&gt; if the tree should only allow append drops (use for trees which are sorted)
 * @cfg {Boolean} ddScroll &lt;tt&gt;true&lt;/tt&gt; to enable body scrolling
 * @cfg {Boolean} containerScroll &lt;tt&gt;true&lt;/tt&gt; to register this container with ScrollManager
 * @cfg {Boolean} hlDrop &lt;tt&gt;false&lt;/tt&gt; 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 &lt;tt&gt;'C3DAF9'&lt;/tt&gt;)
 * @cfg {Boolean} animate &lt;tt&gt;true&lt;/tt&gt; to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx})
 * @cfg {Boolean} singleExpand &lt;tt&gt;true&lt;/tt&gt; 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 )