Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / 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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/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.isIE6 || 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 (btnHeight &gt;= 0) {
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>