Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / View2.html
index 4208d8a..af812b4 100644 (file)
@@ -1,6 +1,22 @@
-<!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-tree.View'>/**
-</span> * @class Ext.tree.View
- * @extends Ext.view.Table
+<!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-View'>/**
+</span> * Used as a view by {@link Ext.tree.Panel TreePanel}.
  */
 Ext.define('Ext.tree.View', {
     extend: 'Ext.view.Table',
@@ -13,15 +29,22 @@ Ext.define('Ext.tree.View', {
     checkboxSelector: '.' + Ext.baseCSSPrefix + 'tree-checkbox',
     expanderIconOverCls: Ext.baseCSSPrefix + 'tree-expander-over',
 
+    // Class to add to the node wrap element used to hold nodes when a parent is being
+    // collapsed or expanded. During the animation, UI interaction is forbidden by testing
+    // for an ancestor node with this class.
+    nodeAnimWrapCls: Ext.baseCSSPrefix + 'tree-animator-wrap',
+
     blockRefresh: true,
 
-<span id='Ext-tree.View-cfg-rootVisible'>    /** 
-</span>     * @cfg {Boolean} rootVisible &lt;tt&gt;false&lt;/tt&gt; to hide the root node (defaults to &lt;tt&gt;true&lt;/tt&gt;)
+<span id='Ext-tree-View-cfg-rootVisible'>    /** 
+</span>     * @cfg {Boolean} rootVisible
+     * False to hide the root node.
      */
     rootVisible: true,
 
-<span id='Ext-tree.View-cfg-animate'>    /** 
-</span>     * @cfg {Boolean} animate &lt;tt&gt;true&lt;/tt&gt; to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx Ext.enableFx})
+<span id='Ext-tree-View-cfg-animate'>    /** 
+</span>     * @cfg {Boolean} animate
+     * True to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx Ext.enableFx})
      */
 
     expandDuration: 250,
@@ -54,7 +77,17 @@ Ext.define('Ext.tree.View', {
         me.animQueue = {};
         me.callParent(arguments);
     },
-    
+
+    processUIEvent: function(e) {
+        // If the clicked node is part of an animation, ignore the click.
+        // This is because during a collapse animation, the associated Records
+        // will already have been removed from the Store, and the event is not processable.
+        if (e.getTarget('.' + this.nodeAnimWrapCls, this.el)) {
+            return false;
+        }
+        return this.callParent(arguments);
+    },
+
     onClear: function(){
         this.store.removeAll();    
     },
@@ -70,7 +103,6 @@ Ext.define('Ext.tree.View', {
     
     onRender: function() {
         var me = this,
-            opts = {delegate: me.expanderSelector},
             el;
 
         me.callParent(arguments);
@@ -90,14 +122,20 @@ Ext.define('Ext.tree.View', {
     },
 
     onCheckboxChange: function(e, t) {
-        var item = e.getTarget(this.getItemSelector(), this.getTargetEl()),
-            record, value;
+        var me = this,
+            item = e.getTarget(me.getItemSelector(), me.getTargetEl());
             
         if (item) {
-            record = this.getRecord(item);
-            value = !record.get('checked');
-            record.set('checked', value);
-            this.fireEvent('checkchange', record, value);
+            me.onCheckChange(me.getRecord(item));
+        }
+    },
+    
+    onCheckChange: function(record){
+        var checked = record.get('checked');
+        if (Ext.isBoolean(checked)) {
+            checked = !checked;
+            record.set('checked', checked);
+            this.fireEvent('checkchange', record, checked);
         }
     },
 
@@ -133,7 +171,7 @@ Ext.define('Ext.tree.View', {
             tag: 'tr',
             html: [
                 '&lt;td colspan=&quot;' + headerCt.getColumnCount() + '&quot;&gt;',
-                    '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'tree-animator-wrap' + '&quot;&gt;',
+                    '&lt;div class=&quot;' + this.nodeAnimWrapCls + '&quot;&gt;',
                         '&lt;table class=&quot;' + Ext.baseCSSPrefix + 'grid-table&quot; style=&quot;width: ' + headerCt.getFullWidth() + 'px;&quot;&gt;&lt;tbody&gt;',
                             thHtml,
                         '&lt;/tbody&gt;&lt;/table&gt;',
@@ -209,14 +247,9 @@ Ext.define('Ext.tree.View', {
             // +1 because of the tr with th'es that is already there
             Ext.fly(children[relativeIndex + 1]).insertSibling(nodes, 'before', true);
         }
-        
+
         // We also have to update the CompositeElementLite collection of the DataView
-        if (index &lt; a.length) {
-            a.splice.apply(a, [index, 0].concat(nodes));
-        }
-        else {            
-            a.push.apply(a, nodes);
-        }
+        Ext.Array.insert(a, index, nodes);
         
         // If we were in an animation we need to now change the animation
         // because the targetEl just got higher.
@@ -225,6 +258,36 @@ Ext.define('Ext.tree.View', {
         }
     },
     
+    beginBulkUpdate: function(){
+        this.bulkUpdate = true;
+        this.ownerCt.changingScrollbars = true;  
+    },
+    
+    endBulkUpdate: function(){
+        var me = this,
+            ownerCt = me.ownerCt;
+        
+        me.bulkUpdate = false;
+        me.ownerCt.changingScrollbars = true;  
+        me.resetScrollers();  
+    },
+    
+    onRemove : function(ds, record, index) {
+        var me = this,
+            bulk = me.bulkUpdate;
+
+        me.doRemove(record, index);
+        if (!bulk) {
+            me.updateIndexes(index);
+        }
+        if (me.store.getCount() === 0){
+            me.refresh();
+        }
+        if (!bulk) {
+            me.fireEvent('itemremove', record, index);
+        }
+    },
+    
     doRemove: function(record, index) {
         // If we are adding records which have a parent that is currently expanding
         // lets add them to the animation wrap
@@ -247,7 +310,7 @@ Ext.define('Ext.tree.View', {
         var me = this,
             animWrap;
             
-        if (!me.animate) {
+        if (!me.rendered || !me.animate) {
             return;
         }
 
@@ -312,17 +375,19 @@ Ext.define('Ext.tree.View', {
     },
     
     resetScrollers: function(){
-        var panel = this.panel;
-        
-        panel.determineScrollbars();
-        panel.invalidateScroller();
+        if (!this.bulkUpdate) {
+            var panel = this.panel;
+            
+            panel.determineScrollbars();
+            panel.invalidateScroller();
+        }
     },
 
     onBeforeCollapse: function(parent, records, index) {
         var me = this,
             animWrap;
             
-        if (!me.animate) {
+        if (!me.rendered || !me.animate) {
             return;
         }
 
@@ -375,7 +440,7 @@ Ext.define('Ext.tree.View', {
         animWrap.isAnimating = true;
     },
     
-<span id='Ext-tree.View-method-isAnimating'>    /**
+<span id='Ext-tree-View-method-isAnimating'>    /**
 </span>     * Checks if a node is currently undergoing animation
      * @private
      * @param {Ext.data.Model} node The node
@@ -412,8 +477,8 @@ Ext.define('Ext.tree.View', {
         return data;
     },
     
-<span id='Ext-tree.View-method-expand'>    /**
-</span>     * Expand a record that is loaded in the view.
+<span id='Ext-tree-View-method-expand'>    /**
+</span>     * Expands a record that is loaded in the view.
      * @param {Ext.data.Model} record The record to expand
      * @param {Boolean} deep (optional) True to expand nodes all the way down the tree hierarchy.
      * @param {Function} callback (optional) The function to run after the expand is completed
@@ -423,8 +488,8 @@ Ext.define('Ext.tree.View', {
         return record.expand(deep, callback, scope);
     },
     
-<span id='Ext-tree.View-method-collapse'>    /**
-</span>     * Collapse a record that is loaded in the view.
+<span id='Ext-tree-View-method-collapse'>    /**
+</span>     * Collapses a record that is loaded in the view.
      * @param {Ext.data.Model} record The record to collapse
      * @param {Boolean} deep (optional) True to collapse nodes all the way up the tree hierarchy.
      * @param {Function} callback (optional) The function to run after the collapse is completed
@@ -434,9 +499,9 @@ Ext.define('Ext.tree.View', {
         return record.collapse(deep, callback, scope);
     },
     
-<span id='Ext-tree.View-method-toggle'>    /**
-</span>     * Toggle a record between expanded and collapsed.
-     * @param {Ext.data.Record} recordInstance
+<span id='Ext-tree-View-method-toggle'>    /**
+</span>     * Toggles a record between expanded and collapsed.
+     * @param {Ext.data.Model} recordInstance
      */
     toggle: function(record) {
         this[record.isExpanded() ? 'collapse' : 'expand'](record);
@@ -472,7 +537,7 @@ Ext.define('Ext.tree.View', {
         e.getTarget(this.cellSelector, 10, true).removeCls(this.expanderIconOverCls);
     },
     
-<span id='Ext-tree.View-method-getTreeStore'>    /**
+<span id='Ext-tree-View-method-getTreeStore'>    /**
 </span>     * Gets the base TreeStore from the bound TreePanel.
      */
     getTreeStore: function() {
@@ -489,4 +554,6 @@ Ext.define('Ext.tree.View', {
             });
         }
     }
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>