[76] | 1 | /*! |
---|
| 2 | * Ext JS Library 3.4.0 |
---|
| 3 | * Copyright(c) 2006-2011 Sencha Inc. |
---|
| 4 | * licensing@sencha.com |
---|
| 5 | * http://www.sencha.com/license |
---|
| 6 | */ |
---|
| 7 | /** |
---|
| 8 | * @class Ext.ButtonGroup |
---|
| 9 | * @extends Ext.Panel |
---|
| 10 | * Container for a group of buttons. Example usage: |
---|
| 11 | * <pre><code> |
---|
| 12 | var p = new Ext.Panel({ |
---|
| 13 | title: 'Panel with Button Group', |
---|
| 14 | width: 300, |
---|
| 15 | height:200, |
---|
| 16 | renderTo: document.body, |
---|
| 17 | html: 'whatever', |
---|
| 18 | tbar: [{ |
---|
| 19 | xtype: 'buttongroup', |
---|
| 20 | {@link #columns}: 3, |
---|
| 21 | title: 'Clipboard', |
---|
| 22 | items: [{ |
---|
| 23 | text: 'Paste', |
---|
| 24 | scale: 'large', |
---|
| 25 | rowspan: 3, iconCls: 'add', |
---|
| 26 | iconAlign: 'top', |
---|
| 27 | cls: 'x-btn-as-arrow' |
---|
| 28 | },{ |
---|
| 29 | xtype:'splitbutton', |
---|
| 30 | text: 'Menu Button', |
---|
| 31 | scale: 'large', |
---|
| 32 | rowspan: 3, |
---|
| 33 | iconCls: 'add', |
---|
| 34 | iconAlign: 'top', |
---|
| 35 | arrowAlign:'bottom', |
---|
| 36 | menu: [{text: 'Menu Item 1'}] |
---|
| 37 | },{ |
---|
| 38 | xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}] |
---|
| 39 | },{ |
---|
| 40 | text: 'Copy', iconCls: 'add16' |
---|
| 41 | },{ |
---|
| 42 | text: 'Format', iconCls: 'add16' |
---|
| 43 | }] |
---|
| 44 | }] |
---|
| 45 | }); |
---|
| 46 | * </code></pre> |
---|
| 47 | * @constructor |
---|
| 48 | * Create a new ButtonGroup. |
---|
| 49 | * @param {Object} config The config object |
---|
| 50 | * @xtype buttongroup |
---|
| 51 | */ |
---|
| 52 | Ext.ButtonGroup = Ext.extend(Ext.Panel, { |
---|
| 53 | /** |
---|
| 54 | * @cfg {Number} columns The <tt>columns</tt> configuration property passed to the |
---|
| 55 | * {@link #layout configured layout manager}. See {@link Ext.layout.TableLayout#columns}. |
---|
| 56 | */ |
---|
| 57 | /** |
---|
| 58 | * @cfg {String} baseCls Defaults to <tt>'x-btn-group'</tt>. See {@link Ext.Panel#baseCls}. |
---|
| 59 | */ |
---|
| 60 | baseCls: 'x-btn-group', |
---|
| 61 | /** |
---|
| 62 | * @cfg {String} layout Defaults to <tt>'table'</tt>. See {@link Ext.Container#layout}. |
---|
| 63 | */ |
---|
| 64 | layout:'table', |
---|
| 65 | defaultType: 'button', |
---|
| 66 | /** |
---|
| 67 | * @cfg {Boolean} frame Defaults to <tt>true</tt>. See {@link Ext.Panel#frame}. |
---|
| 68 | */ |
---|
| 69 | frame: true, |
---|
| 70 | internalDefaults: {removeMode: 'container', hideParent: true}, |
---|
| 71 | |
---|
| 72 | initComponent : function(){ |
---|
| 73 | this.layoutConfig = this.layoutConfig || {}; |
---|
| 74 | Ext.applyIf(this.layoutConfig, { |
---|
| 75 | columns : this.columns |
---|
| 76 | }); |
---|
| 77 | if(!this.title){ |
---|
| 78 | this.addClass('x-btn-group-notitle'); |
---|
| 79 | } |
---|
| 80 | this.on('afterlayout', this.onAfterLayout, this); |
---|
| 81 | Ext.ButtonGroup.superclass.initComponent.call(this); |
---|
| 82 | }, |
---|
| 83 | |
---|
| 84 | applyDefaults : function(c){ |
---|
| 85 | c = Ext.ButtonGroup.superclass.applyDefaults.call(this, c); |
---|
| 86 | var d = this.internalDefaults; |
---|
| 87 | if(c.events){ |
---|
| 88 | Ext.applyIf(c.initialConfig, d); |
---|
| 89 | Ext.apply(c, d); |
---|
| 90 | }else{ |
---|
| 91 | Ext.applyIf(c, d); |
---|
| 92 | } |
---|
| 93 | return c; |
---|
| 94 | }, |
---|
| 95 | |
---|
| 96 | onAfterLayout : function(){ |
---|
| 97 | var bodyWidth = this.body.getFrameWidth('lr') + this.body.dom.firstChild.offsetWidth; |
---|
| 98 | this.body.setWidth(bodyWidth); |
---|
| 99 | this.el.setWidth(bodyWidth + this.getFrameWidth()); |
---|
| 100 | } |
---|
| 101 | /** |
---|
| 102 | * @cfg {Array} tools @hide |
---|
| 103 | */ |
---|
| 104 | }); |
---|
| 105 | |
---|
| 106 | Ext.reg('buttongroup', Ext.ButtonGroup); |
---|