Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / TreeStore.html
index 40f360f..1916f5f 100644 (file)
@@ -1,19 +1,35 @@
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-data.TreeStore'>/**
-</span> * @class Ext.data.TreeStore
- * @extends Ext.data.AbstractStore
- * 
- * The TreeStore is a store implementation that is backed by by an {@link Ext.data.Tree}.
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../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-data-TreeStore'>/**
+</span> * The TreeStore is a store implementation that is backed by by an {@link Ext.data.Tree}.
  * It provides convenience methods for loading nodes, as well as the ability to use
  * the hierarchical tree structure combined with a store. This class is generally used
  * in conjunction with {@link Ext.tree.Panel}. This class also relays many events from
  * the Tree for convenience.
  * 
- * ## Using Models
+ * # Using Models
+ * 
  * If no Model is specified, an implicit model will be created that implements {@link Ext.data.NodeInterface}.
  * The standard Tree fields will also be copied onto the Model for maintaining their state.
  * 
- * ## Reading Nested Data
- * For the tree to read nested data, the {@link Ext.data.Reader} must be configured with a root property,
+ * # Reading Nested Data
+ * 
+ * For the tree to read nested data, the {@link Ext.data.reader.Reader} must be configured with a root property,
  * so the reader can find nested data for each node. If a root is not specified, it will default to
  * 'children'.
  */
