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); |
---|