Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / TreeStore.html
index 8e1f315..1916f5f 100644 (file)
 </head>
 <body onload="prettyPrint(); highlight();">
   <pre class="prettyprint lang-js"><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}.
+</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'.
  */
@@ -39,15 +38,34 @@ Ext.define('Ext.data.TreeStore', {
     alias: 'store.tree',
     requires: ['Ext.data.Tree', 'Ext.data.NodeInterface', 'Ext.data.NodeStore'],
 
+<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 (optional) Default to true. Remove previously existing
-     * child nodes before loading.
+</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>     * @cfg {String} nodeParam
+     * The name of the parameter sent to the server which contains the identifier of the node.
+     * Defaults to 'node'.
      */
     nodeParam: 'node',
 
@@ -64,7 +82,8 @@ Ext.define('Ext.data.TreeStore', {
     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>     * @cfg {Boolean} folderSort
+     * Set to true to automatically prepend a leaf sorter. Defaults to `undefined`.
      */
     folderSort: false,
     
@@ -72,7 +91,6 @@ Ext.define('Ext.data.TreeStore', {
         var me = this, 
             root,
             fields;
-            
         
         config = Ext.apply({}, config);
         
@@ -89,23 +107,6 @@ 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'>            /**
@@ -229,6 +230,25 @@ Ext.define('Ext.data.TreeStore', {
               */
              &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'>            /**
@@ -359,8 +379,8 @@ 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>     * 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) {
@@ -496,7 +516,7 @@ Ext.define('Ext.data.TreeStore', {
     },
     
 <span id='Ext-data-TreeStore-method-onCreateRecords'>    /**
-</span>     * Create any new records when a write is returned from the server.
+</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
@@ -535,7 +555,7 @@ 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>     * 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
@@ -566,7 +586,7 @@ 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>     * 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