X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/View2.html?ds=sidebyside diff --git a/docs/source/View2.html b/docs/source/View2.html index 371b0357..af812b46 100644 --- a/docs/source/View2.html +++ b/docs/source/View2.html @@ -3,8 +3,8 @@ The source code - - + + @@ -16,8 +16,7 @@
/**
- * @class Ext.tree.View
- * @extends Ext.view.Table
+ * Used as a view by {@link Ext.tree.Panel TreePanel}.
  */
 Ext.define('Ext.tree.View', {
     extend: 'Ext.view.Table',
@@ -30,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,
 
     /** 
-     * @cfg {Boolean} rootVisible <tt>false</tt> to hide the root node (defaults to <tt>true</tt>)
+     * @cfg {Boolean} rootVisible
+     * False to hide the root node.
      */
     rootVisible: true,
 
     /** 
-     * @cfg {Boolean} animate <tt>true</tt> to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx Ext.enableFx})
+     * @cfg {Boolean} animate
+     * True to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx Ext.enableFx})
      */
 
     expandDuration: 250,
@@ -71,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();    
     },
@@ -87,7 +103,6 @@ Ext.define('Ext.tree.View', {
     
     onRender: function() {
         var me = this,
-            opts = {delegate: me.expanderSelector},
             el;
 
         me.callParent(arguments);
@@ -107,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);
         }
     },
 
@@ -150,7 +171,7 @@ Ext.define('Ext.tree.View', {
             tag: 'tr',
             html: [
                 '<td colspan="' + headerCt.getColumnCount() + '">',
-                    '<div class="' + Ext.baseCSSPrefix + 'tree-animator-wrap' + '">',
+                    '<div class="' + this.nodeAnimWrapCls + '">',
                         '<table class="' + Ext.baseCSSPrefix + 'grid-table" style="width: ' + headerCt.getFullWidth() + 'px;"><tbody>',
                             thHtml,
                         '</tbody></table>',
@@ -226,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 < 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.
@@ -242,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
@@ -329,10 +375,12 @@ 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) {
@@ -430,7 +478,7 @@ Ext.define('Ext.tree.View', {
     },
     
     /**
-     * Expand a record that is loaded in the view.
+     * 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
@@ -441,7 +489,7 @@ Ext.define('Ext.tree.View', {
     },
     
     /**
-     * Collapse a record that is loaded in the view.
+     * 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
@@ -452,8 +500,8 @@ Ext.define('Ext.tree.View', {
     },
     
     /**
-     * Toggle a record between expanded and collapsed.
-     * @param {Ext.data.Record} recordInstance
+     * Toggles a record between expanded and collapsed.
+     * @param {Ext.data.Model} recordInstance
      */
     toggle: function(record) {
         this[record.isExpanded() ? 'collapse' : 'expand'](record);