docs/source/ButtonGroup.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-container-ButtonGroup'>/**
  19 </span> * @class Ext.container.ButtonGroup
  20  * @extends Ext.panel.Panel
  21  * &lt;p&gt;Provides a container for arranging a group of related Buttons in a tabular manner.&lt;/p&gt;
  22  * Example usage:
  23  * {@img Ext.container.ButtonGroup/Ext.container.ButtonGroup.png Ext.container.ButtonGroup component}
  24  * &lt;pre&gt;&lt;code&gt;
  25     Ext.create('Ext.panel.Panel', {
  26         title: 'Panel with ButtonGroup',
  27         width: 300,
  28         height:200,
  29         renderTo: document.body,
  30         html: 'HTML Panel Content',
  31         tbar: [{
  32             xtype: 'buttongroup',
  33             columns: 3,
  34             title: 'Clipboard',
  35             items: [{
  36                 text: 'Paste',
  37                 scale: 'large',
  38                 rowspan: 3,
  39                 iconCls: 'add',
  40                 iconAlign: 'top',
  41                 cls: 'x-btn-as-arrow'
  42             },{
  43                 xtype:'splitbutton',
  44                 text: 'Menu Button',
  45                 scale: 'large',
  46                 rowspan: 3,
  47                 iconCls: 'add',
  48                 iconAlign: 'top',
  49                 arrowAlign:'bottom',
  50                 menu: [{text: 'Menu Item 1'}]
  51             },{
  52                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
  53             },{
  54                 text: 'Copy', iconCls: 'add16'
  55             },{
  56                 text: 'Format', iconCls: 'add16'
  57             }]
  58         }]
  59     });
  60  * &lt;/code&gt;&lt;/pre&gt;
  61  */
  62 Ext.define('Ext.container.ButtonGroup', {
  63     extend: 'Ext.panel.Panel',
  64     alias: 'widget.buttongroup',
  65     alternateClassName: 'Ext.ButtonGroup',
  66
  67 <span id='Ext-container-ButtonGroup-cfg-columns'>    /**
  68 </span>     * @cfg {Number} columns The &lt;tt&gt;columns&lt;/tt&gt; configuration property passed to the
  69      * {@link #layout configured layout manager}. See {@link Ext.layout.container.Table#columns}.
  70      */
  71
  72 <span id='Ext-container-ButtonGroup-cfg-baseCls'>    /**
  73 </span>     * @cfg {String} baseCls  Defaults to &lt;tt&gt;'x-btn-group'&lt;/tt&gt;.  See {@link Ext.panel.Panel#baseCls}.
  74      */
  75     baseCls: Ext.baseCSSPrefix + 'btn-group',
  76
  77 <span id='Ext-container-ButtonGroup-cfg-layout'>    /**
  78 </span>     * @cfg {Object} layout  Defaults to &lt;tt&gt;'table'&lt;/tt&gt;.  See {@link Ext.container.Container#layout}.
  79      */
  80     layout: {
  81         type: 'table'
  82     },
  83
  84     defaultType: 'button',
  85
  86 <span id='Ext-container-ButtonGroup-cfg-frame'>    /**
  87 </span>     * @cfg {Boolean} frame  Defaults to &lt;tt&gt;true&lt;/tt&gt;.  See {@link Ext.panel.Panel#frame}.
  88      */
  89     frame: true,
  90
  91     frameHeader: false,
  92
  93     internalDefaults: {removeMode: 'container', hideParent: true},
  94
  95     initComponent : function(){
  96         // Copy the component's columns config to the layout if specified
  97         var me = this,
  98             cols = me.columns;
  99
 100         me.noTitleCls = me.baseCls + '-notitle';
 101         if (cols) {
 102             me.layout = Ext.apply({}, {columns: cols}, me.layout);
 103         }
 104
 105         if (!me.title) {
 106             me.addCls(me.noTitleCls);
 107         }
 108         me.callParent(arguments);
 109     },
 110
 111     afterLayout: function() {
 112         var me = this;
 113
 114         me.callParent(arguments);
 115
 116         // Pugly hack for a pugly browser:
 117         // If not an explicitly set width, then size the width to match the inner table
 118         if (me.layout.table &amp;&amp; (Ext.isIEQuirks || Ext.isIE6) &amp;&amp; !me.width) {
 119             var t = me.getTargetEl();
 120             t.setWidth(me.layout.table.offsetWidth + t.getPadding('lr'));
 121         }
 122     },
 123
 124     afterRender: function() {
 125         var me = this;
 126
 127         //we need to add an addition item in here so the ButtonGroup title is centered
 128         if (me.header) {
 129             // Header text cannot flex, but must be natural size if it's being centered
 130             delete me.header.items.items[0].flex;
 131
 132             // For Centering, surround the text with two flex:1 spacers.
 133             me.suspendLayout = true;
 134             me.header.insert(1, {
 135                 xtype: 'component',
 136                 ui   : me.ui,
 137                 flex : 1
 138             });
 139             me.header.insert(0, {
 140                 xtype: 'component',
 141                 ui   : me.ui,
 142                 flex : 1
 143             });
 144             me.suspendLayout = false;
 145         }
 146
 147         me.callParent(arguments);
 148     },
 149
 150     // private
 151     onBeforeAdd: function(component) {
 152         if (component.is('button')) {
 153             component.ui = component.ui + '-toolbar';
 154         }
 155         this.callParent(arguments);
 156     },
 157
 158     //private
 159     applyDefaults: function(c) {
 160         if (!Ext.isString(c)) {
 161             c = this.callParent(arguments);
 162             var d = this.internalDefaults;
 163             if (c.events) {
 164                 Ext.applyIf(c.initialConfig, d);
 165                 Ext.apply(c, d);
 166             } else {
 167                 Ext.applyIf(c, d);
 168             }
 169         }
 170         return c;
 171     }
 172
 173 <span id='Ext-container-ButtonGroup-cfg-tools'>    /**
 174 </span>     * @cfg {Array} tools  @hide
 175      */
 176 <span id='Ext-container-ButtonGroup-cfg-collapsible'>    /**
 177 </span>     * @cfg {Boolean} collapsible  @hide
 178      */
 179 <span id='Ext-container-ButtonGroup-cfg-collapseMode'>    /**
 180 </span>     * @cfg {Boolean} collapseMode  @hide
 181      */
 182 <span id='Ext-container-ButtonGroup-cfg-animCollapse'>    /**
 183 </span>     * @cfg {Boolean} animCollapse  @hide
 184      */
 185 <span id='Ext-container-ButtonGroup-cfg-closable'>    /**
 186 </span>     * @cfg {Boolean} closable  @hide
 187      */
 188 });
 189 </pre>
 190 </body>
 191 </html>