/ext-4.1.0_b3/docs/source/Text.html
HTML | 195 lines | 180 code | 15 blank | 0 comment | 0 complexity | faa98574a3cd03e0ab2ce88e3e9d96ae MD5 | raw file
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-draw-Text-method-constructor'><span id='Ext-draw-Text'>/**
19</span></span> * This class encapsulates a drawn text item as rendered by the Ext.draw package within a Component which can be
20 * then used anywhere in an ExtJS application just like any other Component.
21 *
22 * ## Example usage
23 *
24 * @example
25 * Ext.create('Ext.panel.Panel', {
26 * title: 'Panel with VerticalTextItem',
27 * width: 300,
28 * height: 200,
29 * lbar: {
30 * layout: {
31 * align: 'center'
32 * },
33 * items: [{
34 * xtype: 'text',
35 * text: 'Sample VerticalTextItem',
36 * degrees: 90
37 * }]
38 * },
39 * renderTo: Ext.getBody()
40 * });
41 *
42 * @constructor
43 * Creates a new Text Component
44 * @param {Object} text A config object containing a `text` property, a `degrees` property,
45 * and, optionally, a `styleSelector` property which specifies a selector which provides CSS rules to
46 * give font family, size and color to the drawn text.
47 */
48Ext.define('Ext.draw.Text', {
49 extend: 'Ext.draw.Component',
50 uses: ['Ext.util.CSS'],
51 alias: 'widget.text',
52
53<span id='Ext-draw-Text-cfg-text'> /**
54</span> * @cfg {String} text
55 * The text to display (html tags are <b>not</b> accepted)
56 */
57 text: '',
58
59<span id='Ext-draw-Text-cfg-styleSelector'> /**
60</span> * @cfg {String} styleSelector
61 * A CSS selector string which matches a style rule in the document stylesheet from which
62 * the text's font properties are read.
63 *
64 * **Drawn** text is not styled by CSS, but by properties set during its construction, so these styles
65 * must be programatically read from a stylesheet rule found via a selector at construction time.
66 */
67
68<span id='Ext-draw-Text-cfg-degrees'> /**
69</span> * @cfg {Number} degrees
70 * The angle by which to initially rotate the text clockwise. Defaults to zero.
71 */
72
73 focusable: false,
74 viewBox: false,
75 autoSize: true,
76 baseCls: Ext.baseCSSPrefix + 'surface ' + Ext.baseCSSPrefix + 'draw-text',
77
78 initComponent: function() {
79 var me = this;
80
81 me.textConfig = Ext.apply({
82 type: 'text',
83 text: me.text,
84 rotate: {
85 degrees: me.degrees || 0
86 }
87 }, me.textStyle);
88 Ext.apply(me.textConfig, me.getStyles(me.styleSelectors || me.styleSelector));
89
90 // Surface is created from the *initialConfig*, not the current object state,
91 // So the generated items must go into the initialConfig
92 me.initialConfig.items = [me.textConfig];
93 me.callParent(arguments);
94 },
95
96<span id='Ext-draw-Text-method-getStyles'> /**
97</span> * @private
98 * Accumulates a style object based upon the styles specified in document stylesheets
99 * by an array of CSS selectors
100 */
101 getStyles: function(selectors) {
102 selectors = Ext.Array.from(selectors);
103 var i = 0,
104 len = selectors.length,
105 rule,
106 style,
107 prop,
108 result = {};
109
110 for (; i < len; i++) {
111 // Get the style rule which exactly matches the selector.
112 rule = Ext.util.CSS.getRule(selectors[i]);
113 if (rule) {
114 style = rule.style;
115 if (style) {
116 Ext.apply(result, {
117 'font-family': style.fontFamily,
118 'font-weight': style.fontWeight,
119 'line-height': style.lineHeight,
120 'font-size': style.fontSize,
121 fill: style.color
122 });
123 }
124 }
125 }
126 return result;
127 },
128
129<span id='Ext-draw-Text-method-setAngle'> /**
130</span> * Sets the clockwise rotation angle relative to the horizontal axis.
131 * @param {Number} degrees The clockwise angle (in degrees) from the horizontal axis
132 * by which the text should be rotated.
133 */
134 setAngle: function(degrees) {
135 var me = this,
136 surface,
137 sprite;
138
139 if (me.rendered) {
140 surface = me.surface;
141 sprite = surface.items.items[0];
142
143 me.degrees = degrees;
144 sprite.setAttributes({
145 rotate: {
146 degrees: degrees
147 }
148 }, true);
149 if (me.autoSize || me.viewBox) {
150 me.updateLayout();
151 }
152 } else {
153 me.degrees = degrees;
154 }
155 },
156
157<span id='Ext-draw-Text-method-setText'> /**
158</span> * Updates this item's text.
159 * @param {String} t The text to display (html **not** accepted).
160 */
161 setText: function(text) {
162 var me = this,
163 surface,
164 sprite;
165
166 if (me.rendered) {
167 surface = me.surface;
168 sprite = surface.items.items[0];
169
170 me.text = text || '';
171 surface.remove(sprite);
172 me.textConfig.type = 'text';
173 me.textConfig.text = me.text;
174 sprite = surface.add(me.textConfig);
175 sprite.setAttributes({
176 rotate: {
177 degrees: me.degrees
178 }
179 }, true);
180 if (me.autoSize || me.viewBox) {
181 me.updateLayout();
182 }
183 } else {
184 me.on({
185 render: function() {
186 me.setText(text);
187 },
188 single: true
189 });
190 }
191 }
192});
193</pre>
194</body>
195</html>