@@ -22,32 +38,52 @@ Ext.define('Ext.data.TreeStore', {
     alias: 'store.tree',
     requires: ['Ext.data.Tree', 'Ext.data.NodeInterface', 'Ext.data.NodeStore'],
 
-<span id='Ext-data.TreeStore-cfg-clearOnLoad'>    /**
-</span>     * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
-     * child nodes before loading.
+<span id='Ext-data-TreeStore-cfg-root'>    /**
+</span>     * @cfg {Ext.data.Model/Ext.data.NodeInterface/Object} root
+     * The root node for this store. For example:
+     * 
+     *     root: {
+     *         expanded: true, 
+     *         text: &quot;My Root&quot;,
+     *         children: [
+     *             { text: &quot;Child 1&quot;, leaf: true },
+     *             { text: &quot;Child 2&quot;, expanded: true, children: [
+     *                 { text: &quot;GrandChild&quot;, leaf: true }
+     *             ] }
+     *         ]
+     *     }
+     * 
+     * Setting the `root` config option is the same as calling {@link #setRootNode}.
+     */
+
+<span id='Ext-data-TreeStore-cfg-clearOnLoad'>    /**
+</span>     * @cfg {Boolean} clearOnLoad
+     * Remove previously existing child nodes before loading. Default to true.
      */
     clearOnLoad : true,
 
-<span id='Ext-data.TreeStore-cfg-nodeParam'>    /**
-</span>     * @cfg {String} nodeParam The name of the parameter sent to the server which contains
-     * the identifier of the node. Defaults to &lt;tt&gt;'node'&lt;/tt&gt;.
+<span id='Ext-data-TreeStore-cfg-nodeParam'>    /**
+</span>     * @cfg {String} nodeParam
+     * The name of the parameter sent to the server which contains the identifier of the node.
+     * Defaults to 'node'.
      */
     nodeParam: 'node',
 
-<span id='Ext-data.TreeStore-cfg-defaultRootId'>    /**
+<span id='Ext-data-TreeStore-cfg-defaultRootId'>    /**
 </span>     * @cfg {String} defaultRootId
      * The default root id. Defaults to 'root'
      */
     defaultRootId: 'root',
     
-<span id='Ext-data.TreeStore-cfg-defaultRootProperty'>    /**
+<span id='Ext-data-TreeStore-cfg-defaultRootProperty'>    /**
 </span>     * @cfg {String} defaultRootProperty
      * The root property to specify on the reader if one is not explicitly defined.
      */
     defaultRootProperty: 'children',
 
-<span id='Ext-data.TreeStore-cfg-folderSort'>    /**
-</span>     * @cfg {Boolean} folderSort Set to true to automatically prepend a leaf sorter (defaults to &lt;tt&gt;undefined&lt;/tt&gt;)
+<span id='Ext-data-TreeStore-cfg-folderSort'>    /**
+</span>     * @cfg {Boolean} folderSort
+     * Set to true to automatically prepend a leaf sorter. Defaults to `undefined`.
      */
     folderSort: false,
     
@@ -55,11 +91,10 @@ Ext.define('Ext.data.TreeStore', {
         var me = this, 
             root,
             fields;
-            
         
         config = Ext.apply({}, config);
         
-<span id='Ext-data.TreeStore-property-fields'>        /**
+<span id='Ext-data-TreeStore-property-fields'>        /**
 </span>         * If we have no fields declare for the store, add some defaults.
          * These will be ignored if a model is explicitly specified.
          */
@@ -72,26 +107,9 @@ Ext.define('Ext.data.TreeStore', {
         
         // We create our data tree.
         me.tree = Ext.create('Ext.data.Tree');
-        
-        me.tree.on({
-            scope: me,
-            remove: me.onNodeRemove,
-            beforeexpand: me.onBeforeNodeExpand,
-            beforecollapse: me.onBeforeNodeCollapse,
-            append: me.onNodeAdded,
-            insert: me.onNodeAdded
-        });
-
-        me.onBeforeSort();
-                
-        root = me.root;
-        if (root) {
-            delete me.root;
-            me.setRootNode(root);            
-        }
 
         me.relayEvents(me.tree, [
-<span id='Ext-data.TreeStore-event-append'>            /**
+<span id='Ext-data-TreeStore-event-append'>            /**
 </span>             * @event append
              * Fires when a new child node is appended to a node in this store's tree.
              * @param {Tree} tree The owner tree
@@ -101,7 +119,7 @@ Ext.define('Ext.data.TreeStore', {
              */
             &quot;append&quot;,
             
-<span id='Ext-data.TreeStore-event-remove'>            /**
+<span id='Ext-data-TreeStore-event-remove'>            /**
 </span>             * @event remove
              * Fires when a child node is removed from a node in this store's tree.
              * @param {Tree} tree The owner tree
@@ -110,7 +128,7 @@ Ext.define('Ext.data.TreeStore', {
              */
             &quot;remove&quot;,
             
-<span id='Ext-data.TreeStore-event-move'>            /**
+<span id='Ext-data-TreeStore-event-move'>            /**
 </span>             * @event move
              * Fires when a node is moved to a new location in the store's tree
              * @param {Tree} tree The owner tree
@@ -121,7 +139,7 @@ Ext.define('Ext.data.TreeStore', {
              */
             &quot;move&quot;,
             
-<span id='Ext-data.TreeStore-event-insert'>            /**
+<span id='Ext-data-TreeStore-event-insert'>            /**
 </span>             * @event insert
              * Fires when a new child node is inserted in a node in this store's tree.
              * @param {Tree} tree The owner tree
@@ -131,7 +149,7 @@ Ext.define('Ext.data.TreeStore', {
              */
             &quot;insert&quot;,
             
-<span id='Ext-data.TreeStore-event-beforeappend'>            /**
+<span id='Ext-data-TreeStore-event-beforeappend'>            /**
 </span>             * @event beforeappend
              * Fires before a new child is appended to a node in this store's tree, return false to cancel the append.
              * @param {Tree} tree The owner tree
@@ -140,7 +158,7 @@ Ext.define('Ext.data.TreeStore', {
              */
             &quot;beforeappend&quot;,
             
-<span id='Ext-data.TreeStore-event-beforeremove'>            /**
+<span id='Ext-data-TreeStore-event-beforeremove'>            /**
 </span>             * @event beforeremove
              * Fires before a child is removed from a node in this store's tree, return false to cancel the remove.
              * @param {Tree} tree The owner tree
@@ -149,7 +167,7 @@ Ext.define('Ext.data.TreeStore', {
              */
             &quot;beforeremove&quot;,
             
-<span id='Ext-data.TreeStore-event-beforemove'>            /**
+<span id='Ext-data-TreeStore-event-beforemove'>            /**
 </span>             * @event beforemove
              * Fires before a node is moved to a new location in the store's tree. Return false to cancel the move.
              * @param {Tree} tree The owner tree
@@ -160,7 +178,7 @@ Ext.define('Ext.data.TreeStore', {
              */
             &quot;beforemove&quot;,
             
-<span id='Ext-data.TreeStore-event-beforeinsert'>            /**
+<span id='Ext-data-TreeStore-event-beforeinsert'>            /**
 </span>             * @event beforeinsert
              * Fires before a new child is inserted in a node in this store's tree, return false to cancel the insert.
              * @param {Tree} tree The owner tree
@@ -170,51 +188,70 @@ Ext.define('Ext.data.TreeStore', {
              */
             &quot;beforeinsert&quot;,
              
-<span id='Ext-data.TreeStore-event-expand'>             /**
+<span id='Ext-data-TreeStore-event-expand'>             /**
 </span>              * @event expand
               * Fires when this node is expanded.
               * @param {Node} this The expanding node
               */
              &quot;expand&quot;,
              
-<span id='Ext-data.TreeStore-event-collapse'>             /**
+<span id='Ext-data-TreeStore-event-collapse'>             /**
 </span>              * @event collapse
               * Fires when this node is collapsed.
               * @param {Node} this The collapsing node
               */
              &quot;collapse&quot;,
              
-<span id='Ext-data.TreeStore-event-beforeexpand'>             /**
+<span id='Ext-data-TreeStore-event-beforeexpand'>             /**
 </span>              * @event beforeexpand
               * Fires before this node is expanded.
               * @param {Node} this The expanding node
               */
              &quot;beforeexpand&quot;,
              
-<span id='Ext-data.TreeStore-event-beforecollapse'>             /**
+<span id='Ext-data-TreeStore-event-beforecollapse'>             /**
 </span>              * @event beforecollapse
               * Fires before this node is collapsed.
               * @param {Node} this The collapsing node
               */
              &quot;beforecollapse&quot;,
 
-<span id='Ext-data.TreeStore-event-sort'>             /**
+<span id='Ext-data-TreeStore-event-sort'>             /**
 </span>              * @event sort
               * Fires when this TreeStore is sorted.
               * @param {Node} node The node that is sorted.
               */             
              &quot;sort&quot;,
              
-<span id='Ext-data.TreeStore-event-rootchange'>             /**
+<span id='Ext-data-TreeStore-event-rootchange'>             /**
 </span>              * @event rootchange
               * Fires whenever the root node is changed in the tree.
               * @param {Ext.data.Model} root The new root
               */
              &quot;rootchange&quot;
         ]);
+
+        me.tree.on({
+            scope: me,
+            remove: me.onNodeRemove,
+            // this event must follow the relay to beforeitemexpand to allow users to
+            // cancel the expand:
+            beforeexpand: me.onBeforeNodeExpand,
+            beforecollapse: me.onBeforeNodeCollapse,
+            append: me.onNodeAdded,
+            insert: me.onNodeAdded
+        });
+
+        me.onBeforeSort();
+
+        root = me.root;
+        if (root) {
+            delete me.root;
+            me.setRootNode(root);
+        }
         
         me.addEvents(
-<span id='Ext-data.TreeStore-event-rootchange'>            /**
+<span id='Ext-data-TreeStore-event-rootchange'>            /**
 </span>             * @event rootchange
              * Fires when the root node on this TreeStore is changed.
              * @param {Ext.data.TreeStore} store This TreeStore
@@ -269,7 +306,7 @@ Ext.define('Ext.data.TreeStore', {
         }
     },
     
-<span id='Ext-data.TreeStore-method-onBeforeNodeExpand'>    /**
+<span id='Ext-data-TreeStore-method-onBeforeNodeExpand'>    /**
 </span>     * Called before a node is expanded.
      * @private
      * @param {Ext.data.NodeInterface} node The node being expanded.
@@ -305,7 +342,7 @@ Ext.define('Ext.data.TreeStore', {
         return Ext.Array.filter(this.tree.flatten(), this.filterUpdated);
     },
     
-<span id='Ext-data.TreeStore-method-onBeforeNodeCollapse'>    /**
+<span id='Ext-data-TreeStore-method-onBeforeNodeCollapse'>    /**
 </span>     * Called before a node is collapsed.
      * @private
      * @param {Ext.data.NodeInterface} node The node being collapsed.
@@ -341,9 +378,9 @@ Ext.define('Ext.data.TreeStore', {
         }
     },
         
-<span id='Ext-data.TreeStore-method-setRootNode'>    /**
-</span>     * Sets the root node for this store
-     * @param {Ext.data.Model/Ext.data.NodeInterface} root
+<span id='Ext-data-TreeStore-method-setRootNode'>    /**
+</span>     * Sets the root node for this store.  See also the {@link #root} config option.
+     * @param {Ext.data.Model/Ext.data.NodeInterface/Object} root
      * @return {Ext.data.NodeInterface} The new root
      */
     setRootNode: function(root) {
@@ -378,7 +415,7 @@ Ext.define('Ext.data.TreeStore', {
         return root;
     },
         
-<span id='Ext-data.TreeStore-method-getRootNode'>    /**
+<span id='Ext-data-TreeStore-method-getRootNode'>    /**
 </span>     * Returns the root node for this tree.
      * @return {Ext.data.NodeInterface}
      */
@@ -386,7 +423,7 @@ Ext.define('Ext.data.TreeStore', {
         return this.tree.getRootNode();
     },
 
-<span id='Ext-data.TreeStore-method-getNodeById'>    /**
+<span id='Ext-data-TreeStore-method-getNodeById'>    /**
 </span>     * Returns the record node by id
      * @return {Ext.data.NodeInterface}
      */
@@ -394,7 +431,7 @@ Ext.define('Ext.data.TreeStore', {
         return this.tree.getNodeById(id);
     },
 
-<span id='Ext-data.TreeStore-method-load'>    /**
+<span id='Ext-data-TreeStore-method-load'>    /**
 </span>     * Loads the Store using its configured {@link #proxy}.
      * @param {Object} options Optional config object. This is passed into the {@link Ext.data.Operation Operation}
      * object that is created and then sent to the proxy's {@link Ext.data.proxy.Proxy#read} function.
@@ -434,7 +471,7 @@ Ext.define('Ext.data.TreeStore', {
     },
         
 
-<span id='Ext-data.TreeStore-method-fillNode'>    /**
+<span id='Ext-data-TreeStore-method-fillNode'>    /**
 </span>     * Fills a node with a series of child records.
      * @private
      * @param {Ext.data.NodeInterface} node The node to fill
@@ -478,8 +515,8 @@ Ext.define('Ext.data.TreeStore', {
         Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
     },
     
-<span id='Ext-data.TreeStore-method-onCreateRecords'>    /**
-</span>     * Create any new records when a write is returned from the server.
+<span id='Ext-data-TreeStore-method-onCreateRecords'>    /**
+</span>     * Creates any new records when a write is returned from the server.
      * @private
      * @param {Array} records The array of new records
      * @param {Ext.data.Operation} operation The operation that just completed
@@ -495,8 +532,8 @@ Ext.define('Ext.data.TreeStore', {
                 original,
                 index;
 
-<span id='Ext-data.TreeStore-property-'>            /**
-</span>             * Loop over each record returned from the server. Assume they are
+            /*
+             * Loop over each record returned from the server. Assume they are
              * returned in order of how they were sent. If we find a matching
              * record, replace it with the newly created one.
              */
@@ -517,8 +554,8 @@ Ext.define('Ext.data.TreeStore', {
         }
     },
 
-<span id='Ext-data.TreeStore-method-onUpdateRecords'>    /**
-</span>     * Update any records when a write is returned from the server.
+<span id='Ext-data-TreeStore-method-onUpdateRecords'>    /**
+</span>     * Updates any records when a write is returned from the server.
      * @private
      * @param {Array} records The array of updated records
      * @param {Ext.data.Operation} operation The operation that just completed
@@ -548,8 +585,8 @@ Ext.define('Ext.data.TreeStore', {
         }
     },
 
-<span id='Ext-data.TreeStore-method-onDestroyRecords'>    /**
-</span>     * Remove any records when a write is returned from the server.
+<span id='Ext-data-TreeStore-method-onDestroyRecords'>    /**
+</span>     * Removes any records when a write is returned from the server.
      * @private
      * @param {Array} records The array of removed records
      * @param {Ext.data.Operation} operation The operation that just completed
@@ -563,7 +600,7 @@ Ext.define('Ext.data.TreeStore', {
 
     // inherit docs
     removeAll: function() {
-        this.getRootNode().destroy();
+        this.getRootNode().destroy(true);
         this.fireEvent('clear', this);
     },
 
@@ -579,4 +616,6 @@ Ext.define('Ext.data.TreeStore', {
         }   
         me.fireEvent('sort', me);
     }
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>