src/container/ButtonGroup.js

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