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