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