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  * Provides a container for arranging a group of related Buttons in a tabular manner.
  17  *
  18  *     @example
  19  *     Ext.create('Ext.panel.Panel', {
  20  *         title: 'Panel with ButtonGroup',
  21  *         width: 300,
  22  *         height:200,
  23  *         renderTo: document.body,
  24  *         bodyPadding: 10,
  25  *         html: 'HTML Panel Content',
  26  *         tbar: [{
  27  *             xtype: 'buttongroup',
  28  *             columns: 3,
  29  *             title: 'Clipboard',
  30  *             items: [{
  31  *                 text: 'Paste',
  32  *                 scale: 'large',
  33  *                 rowspan: 3,
  34  *                 iconCls: 'add',
  35  *                 iconAlign: 'top',
  36  *                 cls: 'btn-as-arrow'
  37  *             },{
  38  *                 xtype:'splitbutton',
  39  *                 text: 'Menu Button',
  40  *                 scale: 'large',
  41  *                 rowspan: 3,
  42  *                 iconCls: 'add',
  43  *                 iconAlign: 'top',
  44  *                 arrowAlign:'bottom',
  45  *                 menu: [{ text: 'Menu Item 1' }]
  46  *             },{
  47  *                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
  48  *             },{
  49  *                 text: 'Copy', iconCls: 'add16'
  50  *             },{
  51  *                 text: 'Format', iconCls: 'add16'
  52  *             }]
  53  *         }]
  54  *     });
  55  *
  56  */
  57 Ext.define('Ext.container.ButtonGroup', {
  58     extend: 'Ext.panel.Panel',
  59     alias: 'widget.buttongroup',
  60     alternateClassName: 'Ext.ButtonGroup',
  61
  62     /**
  63      * @cfg {Number} columns The `columns` configuration property passed to the
  64      * {@link #layout configured layout manager}. See {@link Ext.layout.container.Table#columns}.
  65      */
  66
  67     /**
  68      * @cfg {String} baseCls  Defaults to <tt>'x-btn-group'</tt>.  See {@link Ext.panel.Panel#baseCls}.
  69      */
  70     baseCls: Ext.baseCSSPrefix + 'btn-group',
  71
  72     /**
  73      * @cfg {Object} layout  Defaults to <tt>'table'</tt>.  See {@link Ext.container.Container#layout}.
  74      */
  75     layout: {
  76         type: 'table'
  77     },
  78
  79     defaultType: 'button',
  80
  81     /**
  82      * @cfg {Boolean} frame  Defaults to <tt>true</tt>.  See {@link Ext.panel.Panel#frame}.
  83      */
  84     frame: true,
  85
  86     frameHeader: false,
  87
  88     internalDefaults: {removeMode: 'container', hideParent: true},
  89
  90     initComponent : function(){
  91         // Copy the component's columns config to the layout if specified
  92         var me = this,
  93             cols = me.columns;
  94
  95         me.noTitleCls = me.baseCls + '-notitle';
  96         if (cols) {
  97             me.layout = Ext.apply({}, {columns: cols}, me.layout);
  98         }
  99
 100         if (!me.title) {
 101             me.addCls(me.noTitleCls);
 102         }
 103         me.callParent(arguments);
 104     },
 105
 106     afterLayout: function() {
 107         var me = this;
 108
 109         me.callParent(arguments);
 110
 111         // Pugly hack for a pugly browser:
 112         // If not an explicitly set width, then size the width to match the inner table
 113         if (me.layout.table && (Ext.isIEQuirks || Ext.isIE6) && !me.width) {
 114             var t = me.getTargetEl();
 115             t.setWidth(me.layout.table.offsetWidth + t.getPadding('lr'));
 116         }
 117
 118         // IE7 needs a forced repaint to make the top framing div expand to full width
 119         if (Ext.isIE7) {
 120             me.el.repaint();
 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     /**
 174      * @cfg {Array} tools  @hide
 175      */
 176     /**
 177      * @cfg {Boolean} collapsible  @hide
 178      */
 179     /**
 180      * @cfg {Boolean} collapseMode  @hide
 181      */
 182     /**
 183      * @cfg {Boolean} animCollapse  @hide
 184      */
 185     /**
 186      * @cfg {Boolean} closable  @hide
 187      */
 188 });
 189