docs/source/ButtonGroup.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-container.ButtonGroup-method-constructor'><span id='Ext-container.ButtonGroup'>/**
   2 </span></span> * @class Ext.container.ButtonGroup
   3  * @extends Ext.panel.Panel
   4  * &lt;p&gt;Provides a container for arranging a group of related Buttons in a tabular manner.&lt;/p&gt;
   5  * Example usage:
   6  * {@img Ext.container.ButtonGroup/Ext.container.ButtonGroup.png Ext.container.ButtonGroup component}
   7  * &lt;pre&gt;&lt;code&gt;
   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  * &lt;/code&gt;&lt;/pre&gt;
  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 <span id='Ext-container.ButtonGroup-cfg-columns'>    /**
  55 </span>     * @cfg {Number} columns The &lt;tt&gt;columns&lt;/tt&gt; configuration property passed to the
  56      * {@link #layout configured layout manager}. See {@link Ext.layout.container.Table#columns}.
  57      */
  58
  59 <span id='Ext-container.ButtonGroup-cfg-baseCls'>    /**
  60 </span>     * @cfg {String} baseCls  Defaults to &lt;tt&gt;'x-btn-group'&lt;/tt&gt;.  See {@link Ext.panel.Panel#baseCls}.
  61      */
  62     baseCls: Ext.baseCSSPrefix + 'btn-group',
  63
  64 <span id='Ext-container.ButtonGroup-cfg-layout'>    /**
  65 </span>     * @cfg {Object} layout  Defaults to &lt;tt&gt;'table'&lt;/tt&gt;.  See {@link Ext.container.Container#layout}.
  66      */
  67     layout: {
  68         type: 'table'
  69     },
  70
  71     defaultType: 'button',
  72
  73 <span id='Ext-container.ButtonGroup-cfg-frame'>    /**
  74 </span>     * @cfg {Boolean} frame  Defaults to &lt;tt&gt;true&lt;/tt&gt;.  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 &amp;&amp; (Ext.isIEQuirks || Ext.isIE6) &amp;&amp; !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 : '&amp;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 <span id='Ext-container.ButtonGroup-cfg-tools'>    /**
 151 </span>     * @cfg {Array} tools  @hide
 152      */
 153 <span id='Ext-container.ButtonGroup-cfg-collapsible'>    /**
 154 </span>     * @cfg {Boolean} collapsible  @hide
 155      */
 156 <span id='Ext-container.ButtonGroup-cfg-collapseMode'>    /**
 157 </span>     * @cfg {Boolean} collapseMode  @hide
 158      */
 159 <span id='Ext-container.ButtonGroup-cfg-animCollapse'>    /**
 160 </span>     * @cfg {Boolean} animCollapse  @hide
 161      */
 162 <span id='Ext-container.ButtonGroup-cfg-closable'>    /**
 163 </span>     * @cfg {Boolean} closable  @hide
 164      */
 165 });
 166 </pre></pre></body></html>