Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / 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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/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> * This class functions between siblings of a {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox}
20  * layout to resize both immediate siblings.
21  *
22  * By default it will set the size of both siblings. &lt;b&gt;One&lt;/b&gt; of the siblings may be configured with
23  * `{@link Ext.Component#maintainFlex maintainFlex}: true` which will cause it not to receive a new size explicitly, but to be resized
24  * by the layout.
25  *
26  * 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;.
30  */
31 Ext.define('Ext.resizer.Splitter', {
32     extend: 'Ext.Component',
33     requires: ['Ext.XTemplate'],
34     uses: ['Ext.resizer.SplitterTracker'],
35     alias: 'widget.splitter',
36
37     renderTpl: [
38         '&lt;tpl if=&quot;collapsible===true&quot;&gt;',
39             '&lt;div id=&quot;{id}-collapseEl&quot; class=&quot;', Ext.baseCSSPrefix, 'collapse-el ',
40                     Ext.baseCSSPrefix, 'layout-split-{collapseDir}&quot;&gt;&amp;nbsp;&lt;/div&gt;',
41         '&lt;/tpl&gt;'
42     ],
43
44     baseCls: Ext.baseCSSPrefix + 'splitter',
45     collapsedClsInternal: Ext.baseCSSPrefix + 'splitter-collapsed',
46
47 <span id='Ext-resizer-Splitter-cfg-collapsible'>    /**
48 </span>     * @cfg {Boolean} collapsible
49      * &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.
50      * Defaults to the {@link Ext.panel.Panel#collapsible collapsible} setting of the Panel.
51      */
52     collapsible: false,
53
54 <span id='Ext-resizer-Splitter-cfg-performCollapse'>    /**
55 </span>     * @cfg {Boolean} performCollapse
56      * &lt;p&gt;Set to &lt;code&gt;false&lt;/code&gt; to prevent this Splitter's mini-collapse tool from managing the collapse
57      * state of the {@link #collapseTarget}.&lt;/p&gt;
58      */
59
60 <span id='Ext-resizer-Splitter-cfg-collapseOnDblClick'>    /**
61 </span>     * @cfg {Boolean} collapseOnDblClick
62      * &lt;code&gt;true&lt;/code&gt; to enable dblclick to toggle expand and collapse on the {@link #collapseTarget} Panel.
63      */
64     collapseOnDblClick: true,
65
66 <span id='Ext-resizer-Splitter-cfg-defaultSplitMin'>    /**
67 </span>     * @cfg {Number} defaultSplitMin
68      * Provides a default minimum width or height for the two components
69      * that the splitter is between.
70      */
71     defaultSplitMin: 40,
72
73 <span id='Ext-resizer-Splitter-cfg-defaultSplitMax'>    /**
74 </span>     * @cfg {Number} defaultSplitMax
75      * Provides a default maximum width or height for the two components
76      * that the splitter is between.
77      */
78     defaultSplitMax: 1000,
79
80 <span id='Ext-resizer-Splitter-cfg-collapsedCls'>    /**
81 </span>     * @cfg {String} collapsedCls
82      * A class to add to the splitter when it is collapsed. See {@link #collapsible}.
83      */
84
85     width: 5,
86     height: 5,
87
88 <span id='Ext-resizer-Splitter-cfg-collapseTarget'>    /**
89 </span>     * @cfg {String/Ext.panel.Panel} collapseTarget
90      * &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;
91      * &lt;p&gt;Or the immediate sibling Panel to collapse.&lt;/p&gt;
92      * &lt;p&gt;The orientation of the mini-collapse tool will be inferred from this setting.&lt;/p&gt;
93      * &lt;p&gt;&lt;b&gt;Note that only Panels may be collapsed.&lt;/b&gt;&lt;/p&gt;
94      */
95     collapseTarget: 'next',
96
97 <span id='Ext-resizer-Splitter-property-orientation'>    /**
98 </span>     * @property orientation
99      * @type String
100      * Orientation of this Splitter. &lt;code&gt;'vertical'&lt;/code&gt; when used in an hbox layout, &lt;code&gt;'horizontal'&lt;/code&gt;
101      * when used in a vbox layout.
102      */
103
104     onRender: function() {
105         var me = this,
106             target = me.getCollapseTarget(),
107             collapseDir = me.getCollapseDirection();
108
109         Ext.applyIf(me.renderData, {
110             collapseDir: collapseDir,
111             collapsible: me.collapsible || target.collapsible
112         });
113
114         me.addChildEls('collapseEl');
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>