X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/docs/source/Button2.html diff --git a/docs/source/Button2.html b/docs/source/Button2.html new file mode 100644 index 00000000..148b94d6 --- /dev/null +++ b/docs/source/Button2.html @@ -0,0 +1,154 @@ + + +
+ +/** + * Component layout for buttons + * @class Ext.layout.component.Button + * @extends Ext.layout.component.Component + * @private + */ +Ext.define('Ext.layout.component.Button', { + + /* Begin Definitions */ + + alias: ['layout.button'], + + extend: 'Ext.layout.component.Component', + + /* End Definitions */ + + type: 'button', + + cellClsRE: /-btn-(tl|br)\b/, + htmlRE: /<.*>/, + + beforeLayout: function() { + return this.callParent(arguments) || this.lastText !== this.owner.text; + }, + + /** + * Set the dimensions of the inner <button> element to match the + * component dimensions. + */ + onLayout: function(width, height) { + var me = this, + isNum = Ext.isNumber, + owner = me.owner, + ownerEl = owner.el, + btnEl = owner.btnEl, + btnInnerEl = owner.btnInnerEl, + minWidth = owner.minWidth, + maxWidth = owner.maxWidth, + ownerWidth, btnFrameWidth, metrics; + + me.getTargetInfo(); + me.callParent(arguments); + + btnInnerEl.unclip(); + me.setTargetSize(width, height); + + if (!isNum(width)) { + // In IE7 strict mode button elements with width:auto get strange extra side margins within + // the wrapping table cell, but they go away if the width is explicitly set. So we measure + // the size of the text and set the width to match. + if (owner.text && Ext.isIE7 && Ext.isStrict && btnEl && btnEl.getWidth() > 20) { + btnFrameWidth = me.btnFrameWidth; + metrics = Ext.util.TextMetrics.measure(btnInnerEl, owner.text); + ownerEl.setWidth(metrics.width + btnFrameWidth + me.adjWidth); + btnEl.setWidth(metrics.width + btnFrameWidth); + btnInnerEl.setWidth(metrics.width + btnFrameWidth); + } else { + // Remove any previous fixed widths + ownerEl.setWidth(null); + btnEl.setWidth(null); + btnInnerEl.setWidth(null); + } + + // Handle maxWidth/minWidth config + if (minWidth || maxWidth) { + ownerWidth = ownerEl.getWidth(); + if (minWidth && (ownerWidth < minWidth)) { + me.setTargetSize(minWidth, height); + } + else if (maxWidth && (ownerWidth > maxWidth)) { + btnInnerEl.clip(); + me.setTargetSize(maxWidth, height); + } + } + } + + this.lastText = owner.text; + }, + + setTargetSize: function(width, height) { + var me = this, + owner = me.owner, + isNum = Ext.isNumber, + btnInnerEl = owner.btnInnerEl, + btnWidth = (isNum(width) ? width - me.adjWidth : width), + btnHeight = (isNum(height) ? height - me.adjHeight : height), + btnFrameHeight = me.btnFrameHeight, + text = owner.getText(), + textHeight; + + me.callParent(arguments); + me.setElementSize(owner.btnEl, btnWidth, btnHeight); + me.setElementSize(btnInnerEl, btnWidth, btnHeight); + if (isNum(btnHeight)) { + btnInnerEl.setStyle('line-height', btnHeight - btnFrameHeight + 'px'); + } + + // Button text may contain markup that would force it to wrap to more than one line (e.g. 'Button<br>Label'). + // When this happens, we cannot use the line-height set above for vertical centering; we instead reset the + // line-height to normal, measure the rendered text height, and add padding-top to center the text block + // vertically within the button's height. This is more expensive than the basic line-height approach so + // we only do it if the text contains markup. + if (text && this.htmlRE.test(text)) { + btnInnerEl.setStyle('line-height', 'normal'); + textHeight = Ext.util.TextMetrics.measure(btnInnerEl, text).height; + btnInnerEl.setStyle('padding-top', me.btnFrameTop + Math.max(btnInnerEl.getHeight() - btnFrameHeight - textHeight, 0) / 2 + 'px'); + me.setElementSize(btnInnerEl, btnWidth, btnHeight); + } + }, + + getTargetInfo: function() { + var me = this, + owner = me.owner, + ownerEl = owner.el, + frameSize = me.frameSize, + frameBody = owner.frameBody, + btnWrap = owner.btnWrap, + innerEl = owner.btnInnerEl; + + if (!('adjWidth' in me)) { + Ext.apply(me, { + // Width adjustment must take into account the arrow area. The btnWrap is the <em> which has padding to accommodate the arrow. + adjWidth: frameSize.left + frameSize.right + ownerEl.getBorderWidth('lr') + ownerEl.getPadding('lr') + + btnWrap.getPadding('lr') + (frameBody ? frameBody.getFrameWidth('lr') : 0), + adjHeight: frameSize.top + frameSize.bottom + ownerEl.getBorderWidth('tb') + ownerEl.getPadding('tb') + + btnWrap.getPadding('tb') + (frameBody ? frameBody.getFrameWidth('tb') : 0), + btnFrameWidth: innerEl.getFrameWidth('lr'), + btnFrameHeight: innerEl.getFrameWidth('tb'), + btnFrameTop: innerEl.getFrameWidth('t') + }); + } + + return me.callParent(); + } +});+ +