3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * Component layout for buttons
17 * @class Ext.layout.component.Button
18 * @extends Ext.layout.component.Component
21 Ext.define('Ext.layout.component.Button', {
23 /* Begin Definitions */
25 alias: ['layout.button'],
27 extend: 'Ext.layout.component.Component',
33 cellClsRE: /-btn-(tl|br)\b/,
36 beforeLayout: function() {
37 return this.callParent(arguments) || this.lastText !== this.owner.text;
41 * Set the dimensions of the inner <button> element to match the
42 * component dimensions.
44 onLayout: function(width, height) {
50 btnInnerEl = owner.btnInnerEl,
51 btnIconEl = owner.btnIconEl,
52 sizeIconEl = (owner.icon || owner.iconCls) && (owner.iconAlign == "top" || owner.iconAlign == "bottom"),
53 minWidth = owner.minWidth,
54 maxWidth = owner.maxWidth,
55 ownerWidth, btnFrameWidth, metrics;
58 me.callParent(arguments);
61 me.setTargetSize(width, height);
64 // In IE7 strict mode button elements with width:auto get strange extra side margins within
65 // the wrapping table cell, but they go away if the width is explicitly set. So we measure
66 // the size of the text and set the width to match.
67 if (owner.text && (Ext.isIE6 || Ext.isIE7) && Ext.isStrict && btnEl && btnEl.getWidth() > 20) {
68 btnFrameWidth = me.btnFrameWidth;
69 metrics = Ext.util.TextMetrics.measure(btnInnerEl, owner.text);
70 ownerEl.setWidth(metrics.width + btnFrameWidth + me.adjWidth);
71 btnEl.setWidth(metrics.width + btnFrameWidth);
72 btnInnerEl.setWidth(metrics.width + btnFrameWidth);
75 btnIconEl.setWidth(metrics.width + btnFrameWidth);
78 // Remove any previous fixed widths
79 ownerEl.setWidth(null);
81 btnInnerEl.setWidth(null);
82 btnIconEl.setWidth(null);
85 // Handle maxWidth/minWidth config
86 if (minWidth || maxWidth) {
87 ownerWidth = ownerEl.getWidth();
88 if (minWidth && (ownerWidth < minWidth)) {
89 me.setTargetSize(minWidth, height);
91 else if (maxWidth && (ownerWidth > maxWidth)) {
93 me.setTargetSize(maxWidth, height);
98 this.lastText = owner.text;
101 setTargetSize: function(width, height) {
104 isNum = Ext.isNumber,
105 btnInnerEl = owner.btnInnerEl,
106 btnWidth = (isNum(width) ? width - me.adjWidth : width),
107 btnHeight = (isNum(height) ? height - me.adjHeight : height),
108 btnFrameHeight = me.btnFrameHeight,
109 text = owner.getText(),
112 me.callParent(arguments);
113 me.setElementSize(owner.btnEl, btnWidth, btnHeight);
114 me.setElementSize(btnInnerEl, btnWidth, btnHeight);
115 if (btnHeight >= 0) {
116 btnInnerEl.setStyle('line-height', btnHeight - btnFrameHeight + 'px');
119 // Button text may contain markup that would force it to wrap to more than one line (e.g. 'Button<br>Label').
120 // When this happens, we cannot use the line-height set above for vertical centering; we instead reset the
121 // line-height to normal, measure the rendered text height, and add padding-top to center the text block
122 // vertically within the button's height. This is more expensive than the basic line-height approach so
123 // we only do it if the text contains markup.
124 if (text && this.htmlRE.test(text)) {
125 btnInnerEl.setStyle('line-height', 'normal');
126 textHeight = Ext.util.TextMetrics.measure(btnInnerEl, text).height;
127 btnInnerEl.setStyle('padding-top', me.btnFrameTop + Math.max(btnInnerEl.getHeight() - btnFrameHeight - textHeight, 0) / 2 + 'px');
128 me.setElementSize(btnInnerEl, btnWidth, btnHeight);
132 getTargetInfo: function() {
136 frameSize = me.frameSize,
137 frameBody = owner.frameBody,
138 btnWrap = owner.btnWrap,
139 innerEl = owner.btnInnerEl;
141 if (!('adjWidth' in me)) {
143 // Width adjustment must take into account the arrow area. The btnWrap is the <em> which has padding to accommodate the arrow.
144 adjWidth: frameSize.left + frameSize.right + ownerEl.getBorderWidth('lr') + ownerEl.getPadding('lr') +
145 btnWrap.getPadding('lr') + (frameBody ? frameBody.getFrameWidth('lr') : 0),
146 adjHeight: frameSize.top + frameSize.bottom + ownerEl.getBorderWidth('tb') + ownerEl.getPadding('tb') +
147 btnWrap.getPadding('tb') + (frameBody ? frameBody.getFrameWidth('tb') : 0),
148 btnFrameWidth: innerEl.getFrameWidth('lr'),
149 btnFrameHeight: innerEl.getFrameWidth('tb'),
150 btnFrameTop: innerEl.getFrameWidth('t')
154 return me.callParent();