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