docs/source/Splitter.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-resizer-Splitter'>/**
  19 </span> * @class Ext.resizer.Splitter
  20  * @extends Ext.Component
  21  * &lt;p&gt;This class functions &lt;b&gt;between siblings of a {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox}
  22  * layout&lt;/b&gt; to resize both immediate siblings.&lt;/p&gt;
  23  * &lt;p&gt;By default it will set the size of both siblings. &lt;b&gt;One&lt;/b&gt; of the siblings may be configured with
  24  * &lt;code&gt;{@link Ext.Component#maintainFlex maintainFlex}: true&lt;/code&gt; which will cause it not to receive a new size explicitly, but to be resized
  25  * by the layout.&lt;/p&gt;
  26  * &lt;p&gt;A Splitter may be configured to show a centered mini-collapse tool orientated to collapse the {@link #collapseTarget}.
  27  * The Splitter will then call that sibling Panel's {@link Ext.panel.Panel#collapse collapse} or {@link Ext.panel.Panel#expand expand} method
  28  * to perform the appropriate operation (depending on the sibling collapse state). To create the mini-collapse tool but take care
  29  * of collapsing yourself, configure the splitter with &lt;code&gt;{@link #performCollapse} false&lt;/code&gt;.&lt;/p&gt;
  30  *
  31  * @xtype splitter
  32  */
  33 Ext.define('Ext.resizer.Splitter', {
  34     extend: 'Ext.Component',
  35     requires: ['Ext.XTemplate'],
  36     uses: ['Ext.resizer.SplitterTracker'],
  37     alias: 'widget.splitter',
  38
  39     renderTpl: [
  40         '&lt;tpl if=&quot;collapsible===true&quot;&gt;&lt;div class=&quot;' + Ext.baseCSSPrefix + 'collapse-el ' + Ext.baseCSSPrefix + 'layout-split-{collapseDir}&quot;&gt;&amp;nbsp;&lt;/div&gt;&lt;/tpl&gt;'
  41     ],
  42
  43     baseCls: Ext.baseCSSPrefix + 'splitter',
  44     collapsedClsInternal: Ext.baseCSSPrefix + 'splitter-collapsed',
  45
  46 <span id='Ext-resizer-Splitter-cfg-collapsible'>    /**
  47 </span>     * @cfg {Boolean} collapsible
  48      * &lt;code&gt;true&lt;/code&gt; to show a mini-collapse tool in the Splitter to toggle expand and collapse on the {@link #collapseTarget} Panel.
  49      * Defaults to the {@link Ext.panel.Panel#collapsible collapsible} setting of the Panel.
  50      */
  51     collapsible: false,
  52
  53 <span id='Ext-resizer-Splitter-cfg-performCollapse'>    /**
  54 </span>     * @cfg {Boolean} performCollapse
  55      * &lt;p&gt;Set to &lt;code&gt;false&lt;/code&gt; to prevent this Splitter's mini-collapse tool from managing the collapse
  56      * state of the {@link #collapseTarget}.&lt;/p&gt;
  57      */
  58
  59 <span id='Ext-resizer-Splitter-cfg-collapseOnDblClick'>    /**
  60 </span>     * @cfg {Boolean} collapseOnDblClick
  61      * &lt;code&gt;true&lt;/code&gt; to enable dblclick to toggle expand and collapse on the {@link #collapseTarget} Panel.
  62      */
  63     collapseOnDblClick: true,
  64
  65 <span id='Ext-resizer-Splitter-cfg-defaultSplitMin'>    /**
  66 </span>     * @cfg {Number} defaultSplitMin
  67      * Provides a default minimum width or height for the two components
  68      * that the splitter is between.
  69      */
  70     defaultSplitMin: 40,
  71
  72 <span id='Ext-resizer-Splitter-cfg-defaultSplitMax'>    /**
  73 </span>     * @cfg {Number} defaultSplitMax
  74      * Provides a default maximum width or height for the two components
  75      * that the splitter is between.
  76      */
  77     defaultSplitMax: 1000,
  78
  79 <span id='Ext-resizer-Splitter-cfg-collapsedCls'>    /**
  80 </span>     * @cfg {String} collapsedCls
  81      * A class to add to the splitter when it is collapsed. See {@link #collapsible}.
  82      */
  83
  84     width: 5,
  85     height: 5,
  86
  87 <span id='Ext-resizer-Splitter-cfg-collapseTarget'>    /**
  88 </span>     * @cfg {Mixed} collapseTarget
  89      * &lt;p&gt;A string describing the relative position of the immediate sibling Panel to collapse. May be 'prev' or 'next' (Defaults to 'next')&lt;/p&gt;
  90      * &lt;p&gt;Or the immediate sibling Panel to collapse.&lt;/p&gt;
  91      * &lt;p&gt;The orientation of the mini-collapse tool will be inferred from this setting.&lt;/p&gt;
  92      * &lt;p&gt;&lt;b&gt;Note that only Panels may be collapsed.&lt;/b&gt;&lt;/p&gt;
  93      */
  94     collapseTarget: 'next',
  95
  96 <span id='Ext-resizer-Splitter-property-orientation'>    /**
  97 </span>     * @property orientation
  98      * @type String
  99      * Orientation of this Splitter. &lt;code&gt;'vertical'&lt;/code&gt; when used in an hbox layout, &lt;code&gt;'horizontal'&lt;/code&gt;
 100      * when used in a vbox layout.
 101      */
 102
 103     onRender: function() {
 104         var me = this,
 105             target = me.getCollapseTarget(),
 106             collapseDir = me.getCollapseDirection();
 107
 108         Ext.applyIf(me.renderData, {
 109             collapseDir: collapseDir,
 110             collapsible: me.collapsible || target.collapsible
 111         });
 112         Ext.applyIf(me.renderSelectors, {
 113             collapseEl: '.' + Ext.baseCSSPrefix + 'collapse-el'
 114         });
 115
 116         this.callParent(arguments);
 117
 118         // Add listeners on the mini-collapse tool unless performCollapse is set to false
 119         if (me.performCollapse !== false) {
 120             if (me.renderData.collapsible) {
 121                 me.mon(me.collapseEl, 'click', me.toggleTargetCmp, me);
 122             }
 123             if (me.collapseOnDblClick) {
 124                 me.mon(me.el, 'dblclick', me.toggleTargetCmp, me);
 125             }
 126         }
 127
 128         // Ensure the mini collapse icon is set to the correct direction when the target is collapsed/expanded by any means
 129         me.mon(target, 'collapse', me.onTargetCollapse, me);
 130         me.mon(target, 'expand', me.onTargetExpand, me);
 131
 132         me.el.addCls(me.baseCls + '-' + me.orientation);
 133         me.el.unselectable();
 134
 135         me.tracker = Ext.create('Ext.resizer.SplitterTracker', {
 136             el: me.el
 137         });
 138
 139         // Relay the most important events to our owner (could open wider later):
 140         me.relayEvents(me.tracker, [ 'beforedragstart', 'dragstart', 'dragend' ]);
 141     },
 142
 143     getCollapseDirection: function() {
 144         var me = this,
 145             idx,
 146             type = me.ownerCt.layout.type;
 147
 148         // Avoid duplication of string tests.
 149         // Create a two bit truth table of the configuration of the Splitter:
 150         // Collapse Target | orientation
 151         //        0              0             = next, horizontal
 152         //        0              1             = next, vertical
 153         //        1              0             = prev, horizontal
 154         //        1              1             = prev, vertical
 155         if (me.collapseTarget.isComponent) {
 156             idx = Number(me.ownerCt.items.indexOf(me.collapseTarget) == me.ownerCt.items.indexOf(me) - 1) &lt;&lt; 1 | Number(type == 'hbox');
 157         } else {
 158             idx = Number(me.collapseTarget == 'prev') &lt;&lt; 1 | Number(type == 'hbox');
 159         }
 160
 161         // Read the data out the truth table
 162         me.orientation = ['horizontal', 'vertical'][idx &amp; 1];
 163         return ['bottom', 'right', 'top', 'left'][idx];
 164     },
 165
 166     getCollapseTarget: function() {
 167         var me = this;
 168
 169         return me.collapseTarget.isComponent ? me.collapseTarget : me.collapseTarget == 'prev' ? me.previousSibling() : me.nextSibling();
 170     },
 171
 172     onTargetCollapse: function(target) {
 173         this.el.addCls([this.collapsedClsInternal, this.collapsedCls]);
 174     },
 175
 176     onTargetExpand: function(target) {
 177         this.el.removeCls([this.collapsedClsInternal, this.collapsedCls]);
 178     },
 179
 180     toggleTargetCmp: function(e, t) {
 181         var cmp = this.getCollapseTarget();
 182
 183         if (cmp.isVisible()) {
 184             // restore
 185             if (cmp.collapsed) {
 186                 cmp.expand(cmp.animCollapse);
 187             // collapse
 188             } else {
 189                 cmp.collapse(this.renderData.collapseDir, cmp.animCollapse);
 190             }
 191         }
 192     },
 193
 194     /*
 195      * Work around IE bug. %age margins do not get recalculated on element resize unless repaint called.
 196      */
 197     setSize: function() {
 198         var me = this;
 199         me.callParent(arguments);
 200         if (Ext.isIE) {
 201             me.el.repaint();
 202         }
 203     }
 204 });
 205 </pre>
 206 </body>
 207 </html>