/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
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.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* Component layout for buttons
* @private
*/
Ext.define('Ext.layout.component.Button', {
/* Begin Definitions */
alias: ['layout.button'],
extend: 'Ext.layout.component.Auto',
/* End Definitions */
type: 'button',
htmlRE: /<.*>/,
beginLayout: function(ownerContext) {
var me = this,
owner = me.owner,
text = owner.text;
me.callParent(arguments);
ownerContext.btnWrapContext = ownerContext.getEl('btnWrap');
ownerContext.btnElContext = ownerContext.getEl('btnEl');
ownerContext.btnInnerElContext = ownerContext.getEl('btnInnerEl');
ownerContext.btnIconElContext = ownerContext.getEl('btnIconEl');
if (text && me.htmlRE.test(text)) {
ownerContext.isHtmlText = true;
// If the text contains HTML tag(s) we need to account for the possibility
// of multi-line-text. We have to remove the default line-height set by the
// stylesheet so that we can allow the browser to measure the natural
// height of the html content.
owner.btnInnerEl.setStyle('line-height', 'normal');
owner.btnInnerEl.setStyle('padding-top', '');
}
},
beginLayoutCycle: function(ownerContext) {
var owner = this.owner,
lastWidthModel = this.lastWidthModel;
this.callParent(arguments);
if (lastWidthModel && !this.lastWidthModel.shrinkWrap &&
ownerContext.widthModel.shrinkWrap) {
// clear any heights we set last time around if needed
owner.btnWrap.setStyle('height', '');
owner.btnEl.setStyle('height', '');
owner.btnInnerEl.setStyle('line-height', '');
}
},
calculate: function(ownerContext) {
var me = this,
owner = me.owner,
btnElContext = ownerContext.btnElContext,
btnInnerElContext = ownerContext.btnInnerElContext,
btnWrapContext = ownerContext.btnWrapContext,
mmax = Math.max,
ownerHeight, contentHeight, btnElHeight, innerElHeight;
me.callParent(arguments);
if (ownerContext.heightModel.shrinkWrap) {
// Buttons that have a shrink-wrapped height usually do not need any layout
// adjustments beause their layout is handled in CSS. An exception is made
// for buttons that contain html tags in their "text". These buttons need
// special handling to vertically center the inner element inside the button.
// measure the btnEl (the anchor element) to determine the available
// height for centering the inner element.
btnElHeight = owner.btnEl.getHeight();
if (ownerContext.isHtmlText) {
me.centerInnerEl(
ownerContext,
btnElHeight
);
me.ieCenterIcon(ownerContext, btnElHeight);
}
} else {
// Buttons with configured or calculated heights may need to stretch their
// inner elements to fit.
ownerHeight = ownerContext.getProp('height');
// If height is 0, skip out all this
if (ownerHeight) {
// contentHeight is the total available height inside the button's padding
// and framing
contentHeight = ownerHeight - ownerContext.getFrameInfo().height - ownerContext.getPaddingInfo().height;
// The btnElHeight is the total available height to be shared by the button's
// icon and text. For standard buttons this is the same as the contentHeight
// but must be adjusted for arrow height if the button has an arrow.
btnElHeight = contentHeight;
if ((owner.menu || owner.split) && owner.arrowAlign === 'bottom') {
// If the button has an arrow, subtract its size from the btnElHeight
// padding to account for the possibility of an arrow
btnElHeight -= btnWrapContext.getPaddingInfo().bottom;
}
// The innerElHeight is the total vertical space available for vertically
// centering the button text. By default this is the same as btnElHeight
// but it must be adjusted by the icon size if the button has a top
// or bottom icon.
innerElHeight = btnElHeight;
if ((owner.icon || owner.iconCls || owner.glyph) &&
(owner.iconAlign === 'top' || owner.iconAlign === 'bottom')) {
innerElHeight -= btnInnerElContext.getPaddingInfo().height;
}
btnWrapContext.setProp('height', mmax(0, contentHeight));
btnElContext.setProp('height', mmax(0, btnElHeight));
// ensure the button's text is vertically centered
if (ownerContext.isHtmlText) {
// if the button text contains html it must be vertically centered
// by measuring it and adding top padding.
me.centerInnerEl(ownerContext, btnElHeight);
} else {
// if the button text does not contain html we can just center it
// using line-height to avoid the extra measurement that happens
// inside of centerInnerEl() since multi-line text is not a possiblity
btnInnerElContext.setProp('line-height', mmax(0, innerElHeight) + 'px');
}
me.ieCenterIcon(ownerContext, btnElHeight);
} else if (ownerHeight !== 0) {
// Only fail if height was undefined, since it could be 0
me.done = false;
}
}
},
centerInnerEl: function(ownerContext, btnElHeight) {
var me = this,
btnInnerElContext = ownerContext.btnInnerElContext,
innerElHeight = me.owner.btnInnerEl.getHeight();
if (ownerContext.heightModel.shrinkWrap && (btnElHeight < innerElHeight)) {
// if the natural height of the html content is greater than the height
// of the button element (the anchor el), then expand the button element
// to fit
ownerContext.btnElContext.setHeight(innerElHeight);
} else if (btnElHeight > innerElHeight) {
// if the natural height of the html content is smaller than the height
// of the button element then we need to pad the top of the btnInnerEl
// so that it is vertically centered within the btnEl
btnInnerElContext.setProp(
'padding-top',
Math.round((btnElHeight - innerElHeight) / 2) +
// if the inner element already has top padding, as is the case
// when the button has a top-aligned icon, then add the existing
// padding to the padding adjustment.
btnInnerElContext.getPaddingInfo().top
);
}
},
ieCenterIcon: function(ownerContext, btnElHeight) {
var iconAlign = this.owner.iconAlign;
if ((Ext.isIEQuirks || Ext.isIE6) &&
(iconAlign === 'left' || iconAlign === 'right')) {
// Normally right/left aligned icon elements are vertically stretched using
// top:0, bottom:0, and the icon is vertically centered inside this element
// using background-position. This technique for vertical centering does not
// work in IE6 and IE quirks, so the stylesheet sets a fixed height on the
// icon element in these browsers. If the layout changes the height of the
// button the height of the icon element must also be modified.
ownerContext.btnIconElContext.setHeight(btnElHeight);
}
},
publishInnerWidth: function(ownerContext, width) {
if (this.owner.getFrameInfo().table) {
// if the framing template uses a table, we need to set the width of the
// inner element. Otherwise long text may stretch the element past its
// allowable width in IE.
ownerContext.btnInnerElContext.setWidth(
width -
// the inner el must be sized inside the owner's framing and padding
ownerContext.getFrameInfo().width - ownerContext.getPaddingInfo().width -
// There may also be padding on the btnWrap el, e.g. tab with close icon
// or button with arrow. This reduces the inner el size even further.
ownerContext.btnWrapContext.getPaddingInfo().width
);
}
}
});
|
Download
