src/toolbar/TextItem.js

   1 /**
   2  * @class Ext.toolbar.TextItem
   3  * @extends Ext.toolbar.Item
   4  *
   5  * A simple class that renders text directly into a toolbar.
   6  *
   7  * ## Example usage
   8  *
   9  * {@img Ext.toolbar.TextItem/Ext.toolbar.TextItem.png TextItem component}
  10  *
  11  *      Ext.create('Ext.panel.Panel', {
  12  *          title: 'Panel with TextItem',
  13  *          width: 300,
  14  *          height: 200,
  15  *          tbar: [
  16  *              {xtype: 'tbtext', text: 'Sample TextItem'}
  17  *          ],
  18  *          renderTo: Ext.getBody()
  19  *      });
  20  *
  21  * @constructor
  22  * Creates a new TextItem
  23  * @param {Object} text A text string, or a config object containing a <tt>text</tt> property
  24  * @xtype tbtext
  25  */
  26 Ext.define('Ext.toolbar.TextItem', {
  27     extend: 'Ext.toolbar.Item',
  28     requires: ['Ext.XTemplate'],
  29     alias: 'widget.tbtext',
  30     alternateClassName: 'Ext.Toolbar.TextItem',
  31
  32     /**
  33      * @cfg {String} text The text to be used as innerHTML (html tags are accepted)
  34      */
  35     text: '',
  36
  37     renderTpl: '{text}',
  38     //
  39     baseCls: Ext.baseCSSPrefix + 'toolbar-text',
  40
  41     onRender : function() {
  42         Ext.apply(this.renderData, {
  43             text: this.text
  44         });
  45         this.callParent(arguments);
  46     },
  47
  48     /**
  49      * Updates this item's text, setting the text to be used as innerHTML.
  50      * @param {String} t The text to display (html accepted).
  51      */
  52     setText : function(t) {
  53         if (this.rendered) {
  54             this.el.update(t);
  55             this.ownerCt.doLayout(); // In case an empty text item (centered at zero height) receives new text.
  56         } else {
  57             this.text = t;
  58         }
  59     }
  60 });