-<!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',
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 <tt>false</tt> to hide the root node (defaults to <tt>true</tt>)
+<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 <tt>true</tt> 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,
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();
},
onRender: function() {
var me = this,
- opts = {delegate: me.expanderSelector},
el;
me.callParent(arguments);
},
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);
}
},
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>',
// +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.
}
},
+ 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
var me = this,
animWrap;
- if (!me.animate) {
+ if (!me.rendered || !me.animate) {
return;
}
},
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;
}
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
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
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
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);
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() {
});
}
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff