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             btnIconEl = owner.btnIconEl,
  55             sizeIconEl = (owner.icon || owner.iconCls) &amp;&amp; (owner.iconAlign == &quot;top&quot; || owner.iconAlign == &quot;bottom&quot;),
  56             minWidth = owner.minWidth,
  57             maxWidth = owner.maxWidth,
  58             ownerWidth, btnFrameWidth, metrics;
  59
  60         me.getTargetInfo();
  61         me.callParent(arguments);
  62
  63         btnInnerEl.unclip();
  64         me.setTargetSize(width, height);
  65
  66         if (!isNum(width)) {
  67             // In IE7 strict mode button elements with width:auto get strange extra side margins within
  68             // the wrapping table cell, but they go away if the width is explicitly set. So we measure
  69             // the size of the text and set the width to match.
  70             if (owner.text &amp;&amp; Ext.isIE7 &amp;&amp; Ext.isStrict &amp;&amp; btnEl &amp;&amp; btnEl.getWidth() &gt; 20) {
  71                 btnFrameWidth = me.btnFrameWidth;
  72                 metrics = Ext.util.TextMetrics.measure(btnInnerEl, owner.text);
  73                 ownerEl.setWidth(metrics.width + btnFrameWidth + me.adjWidth);
  74                 btnEl.setWidth(metrics.width + btnFrameWidth);
  75                 btnInnerEl.setWidth(metrics.width + btnFrameWidth);
  76
  77                 if (sizeIconEl) {
  78                     btnIconEl.setWidth(metrics.width + btnFrameWidth);
  79                 }
  80             } else {
  81                 // Remove any previous fixed widths
  82                 ownerEl.setWidth(null);
  83                 btnEl.setWidth(null);
  84                 btnInnerEl.setWidth(null);
  85                 btnIconEl.setWidth(null);
  86             }
  87
  88             // Handle maxWidth/minWidth config
  89             if (minWidth || maxWidth) {
  90                 ownerWidth = ownerEl.getWidth();
  91                 if (minWidth &amp;&amp; (ownerWidth &lt; minWidth)) {
  92                     me.setTargetSize(minWidth, height);
  93                 }
  94                 else if (maxWidth &amp;&amp; (ownerWidth &gt; maxWidth)) {
  95                     btnInnerEl.clip();
  96                     me.setTargetSize(maxWidth, height);
  97                 }
  98             }
  99         }
 100
 101         this.lastText = owner.text;
 102     },
 103
 104     setTargetSize: function(width, height) {
 105         var me = this,
 106             owner = me.owner,
 107             isNum = Ext.isNumber,
 108             btnInnerEl = owner.btnInnerEl,
 109             btnWidth = (isNum(width) ? width - me.adjWidth : width),
 110             btnHeight = (isNum(height) ? height - me.adjHeight : height),
 111             btnFrameHeight = me.btnFrameHeight,
 112             text = owner.getText(),
 113             textHeight;
 114
 115         me.callParent(arguments);
 116         me.setElementSize(owner.btnEl, btnWidth, btnHeight);
 117         me.setElementSize(btnInnerEl, btnWidth, btnHeight);
 118         if (isNum(btnHeight)) {
 119             btnInnerEl.setStyle('line-height', btnHeight - btnFrameHeight + 'px');
 120         }
 121
 122         // Button text may contain markup that would force it to wrap to more than one line (e.g. 'Button&lt;br&gt;Label').
 123         // When this happens, we cannot use the line-height set above for vertical centering; we instead reset the
 124         // line-height to normal, measure the rendered text height, and add padding-top to center the text block
 125         // vertically within the button's height. This is more expensive than the basic line-height approach so
 126         // we only do it if the text contains markup.
 127         if (text &amp;&amp; this.htmlRE.test(text)) {
 128             btnInnerEl.setStyle('line-height', 'normal');
 129             textHeight = Ext.util.TextMetrics.measure(btnInnerEl, text).height;
 130             btnInnerEl.setStyle('padding-top', me.btnFrameTop + Math.max(btnInnerEl.getHeight() - btnFrameHeight - textHeight, 0) / 2 + 'px');
 131             me.setElementSize(btnInnerEl, btnWidth, btnHeight);
 132         }
 133     },
 134
 135     getTargetInfo: function() {
 136         var me = this,
 137             owner = me.owner,
 138             ownerEl = owner.el,
 139             frameSize = me.frameSize,
 140             frameBody = owner.frameBody,
 141             btnWrap = owner.btnWrap,
 142             innerEl = owner.btnInnerEl;
 143
 144         if (!('adjWidth' in me)) {
 145             Ext.apply(me, {
 146                 // Width adjustment must take into account the arrow area. The btnWrap is the &lt;em&gt; which has padding to accommodate the arrow.
 147                 adjWidth: frameSize.left + frameSize.right + ownerEl.getBorderWidth('lr') + ownerEl.getPadding('lr') +
 148                           btnWrap.getPadding('lr') + (frameBody ? frameBody.getFrameWidth('lr') : 0),
 149                 adjHeight: frameSize.top + frameSize.bottom + ownerEl.getBorderWidth('tb') + ownerEl.getPadding('tb') +
 150                            btnWrap.getPadding('tb') + (frameBody ? frameBody.getFrameWidth('tb') : 0),
 151                 btnFrameWidth: innerEl.getFrameWidth('lr'),
 152                 btnFrameHeight: innerEl.getFrameWidth('tb'),
 153                 btnFrameTop: innerEl.getFrameWidth('t')
 154             });
 155         }
 156
 157         return me.callParent();
 158     }
 159 });</pre>
 160 </body>
 161 </html>