PageRenderTime 62ms CodeModel.GetById 31ms app.highlight 16ms RepoModel.GetById 1ms app.codeStats 1ms

/ext-4.1.0_b3/docs/source/Text.html

https://bitbucket.org/srogerf/javascript
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 &lt;b&gt;not&lt;/b&gt; 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 &lt; 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>