X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/View2.html?ds=sidebyside diff --git a/docs/source/View2.html b/docs/source/View2.html index 4208d8a6..af812b46 100644 --- a/docs/source/View2.html +++ b/docs/source/View2.html @@ -1,6 +1,22 @@ -
+ +/** - * @class Ext.tree.View - * @extends Ext.view.Table + + + + +\ No newline at end of file +});The source code + + + + + + +/** + * 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, - /** - * @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, @@ -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: [ '<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>', @@ -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 < 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; }, - /** + /** * 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; }, - /** - * 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 @@ -423,8 +488,8 @@ Ext.define('Ext.tree.View', { return record.expand(deep, callback, scope); }, - /** - * 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 @@ -434,9 +499,9 @@ Ext.define('Ext.tree.View', { return record.collapse(deep, callback, scope); }, - /** - * 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); @@ -472,7 +537,7 @@ Ext.define('Ext.tree.View', { e.getTarget(this.cellSelector, 10, true).removeCls(this.expanderIconOverCls); }, - /** + /** * Gets the base TreeStore from the bound TreePanel. */ getTreeStore: function() { @@ -489,4 +554,6 @@ Ext.define('Ext.tree.View', { }); } } -});