<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
- <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <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>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-tree-View'>/**
-</span> * @class Ext.tree.View
- * @extends Ext.view.Table
+</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> * @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> * @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
},
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) {
},
<span id='Ext-tree-View-method-expand'> /**
-</span> * Expand a record that is loaded in the view.
+</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
},
<span id='Ext-tree-View-method-collapse'> /**
-</span> * Collapse a record that is loaded in the view.
+</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
},
<span id='Ext-tree-View-method-toggle'> /**
-</span> * Toggle a record between expanded and collapsed.
- * @param {Ext.data.Record} recordInstance
+</span> * Toggles a record between expanded and collapsed.
+ * @param {Ext.data.Model} recordInstance
*/
toggle: function(record) {
this[record.isExpanded() ? 'collapse' : 'expand'](record);
git.ithinksw.org / extjs.git / blobdiff