Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / ButtonGroup.html
index 3717ee4..56bfcf1 100644 (file)
@@ -1,5 +1,22 @@
-<!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-container.ButtonGroup-method-constructor'><span id='Ext-container.ButtonGroup'>/**
-</span></span> * @class Ext.container.ButtonGroup
+<!DOCTYPE html>
+<html>
+<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>
+  <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-container-ButtonGroup'>/**
+</span> * @class Ext.container.ButtonGroup
  * @extends Ext.panel.Panel
  * &lt;p&gt;Provides a container for arranging a group of related Buttons in a tabular manner.&lt;/p&gt;
  * Example usage:
         }]
     });
  * &lt;/code&gt;&lt;/pre&gt;
- * @constructor
- * Create a new ButtonGroup.
- * @param {Object} config The config object
- * @xtype buttongroup
  */
 Ext.define('Ext.container.ButtonGroup', {
     extend: 'Ext.panel.Panel',
     alias: 'widget.buttongroup',
     alternateClassName: 'Ext.ButtonGroup',
 
-<span id='Ext-container.ButtonGroup-cfg-columns'>    /**
+<span id='Ext-container-ButtonGroup-cfg-columns'>    /**
 </span>     * @cfg {Number} columns The &lt;tt&gt;columns&lt;/tt&gt; configuration property passed to the
      * {@link #layout configured layout manager}. See {@link Ext.layout.container.Table#columns}.
      */
 
-<span id='Ext-container.ButtonGroup-cfg-baseCls'>    /**
+<span id='Ext-container-ButtonGroup-cfg-baseCls'>    /**
 </span>     * @cfg {String} baseCls  Defaults to &lt;tt&gt;'x-btn-group'&lt;/tt&gt;.  See {@link Ext.panel.Panel#baseCls}.
      */
     baseCls: Ext.baseCSSPrefix + 'btn-group',
 
-<span id='Ext-container.ButtonGroup-cfg-layout'>    /**
+<span id='Ext-container-ButtonGroup-cfg-layout'>    /**
 </span>     * @cfg {Object} layout  Defaults to &lt;tt&gt;'table'&lt;/tt&gt;.  See {@link Ext.container.Container#layout}.
      */
     layout: {
@@ -70,7 +83,7 @@ Ext.define('Ext.container.ButtonGroup', {
 
     defaultType: 'button',
 
-<span id='Ext-container.ButtonGroup-cfg-frame'>    /**
+<span id='Ext-container-ButtonGroup-cfg-frame'>    /**
 </span>     * @cfg {Boolean} frame  Defaults to &lt;tt&gt;true&lt;/tt&gt;.  See {@link Ext.panel.Panel#frame}.
      */
     frame: true,
@@ -113,12 +126,22 @@ Ext.define('Ext.container.ButtonGroup', {
         
         //we need to add an addition item in here so the ButtonGroup title is centered
         if (me.header) {
+            // Header text cannot flex, but must be natural size if it's being centered
+            delete me.header.items.items[0].flex;
+
+            // For Centering, surround the text with two flex:1 spacers.
+            me.suspendLayout = true;
+            me.header.insert(1, {
+                xtype: 'component',
+                ui   : me.ui,
+                flex : 1
+            });
             me.header.insert(0, {
                 xtype: 'component',
                 ui   : me.ui,
-                html : '&amp;nbsp;',
                 flex : 1
             });
+            me.suspendLayout = false;
         }
         
         me.callParent(arguments);
@@ -147,20 +170,22 @@ Ext.define('Ext.container.ButtonGroup', {
         return c;
     }
 
-<span id='Ext-container.ButtonGroup-cfg-tools'>    /**
+<span id='Ext-container-ButtonGroup-cfg-tools'>    /**
 </span>     * @cfg {Array} tools  @hide
      */
-<span id='Ext-container.ButtonGroup-cfg-collapsible'>    /**
+<span id='Ext-container-ButtonGroup-cfg-collapsible'>    /**
 </span>     * @cfg {Boolean} collapsible  @hide
      */
-<span id='Ext-container.ButtonGroup-cfg-collapseMode'>    /**
+<span id='Ext-container-ButtonGroup-cfg-collapseMode'>    /**
 </span>     * @cfg {Boolean} collapseMode  @hide
      */
-<span id='Ext-container.ButtonGroup-cfg-animCollapse'>    /**
+<span id='Ext-container-ButtonGroup-cfg-animCollapse'>    /**
 </span>     * @cfg {Boolean} animCollapse  @hide
      */
-<span id='Ext-container.ButtonGroup-cfg-closable'>    /**
+<span id='Ext-container-ButtonGroup-cfg-closable'>    /**
 </span>     * @cfg {Boolean} closable  @hide
      */
 });
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>