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