Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Splitter.html
index 54f9893..9dab950 100644 (file)
@@ -3,8 +3,8 @@
 <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-resizer-Splitter'>/**
-</span> * @class Ext.resizer.Splitter
- * @extends Ext.Component
- * &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}
- * layout&lt;/b&gt; to resize both immediate siblings.&lt;/p&gt;
- * &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
- * &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
- * by the layout.&lt;/p&gt;
- * &lt;p&gt;A Splitter may be configured to show a centered mini-collapse tool orientated to collapse the {@link #collapseTarget}.
+</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. &lt;b&gt;One&lt;/b&gt; 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 &lt;code&gt;{@link #performCollapse} false&lt;/code&gt;.&lt;/p&gt;
+ * of collapsing yourself, configure the splitter with &lt;code&gt;{@link #performCollapse} false&lt;/code&gt;.
  */
 Ext.define('Ext.resizer.Splitter', {
     extend: 'Ext.Component',
@@ -35,7 +35,10 @@ Ext.define('Ext.resizer.Splitter', {
     alias: 'widget.splitter',
 
     renderTpl: [
-        '&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;'
+        '&lt;tpl if=&quot;collapsible===true&quot;&gt;',
+            '&lt;div id=&quot;{id}-collapseEl&quot; class=&quot;', Ext.baseCSSPrefix, 'collapse-el ',
+                    Ext.baseCSSPrefix, 'layout-split-{collapseDir}&quot;&gt;&amp;nbsp;&lt;/div&gt;',
+        '&lt;/tpl&gt;'
     ],
 
     baseCls: Ext.baseCSSPrefix + 'splitter',
@@ -73,7 +76,7 @@ Ext.define('Ext.resizer.Splitter', {
      * 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}.
@@ -83,7 +86,7 @@ Ext.define('Ext.resizer.Splitter', {
     height: 5,
 
 <span id='Ext-resizer-Splitter-cfg-collapseTarget'>    /**
-</span>     * @cfg {Mixed} collapseTarget
+</span>     * @cfg {String/Ext.panel.Panel} collapseTarget
      * &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;
      * &lt;p&gt;Or the immediate sibling Panel to collapse.&lt;/p&gt;
      * &lt;p&gt;The orientation of the mini-collapse tool will be inferred from this setting.&lt;/p&gt;
@@ -107,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);
 
@@ -163,7 +165,7 @@ Ext.define('Ext.resizer.Splitter', {
 
     getCollapseTarget: function() {
         var me = this;
-        
+
         return me.collapseTarget.isComponent ? me.collapseTarget : me.collapseTarget == 'prev' ? me.previousSibling() : me.nextSibling();
     },