--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-layout-component-Button'>/**
+</span> * 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;
+ },
+
+<span id='Ext-layout-component-Button-method-onLayout'> /**
+</span> * Set the dimensions of the inner &lt;button&gt; 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();
+ }
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff