-<!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-resizer.Splitter'>/**
-</span> * @class Ext.resizer.Splitter
- * @extends Ext.Component
- * <p>This class functions <b>between siblings of a {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox}
- * layout</b> to resize both immediate siblings.</p>
- * <p>By default it will set the size of both siblings. <b>One</b> of the siblings may be configured with
- * <code>{@link Ext.Component#maintainFlex maintainFlex}: true</code> which will cause it not to receive a new size explicitly, but to be resized
- * by the layout.</p>
- * <p>A Splitter may be configured to show a centered mini-collapse tool orientated to collapse the {@link #collapseTarget}.
+<!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-resizer-Splitter'>/**
+</span> * This class functions between siblings of a {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox}
+ * layout to resize both immediate siblings.
+ *
+ * By default it will set the size of both siblings. <b>One</b> of the siblings may be configured with
+ * `{@link Ext.Component#maintainFlex maintainFlex}: true` which will cause it not to receive a new size explicitly, but to be resized
+ * by the layout.
+ *
+ * A Splitter may be configured to show a centered mini-collapse tool orientated to collapse the {@link #collapseTarget}.
* The Splitter will then call that sibling Panel's {@link Ext.panel.Panel#collapse collapse} or {@link Ext.panel.Panel#expand expand} method
* to perform the appropriate operation (depending on the sibling collapse state). To create the mini-collapse tool but take care
- * of collapsing yourself, configure the splitter with <code>{@link #performCollapse} false</code>.</p>
- *
- * @xtype splitter
+ * of collapsing yourself, configure the splitter with <code>{@link #performCollapse} false</code>.
*/
Ext.define('Ext.resizer.Splitter', {
extend: 'Ext.Component',
alias: 'widget.splitter',
renderTpl: [
- '<tpl if="collapsible===true"><div class="' + Ext.baseCSSPrefix + 'collapse-el ' + Ext.baseCSSPrefix + 'layout-split-{collapseDir}">&nbsp;</div></tpl>'
+ '<tpl if="collapsible===true">',
+ '<div id="{id}-collapseEl" class="', Ext.baseCSSPrefix, 'collapse-el ',
+ Ext.baseCSSPrefix, 'layout-split-{collapseDir}">&nbsp;</div>',
+ '</tpl>'
],
baseCls: Ext.baseCSSPrefix + 'splitter',
- collapsedCls: Ext.baseCSSPrefix + 'splitter-collapsed',
+ collapsedClsInternal: Ext.baseCSSPrefix + 'splitter-collapsed',
-<span id='Ext-resizer.Splitter-cfg-collapsible'> /**
+<span id='Ext-resizer-Splitter-cfg-collapsible'> /**
</span> * @cfg {Boolean} collapsible
* <code>true</code> to show a mini-collapse tool in the Splitter to toggle expand and collapse on the {@link #collapseTarget} Panel.
* Defaults to the {@link Ext.panel.Panel#collapsible collapsible} setting of the Panel.
*/
collapsible: false,
-<span id='Ext-resizer.Splitter-cfg-performCollapse'> /**
+<span id='Ext-resizer-Splitter-cfg-performCollapse'> /**
</span> * @cfg {Boolean} performCollapse
* <p>Set to <code>false</code> to prevent this Splitter's mini-collapse tool from managing the collapse
* state of the {@link #collapseTarget}.</p>
*/
-<span id='Ext-resizer.Splitter-cfg-collapseOnDblClick'> /**
+<span id='Ext-resizer-Splitter-cfg-collapseOnDblClick'> /**
</span> * @cfg {Boolean} collapseOnDblClick
* <code>true</code> to enable dblclick to toggle expand and collapse on the {@link #collapseTarget} Panel.
*/
collapseOnDblClick: true,
-<span id='Ext-resizer.Splitter-cfg-defaultSplitMin'> /**
+<span id='Ext-resizer-Splitter-cfg-defaultSplitMin'> /**
</span> * @cfg {Number} defaultSplitMin
* Provides a default minimum width or height for the two components
* that the splitter is between.
*/
defaultSplitMin: 40,
-<span id='Ext-resizer.Splitter-cfg-defaultSplitMax'> /**
+<span id='Ext-resizer-Splitter-cfg-defaultSplitMax'> /**
</span> * @cfg {Number} defaultSplitMax
* Provides a default maximum width or height for the two components
* that the splitter is between.
*/
defaultSplitMax: 1000,
+<span id='Ext-resizer-Splitter-cfg-collapsedCls'> /**
+</span> * @cfg {String} collapsedCls
+ * A class to add to the splitter when it is collapsed. See {@link #collapsible}.
+ */
+
width: 5,
height: 5,
-<span id='Ext-resizer.Splitter-cfg-collapseTarget'> /**
-</span> * @cfg {Mixed} collapseTarget
+<span id='Ext-resizer-Splitter-cfg-collapseTarget'> /**
+</span> * @cfg {String/Ext.panel.Panel} collapseTarget
* <p>A string describing the relative position of the immediate sibling Panel to collapse. May be 'prev' or 'next' (Defaults to 'next')</p>
* <p>Or the immediate sibling Panel to collapse.</p>
* <p>The orientation of the mini-collapse tool will be inferred from this setting.</p>
*/
collapseTarget: 'next',
-<span id='Ext-resizer.Splitter-property-orientation'> /**
+<span id='Ext-resizer-Splitter-property-orientation'> /**
</span> * @property orientation
* @type String
* Orientation of this Splitter. <code>'vertical'</code> when used in an hbox layout, <code>'horizontal'</code>
collapseDir: collapseDir,
collapsible: me.collapsible || target.collapsible
});
- Ext.applyIf(me.renderSelectors, {
- collapseEl: '.' + Ext.baseCSSPrefix + 'collapse-el'
- });
+
+ me.addChildEls('collapseEl');
this.callParent(arguments);
me.tracker = Ext.create('Ext.resizer.SplitterTracker', {
el: me.el
});
+
+ // Relay the most important events to our owner (could open wider later):
+ me.relayEvents(me.tracker, [ 'beforedragstart', 'dragstart', 'dragend' ]);
},
getCollapseDirection: function() {
},
getCollapseTarget: function() {
- return this.collapseTarget.isComponent ? this.collapseTarget : this.collapseTarget == 'prev' ? this.previousSibling() : this.nextSibling();
+ var me = this;
+
+ return me.collapseTarget.isComponent ? me.collapseTarget : me.collapseTarget == 'prev' ? me.previousSibling() : me.nextSibling();
},
onTargetCollapse: function(target) {
- this.el.addCls(this.collapsedCls);
+ this.el.addCls([this.collapsedClsInternal, this.collapsedCls]);
},
onTargetExpand: function(target) {
- this.el.removeCls(this.collapsedCls);
+ this.el.removeCls([this.collapsedClsInternal, this.collapsedCls]);
},
toggleTargetCmp: function(e, t) {
}
}
});
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>