docs/source/Header.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-panel-Header'>/**
  19 </span> * @class Ext.panel.Header
  20  * @extends Ext.container.Container
  21  * Simple header class which is used for on {@link Ext.panel.Panel} and {@link Ext.window.Window}
  22  * @xtype header
  23  */
  24 Ext.define('Ext.panel.Header', {
  25     extend: 'Ext.container.Container',
  26     uses: ['Ext.panel.Tool', 'Ext.draw.Component', 'Ext.util.CSS'],
  27     alias: 'widget.header',
  28
  29     isHeader       : true,
  30     defaultType    : 'tool',
  31     indicateDrag   : false,
  32     weight         : -1,
  33
  34     renderTpl: ['&lt;div class=&quot;{baseCls}-body&lt;tpl if=&quot;bodyCls&quot;&gt; {bodyCls}&lt;/tpl&gt;&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-body-{parent.ui}-{.}&lt;/tpl&gt;&lt;/tpl&gt;&quot;&lt;tpl if=&quot;bodyStyle&quot;&gt; style=&quot;{bodyStyle}&quot;&lt;/tpl&gt;&gt;&lt;/div&gt;'],
  35
  36     initComponent: function() {
  37         var me = this,
  38             rule,
  39             style,
  40             titleTextEl,
  41             ui;
  42
  43         me.indicateDragCls = me.baseCls + '-draggable';
  44         me.title = me.title || '&amp;#160;';
  45         me.tools = me.tools || [];
  46         me.items = me.items || [];
  47         me.orientation = me.orientation || 'horizontal';
  48         me.dock = (me.dock) ? me.dock : (me.orientation == 'horizontal') ? 'top' : 'left';
  49
  50         //add the dock as a ui
  51         //this is so we support top/right/left/bottom headers
  52         me.addClsWithUI(me.orientation);
  53         me.addClsWithUI(me.dock);
  54
  55         Ext.applyIf(me.renderSelectors, {
  56             body: '.' + me.baseCls + '-body'
  57         });
  58
  59         // Add Icon
  60         if (!Ext.isEmpty(me.iconCls)) {
  61             me.initIconCmp();
  62             me.items.push(me.iconCmp);
  63         }
  64
  65         // Add Title
  66         if (me.orientation == 'vertical') {
  67             // Hack for IE6/7's inability to display an inline-block
  68             if (Ext.isIE6 || Ext.isIE7) {
  69                 me.width = this.width || 24;
  70             } else if (Ext.isIEQuirks) {
  71                 me.width = this.width || 25;
  72             }
  73
  74             me.layout = {
  75                 type : 'vbox',
  76                 align: 'center',
  77                 clearInnerCtOnLayout: true,
  78                 bindToOwnerCtContainer: false
  79             };
  80             me.textConfig = {
  81                 cls: me.baseCls + '-text',
  82                 type: 'text',
  83                 text: me.title,
  84                 rotate: {
  85                     degrees: 90
  86                 }
  87             };
  88             ui = me.ui;
  89             if (Ext.isArray(ui)) {
  90                 ui = ui[0];
  91             }
  92             rule = Ext.util.CSS.getRule('.' + me.baseCls + '-text-' + ui);
  93             if (rule) {
  94                 style = rule.style;
  95             }
  96             if (style) {
  97                 Ext.apply(me.textConfig, {
  98                     'font-family': style.fontFamily,
  99                     'font-weight': style.fontWeight,
 100                     'font-size': style.fontSize,
 101                     fill: style.color
 102                 });
 103             }
 104             me.titleCmp = Ext.create('Ext.draw.Component', {
 105                 ariaRole  : 'heading',
 106                 focusable: false,
 107                 viewBox: false,
 108                 autoSize: true,
 109                 margins: '5 0 0 0',
 110                 items: [ me.textConfig ],
 111                 renderSelectors: {
 112                     textEl: '.' + me.baseCls + '-text'
 113                 }
 114             });
 115         } else {
 116             me.layout = {
 117                 type : 'hbox',
 118                 align: 'middle',
 119                 clearInnerCtOnLayout: true,
 120                 bindToOwnerCtContainer: false
 121             };
 122             me.titleCmp = Ext.create('Ext.Component', {
 123                 xtype     : 'component',
 124                 ariaRole  : 'heading',
 125                 focusable: false,
 126                 renderTpl : ['&lt;span class=&quot;{cls}-text {cls}-text-{ui}&quot;&gt;{title}&lt;/span&gt;'],
 127                 renderData: {
 128                     title: me.title,
 129                     cls  : me.baseCls,
 130                     ui   : me.ui
 131                 },
 132                 renderSelectors: {
 133                     textEl: '.' + me.baseCls + '-text'
 134                 }
 135             });
 136         }
 137         me.items.push(me.titleCmp);
 138
 139         // Spacer -&gt;
 140         me.items.push({
 141             xtype: 'component',
 142             html : '&amp;nbsp;',
 143             flex : 1,
 144             focusable: false
 145         });
 146
 147         // Add Tools
 148         me.items = me.items.concat(me.tools);
 149         this.callParent();
 150     },
 151
 152     initIconCmp: function() {
 153         this.iconCmp = Ext.create('Ext.Component', {
 154             focusable: false,
 155             renderTpl : ['&lt;img alt=&quot;&quot; src=&quot;{blank}&quot; class=&quot;{cls}-icon {iconCls}&quot;/&gt;'],
 156             renderData: {
 157                 blank  : Ext.BLANK_IMAGE_URL,
 158                 cls    : this.baseCls,
 159                 iconCls: this.iconCls,
 160                 orientation: this.orientation
 161             },
 162             renderSelectors: {
 163                 iconEl: '.' + this.baseCls + '-icon'
 164             },
 165             iconCls: this.iconCls
 166         });
 167     },
 168
 169     afterRender: function() {
 170         var me = this;
 171
 172         me.el.unselectable();
 173         if (me.indicateDrag) {
 174             me.el.addCls(me.indicateDragCls);
 175         }
 176         me.mon(me.el, {
 177             click: me.onClick,
 178             scope: me
 179         });
 180         me.callParent();
 181     },
 182
 183     afterLayout: function() {
 184         var me = this;
 185         me.callParent(arguments);
 186
 187         // IE7 needs a forced repaint to make the top framing div expand to full width
 188         if (Ext.isIE7) {
 189             me.el.repaint();
 190         }
 191     },
 192
 193     // inherit docs
 194     addUIClsToElement: function(cls, force) {
 195         var me = this;
 196
 197         me.callParent(arguments);
 198
 199         if (!force &amp;&amp; me.rendered) {
 200             me.body.addCls(me.baseCls + '-body-' + cls);
 201             me.body.addCls(me.baseCls + '-body-' + me.ui + '-' + cls);
 202         }
 203     },
 204
 205     // inherit docs
 206     removeUIClsFromElement: function(cls, force) {
 207         var me = this;
 208
 209         me.callParent(arguments);
 210
 211         if (!force &amp;&amp; me.rendered) {
 212             me.body.removeCls(me.baseCls + '-body-' + cls);
 213             me.body.removeCls(me.baseCls + '-body-' + me.ui + '-' + cls);
 214         }
 215     },
 216
 217     // inherit docs
 218     addUIToElement: function(force) {
 219         var me = this;
 220
 221         me.callParent(arguments);
 222
 223         if (!force &amp;&amp; me.rendered) {
 224             me.body.addCls(me.baseCls + '-body-' + me.ui);
 225         }
 226
 227         if (!force &amp;&amp; me.titleCmp &amp;&amp; me.titleCmp.rendered &amp;&amp; me.titleCmp.textEl) {
 228             me.titleCmp.textEl.addCls(me.baseCls + '-text-' + me.ui);
 229         }
 230     },
 231
 232     // inherit docs
 233     removeUIFromElement: function() {
 234         var me = this;
 235
 236         me.callParent(arguments);
 237
 238         if (me.rendered) {
 239             me.body.removeCls(me.baseCls + '-body-' + me.ui);
 240         }
 241
 242         if (me.titleCmp &amp;&amp; me.titleCmp.rendered &amp;&amp; me.titleCmp.textEl) {
 243             me.titleCmp.textEl.removeCls(me.baseCls + '-text-' + me.ui);
 244         }
 245     },
 246
 247     onClick: function(e) {
 248         if (!e.getTarget(Ext.baseCSSPrefix + 'tool')) {
 249             this.fireEvent('click', e);
 250         }
 251     },
 252
 253     getTargetEl: function() {
 254         return this.body || this.frameBody || this.el;
 255     },
 256
 257 <span id='Ext-panel-Header-method-setTitle'>    /**
 258 </span>     * Sets the title of the header.
 259      * @param {String} title The title to be set
 260      */
 261     setTitle: function(title) {
 262         var me = this;
 263         if (me.rendered) {
 264             if (me.titleCmp.rendered) {
 265                 if (me.titleCmp.surface) {
 266                     me.title = title || '';
 267                     var sprite = me.titleCmp.surface.items.items[0],
 268                         surface = me.titleCmp.surface;
 269
 270                     surface.remove(sprite);
 271                     me.textConfig.type = 'text';
 272                     me.textConfig.text = title;
 273                     sprite = surface.add(me.textConfig);
 274                     sprite.setAttributes({
 275                         rotate: {
 276                             degrees: 90
 277                         }
 278                     }, true);
 279                     me.titleCmp.autoSizeSurface();
 280                 } else {
 281                     me.title = title || '&amp;#160;';
 282                     me.titleCmp.textEl.update(me.title);
 283                 }
 284             } else {
 285                 me.titleCmp.on({
 286                     render: function() {
 287                         me.setTitle(title);
 288                     },
 289                     single: true
 290                 });
 291             }
 292         } else {
 293             me.on({
 294                 render: function() {
 295                     me.layout.layout();
 296                     me.setTitle(title);
 297                 },
 298                 single: true
 299             });
 300         }
 301     },
 302
 303 <span id='Ext-panel-Header-method-setIconCls'>    /**
 304 </span>     * Sets the CSS class that provides the icon image for this panel.  This method will replace any existing
 305      * icon class if one has already been set and fire the {@link #iconchange} event after completion.
 306      * @param {String} cls The new CSS class name
 307      */
 308     setIconCls: function(cls) {
 309         this.iconCls = cls;
 310         if (!this.iconCmp) {
 311             this.initIconCmp();
 312             this.insert(0, this.iconCmp);
 313         }
 314         else {
 315             if (!cls || !cls.length) {
 316                 this.iconCmp.destroy();
 317             }
 318             else {
 319                 var iconCmp = this.iconCmp,
 320                     el      = iconCmp.iconEl;
 321
 322                 el.removeCls(iconCmp.iconCls);
 323                 el.addCls(cls);
 324                 iconCmp.iconCls = cls;
 325             }
 326         }
 327     },
 328
 329 <span id='Ext-panel-Header-method-addTool'>    /**
 330 </span>     * Add a tool to the header
 331      * @param {Object} tool
 332      */
 333     addTool: function(tool) {
 334         this.tools.push(this.add(tool));
 335     },
 336
 337 <span id='Ext-panel-Header-method-onAdd'>    /**
 338 </span>     * @private
 339      * Set up the tools.&amp;lt;tool type&gt; link in the owning Panel.
 340      * Bind the tool to its owning Panel.
 341      * @param component
 342      * @param index
 343      */
 344     onAdd: function(component, index) {
 345         this.callParent([arguments]);
 346         if (component instanceof Ext.panel.Tool) {
 347             component.bindTo(this.ownerCt);
 348             this.tools[component.type] = component;
 349         }
 350     }
 351 });
 352 </pre>
 353 </body>
 354 </html>