docs/source/Button2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-layout-component-Button'>/**
  19 </span> * Component layout for buttons
  20  * @class Ext.layout.component.Button
  21  * @extends Ext.layout.component.Component
  22  * @private
  23  */
  24 Ext.define('Ext.layout.component.Button', {
  25
  26     /* Begin Definitions */
  27
  28     alias: ['layout.button'],
  29
  30     extend: 'Ext.layout.component.Component',
  31
  32     /* End Definitions */
  33
  34     type: 'button',
  35
  36     cellClsRE: /-btn-(tl|br)\b/,
  37     htmlRE: /&lt;.*&gt;/,
  38
  39     beforeLayout: function() {
  40         return this.callParent(arguments) || this.lastText !== this.owner.text;
  41     },
  42
  43 <span id='Ext-layout-component-Button-method-onLayout'>    /**
  44 </span>     * Set the dimensions of the inner &amp;lt;button&amp;gt; element to match the
  45      * component dimensions.
  46      */
  47     onLayout: function(width, height) {
  48         var me = this,
  49             isNum = Ext.isNumber,
  50             owner = me.owner,
  51             ownerEl = owner.el,
  52             btnEl = owner.btnEl,
  53             btnInnerEl = owner.btnInnerEl,
  54             minWidth = owner.minWidth,
  55             maxWidth = owner.maxWidth,
  56             ownerWidth, btnFrameWidth, metrics;
  57
  58         me.getTargetInfo();
  59         me.callParent(arguments);
  60
  61         btnInnerEl.unclip();
  62         me.setTargetSize(width, height);
  63
  64         if (!isNum(width)) {
  65             // In IE7 strict mode button elements with width:auto get strange extra side margins within
  66             // the wrapping table cell, but they go away if the width is explicitly set. So we measure
  67             // the size of the text and set the width to match.
  68             if (owner.text &amp;&amp; Ext.isIE7 &amp;&amp; Ext.isStrict &amp;&amp; btnEl &amp;&amp; btnEl.getWidth() &gt; 20) {
  69                 btnFrameWidth = me.btnFrameWidth;
  70                 metrics = Ext.util.TextMetrics.measure(btnInnerEl, owner.text);
  71                 ownerEl.setWidth(metrics.width + btnFrameWidth + me.adjWidth);
  72                 btnEl.setWidth(metrics.width + btnFrameWidth);
  73                 btnInnerEl.setWidth(metrics.width + btnFrameWidth);
  74             } else {
  75                 // Remove any previous fixed widths
  76                 ownerEl.setWidth(null);
  77                 btnEl.setWidth(null);
  78                 btnInnerEl.setWidth(null);
  79             }
  80
  81             // Handle maxWidth/minWidth config
  82             if (minWidth || maxWidth) {
  83                 ownerWidth = ownerEl.getWidth();
  84                 if (minWidth &amp;&amp; (ownerWidth &lt; minWidth)) {
  85                     me.setTargetSize(minWidth, height);
  86                 }
  87                 else if (maxWidth &amp;&amp; (ownerWidth &gt; maxWidth)) {
  88                     btnInnerEl.clip();
  89                     me.setTargetSize(maxWidth, height);
  90                 }
  91             }
  92         }
  93
  94         this.lastText = owner.text;
  95     },
  96
  97     setTargetSize: function(width, height) {
  98         var me = this,
  99             owner = me.owner,
 100             isNum = Ext.isNumber,
 101             btnInnerEl = owner.btnInnerEl,
 102             btnWidth = (isNum(width) ? width - me.adjWidth : width),
 103             btnHeight = (isNum(height) ? height - me.adjHeight : height),
 104             btnFrameHeight = me.btnFrameHeight,
 105             text = owner.getText(),
 106             textHeight;
 107
 108         me.callParent(arguments);
 109         me.setElementSize(owner.btnEl, btnWidth, btnHeight);
 110         me.setElementSize(btnInnerEl, btnWidth, btnHeight);
 111         if (isNum(btnHeight)) {
 112             btnInnerEl.setStyle('line-height', btnHeight - btnFrameHeight + 'px');
 113         }
 114
 115         // Button text may contain markup that would force it to wrap to more than one line (e.g. 'Button&lt;br&gt;Label').
 116         // When this happens, we cannot use the line-height set above for vertical centering; we instead reset the
 117         // line-height to normal, measure the rendered text height, and add padding-top to center the text block
 118         // vertically within the button's height. This is more expensive than the basic line-height approach so
 119         // we only do it if the text contains markup.
 120         if (text &amp;&amp; this.htmlRE.test(text)) {
 121             btnInnerEl.setStyle('line-height', 'normal');
 122             textHeight = Ext.util.TextMetrics.measure(btnInnerEl, text).height;
 123             btnInnerEl.setStyle('padding-top', me.btnFrameTop + Math.max(btnInnerEl.getHeight() - btnFrameHeight - textHeight, 0) / 2 + 'px');
 124             me.setElementSize(btnInnerEl, btnWidth, btnHeight);
 125         }
 126     },
 127
 128     getTargetInfo: function() {
 129         var me = this,
 130             owner = me.owner,
 131             ownerEl = owner.el,
 132             frameSize = me.frameSize,
 133             frameBody = owner.frameBody,
 134             btnWrap = owner.btnWrap,
 135             innerEl = owner.btnInnerEl;
 136
 137         if (!('adjWidth' in me)) {
 138             Ext.apply(me, {
 139                 // Width adjustment must take into account the arrow area. The btnWrap is the &lt;em&gt; which has padding to accommodate the arrow.
 140                 adjWidth: frameSize.left + frameSize.right + ownerEl.getBorderWidth('lr') + ownerEl.getPadding('lr') +
 141                           btnWrap.getPadding('lr') + (frameBody ? frameBody.getFrameWidth('lr') : 0),
 142                 adjHeight: frameSize.top + frameSize.bottom + ownerEl.getBorderWidth('tb') + ownerEl.getPadding('tb') +
 143                            btnWrap.getPadding('tb') + (frameBody ? frameBody.getFrameWidth('tb') : 0),
 144                 btnFrameWidth: innerEl.getFrameWidth('lr'),
 145                 btnFrameHeight: innerEl.getFrameWidth('tb'),
 146                 btnFrameTop: innerEl.getFrameWidth('t')
 147             });
 148         }
 149
 150         return me.callParent();
 151     }
 152 });</pre>
 153 </body>
 154 </html>