/**
- * @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}.
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * 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',
@@ -20,50 +35,58 @@ Ext.define('Ext.resizer.Splitter', {
alias: 'widget.splitter',
renderTpl: [
- '<tpl if="collapsible===true"><div class="' + Ext.baseCSSPrefix + 'collapse-el ' + Ext.baseCSSPrefix + 'layout-split-{collapseDir}"> </div></tpl>'
+ '<tpl if="collapsible===true">',
+ '<div id="{id}-collapseEl" class="', Ext.baseCSSPrefix, 'collapse-el ',
+ Ext.baseCSSPrefix, 'layout-split-{collapseDir}"> </div>',
+ '</tpl>'
],
baseCls: Ext.baseCSSPrefix + 'splitter',
- collapsedCls: Ext.baseCSSPrefix + 'splitter-collapsed',
+ collapsedClsInternal: Ext.baseCSSPrefix + 'splitter-collapsed',
- /**
+ /**
* @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,
- /**
+ /**
* @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>
*/
- /**
+ /**
* @cfg {Boolean} collapseOnDblClick
* <code>true</code> to enable dblclick to toggle expand and collapse on the {@link #collapseTarget} Panel.
*/
collapseOnDblClick: true,
- /**
+ /**
* @cfg {Number} defaultSplitMin
* Provides a default minimum width or height for the two components
* that the splitter is between.
*/
defaultSplitMin: 40,
- /**
+ /**
* @cfg {Number} defaultSplitMax
* Provides a default maximum width or height for the two components
* that the splitter is between.
*/
defaultSplitMax: 1000,
+ /**
+ * @cfg {String} collapsedCls
+ * A class to add to the splitter when it is collapsed. See {@link #collapsible}.
+ */
+
width: 5,
height: 5,
- /**
- * @cfg {Mixed} collapseTarget
+ /**
+ * @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>
@@ -71,7 +94,7 @@ Ext.define('Ext.resizer.Splitter', {
*/
collapseTarget: 'next',
- /**
+ /**
* @property orientation
* @type String
* Orientation of this Splitter. <code>'vertical'</code> when used in an hbox layout, <code>'horizontal'</code>
@@ -87,9 +110,8 @@ Ext.define('Ext.resizer.Splitter', {
collapseDir: collapseDir,
collapsible: me.collapsible || target.collapsible
});
- Ext.applyIf(me.renderSelectors, {
- collapseEl: '.' + Ext.baseCSSPrefix + 'collapse-el'
- });
+
+ me.addChildEls('collapseEl');
this.callParent(arguments);
@@ -113,6 +135,9 @@ Ext.define('Ext.resizer.Splitter', {
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() {
@@ -139,15 +164,17 @@ Ext.define('Ext.resizer.Splitter', {
},
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) {
@@ -175,4 +202,6 @@ Ext.define('Ext.resizer.Splitter', {
}
}
});
-