src/container/ButtonGroup.js

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