docs/source/AbstractPanel.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-AbstractPanel-method-constructor'><span id='Ext-panel-AbstractPanel'>/**
  19 </span></span> * @class Ext.panel.AbstractPanel
  20  * @extends Ext.container.Container
  21  * &lt;p&gt;A base class which provides methods common to Panel classes across the Sencha product range.&lt;/p&gt;
  22  * &lt;p&gt;Please refer to sub class's documentation&lt;/p&gt;
  23  * @constructor
  24  * @param {Object} config The config object
  25  */
  26 Ext.define('Ext.panel.AbstractPanel', {
  27
  28     /* Begin Definitions */
  29
  30     extend: 'Ext.container.Container',
  31
  32     requires: ['Ext.util.MixedCollection', 'Ext.core.Element', 'Ext.toolbar.Toolbar'],
  33
  34     /* End Definitions */
  35
  36 <span id='Ext-panel-AbstractPanel-cfg-baseCls'>    /**
  37 </span>     * @cfg {String} baseCls
  38      * The base CSS class to apply to this panel's element (defaults to &lt;code&gt;'x-panel'&lt;/code&gt;).
  39      */
  40     baseCls : Ext.baseCSSPrefix + 'panel',
  41
  42 <span id='Ext-panel-AbstractPanel-cfg-bodyPadding'>    /**
  43 </span>     * @cfg {Number/String} bodyPadding
  44      * A shortcut for setting a padding style on the body element. The value can either be
  45      * a number to be applied to all sides, or a normal css string describing padding.
  46      * Defaults to &lt;code&gt;undefined&lt;/code&gt;.
  47      */
  48
  49 <span id='Ext-panel-AbstractPanel-cfg-bodyBorder'>    /**
  50 </span>     * @cfg {Boolean} bodyBorder
  51      * A shortcut to add or remove the border on the body of a panel. This only applies to a panel which has the {@link #frame} configuration set to `true`.
  52      * Defaults to &lt;code&gt;undefined&lt;/code&gt;.
  53      */
  54
  55 <span id='Ext-panel-AbstractPanel-cfg-bodyStyle'>    /**
  56 </span>     * @cfg {String/Object/Function} bodyStyle
  57      * Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string,
  58      * an object containing style property name/value pairs or a function that returns such a string or object.
  59      * For example, these two formats are interpreted to be equivalent:&lt;pre&gt;&lt;code&gt;
  60 bodyStyle: 'background:#ffc; padding:10px;'
  61
  62 bodyStyle: {
  63     background: '#ffc',
  64     padding: '10px'
  65 }
  66      * &lt;/code&gt;&lt;/pre&gt;
  67      */
  68
  69 <span id='Ext-panel-AbstractPanel-cfg-bodyCls'>    /**
  70 </span>     * @cfg {String/Array} bodyCls
  71      * A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element.
  72      * The following examples are all valid:&lt;pre&gt;&lt;code&gt;
  73 bodyCls: 'foo'
  74 bodyCls: 'foo bar'
  75 bodyCls: ['foo', 'bar']
  76      * &lt;/code&gt;&lt;/pre&gt;
  77      */
  78
  79     isPanel: true,
  80
  81     componentLayout: 'dock',
  82
  83     renderTpl: ['&lt;div class=&quot;{baseCls}-body&lt;tpl if=&quot;bodyCls&quot;&gt; {bodyCls}&lt;/tpl&gt; {baseCls}-body-{ui}&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;'],
  84
  85     // TODO: Move code examples into product-specific files. The code snippet below is Touch only.
  86 <span id='Ext-panel-AbstractPanel-cfg-dockedItems'>    /**
  87 </span>     * @cfg {Object/Array} dockedItems
  88      * A component or series of components to be added as docked items to this panel.
  89      * The docked items can be docked to either the top, right, left or bottom of a panel.
  90      * This is typically used for things like toolbars or tab bars:
  91      * &lt;pre&gt;&lt;code&gt;
  92 var panel = new Ext.panel.Panel({
  93     fullscreen: true,
  94     dockedItems: [{
  95         xtype: 'toolbar',
  96         dock: 'top',
  97         items: [{
  98             text: 'Docked to the top'
  99         }]
 100     }]
 101 });&lt;/code&gt;&lt;/pre&gt;
 102      */
 103
 104     border: true,
 105
 106     initComponent : function() {
 107         var me = this;
 108
 109         me.addEvents(
 110 <span id='Ext-panel-AbstractPanel-event-bodyresize'>            /**
 111 </span>             * @event bodyresize
 112              * Fires after the Panel has been resized.
 113              * @param {Ext.panel.Panel} p the Panel which has been resized.
 114              * @param {Number} width The Panel body's new width.
 115              * @param {Number} height The Panel body's new height.
 116              */
 117             'bodyresize'
 118             // // inherited
 119             // 'activate',
 120             // // inherited
 121             // 'deactivate'
 122         );
 123
 124         Ext.applyIf(me.renderSelectors, {
 125             body: '.' + me.baseCls + '-body'
 126         });
 127
 128         //!frame
 129         //!border
 130
 131         if (me.frame &amp;&amp; me.border &amp;&amp; me.bodyBorder === undefined) {
 132             me.bodyBorder = false;
 133         }
 134         if (me.frame &amp;&amp; me.border &amp;&amp; (me.bodyBorder === false || me.bodyBorder === 0)) {
 135             me.manageBodyBorders = true;
 136         }
 137
 138         me.callParent();
 139     },
 140
 141     // @private
 142     initItems : function() {
 143         var me = this,
 144             items = me.dockedItems;
 145
 146         me.callParent();
 147         me.dockedItems = Ext.create('Ext.util.MixedCollection', false, me.getComponentId);
 148         if (items) {
 149             me.addDocked(items);
 150         }
 151     },
 152
 153 <span id='Ext-panel-AbstractPanel-method-getDockedComponent'>    /**
 154 </span>     * Finds a docked component by id, itemId or position. Also see {@link #getDockedItems}
 155      * @param {String/Number} comp The id, itemId or position of the docked component (see {@link #getComponent} for details)
 156      * @return {Ext.Component} The docked component (if found)
 157      */
 158     getDockedComponent: function(comp) {
 159         if (Ext.isObject(comp)) {
 160             comp = comp.getItemId();
 161         }
 162         return this.dockedItems.get(comp);
 163     },
 164
 165 <span id='Ext-panel-AbstractPanel-method-getComponent'>    /**
 166 </span>     * Attempts a default component lookup (see {@link Ext.container.Container#getComponent}). If the component is not found in the normal
 167      * items, the dockedItems are searched and the matched component (if any) returned (see {@loink #getDockedComponent}). Note that docked
 168      * items will only be matched by component id or itemId -- if you pass a numeric index only non-docked child components will be searched.
 169      * @param {String/Number} comp The component id, itemId or position to find
 170      * @return {Ext.Component} The component (if found)
 171      */
 172     getComponent: function(comp) {
 173         var component = this.callParent(arguments);
 174         if (component === undefined &amp;&amp; !Ext.isNumber(comp)) {
 175             // If the arg is a numeric index skip docked items
 176             component = this.getDockedComponent(comp);
 177         }
 178         return component;
 179     },
 180
 181 <span id='Ext-panel-AbstractPanel-method-initBodyStyles'>    /**
 182 </span>     * Parses the {@link bodyStyle} config if available to create a style string that will be applied to the body element.
 183      * This also includes {@link bodyPadding} and {@link bodyBorder} if available.
 184      * @return {String} A CSS style string with body styles, padding and border.
 185      * @private
 186      */
 187     initBodyStyles: function() {
 188         var me = this,
 189             bodyStyle = me.bodyStyle,
 190             styles = [],
 191             Element = Ext.core.Element,
 192             prop;
 193
 194         if (Ext.isFunction(bodyStyle)) {
 195             bodyStyle = bodyStyle();
 196         }
 197         if (Ext.isString(bodyStyle)) {
 198             styles = bodyStyle.split(';');
 199         } else {
 200             for (prop in bodyStyle) {
 201                 if (bodyStyle.hasOwnProperty(prop)) {
 202                     styles.push(prop + ':' + bodyStyle[prop]);
 203                 }
 204             }
 205         }
 206
 207         if (me.bodyPadding !== undefined) {
 208             styles.push('padding: ' + Element.unitizeBox((me.bodyPadding === true) ? 5 : me.bodyPadding));
 209         }
 210         if (me.frame &amp;&amp; me.bodyBorder) {
 211             if (!Ext.isNumber(me.bodyBorder)) {
 212                 me.bodyBorder = 1;
 213             }
 214             styles.push('border-width: ' + Element.unitizeBox(me.bodyBorder));
 215         }
 216         delete me.bodyStyle;
 217         return styles.length ? styles.join(';') : undefined;
 218     },
 219
 220 <span id='Ext-panel-AbstractPanel-method-initBodyCls'>    /**
 221 </span>     * Parse the {@link bodyCls} config if available to create a comma-delimited string of
 222      * CSS classes to be applied to the body element.
 223      * @return {String} The CSS class(es)
 224      * @private
 225      */
 226     initBodyCls: function() {
 227         var me = this,
 228             cls = '',
 229             bodyCls = me.bodyCls;
 230
 231         if (bodyCls) {
 232             Ext.each(bodyCls, function(v) {
 233                 cls += &quot; &quot; + v;
 234             });
 235             delete me.bodyCls;
 236         }
 237         return cls.length &gt; 0 ? cls : undefined;
 238     },
 239
 240 <span id='Ext-panel-AbstractPanel-method-initRenderData'>    /**
 241 </span>     * Initialized the renderData to be used when rendering the renderTpl.
 242      * @return {Object} Object with keys and values that are going to be applied to the renderTpl
 243      * @private
 244      */
 245     initRenderData: function() {
 246         return Ext.applyIf(this.callParent(), {
 247             bodyStyle: this.initBodyStyles(),
 248             bodyCls: this.initBodyCls()
 249         });
 250     },
 251
 252 <span id='Ext-panel-AbstractPanel-method-addDocked'>    /**
 253 </span>     * Adds docked item(s) to the panel.
 254      * @param {Object/Array} component The Component or array of components to add. The components
 255      * must include a 'dock' parameter on each component to indicate where it should be docked ('top', 'right',
 256      * 'bottom', 'left').
 257      * @param {Number} pos (optional) The index at which the Component will be added
 258      */
 259     addDocked : function(items, pos) {
 260         var me = this,
 261             i = 0,
 262             item, length;
 263
 264         items = me.prepareItems(items);
 265         length = items.length;
 266
 267         for (; i &lt; length; i++) {
 268             item = items[i];
 269             item.dock = item.dock || 'top';
 270
 271             // Allow older browsers to target docked items to style without borders
 272             if (me.border === false) {
 273                 // item.cls = item.cls || '' + ' ' + me.baseCls + '-noborder-docked-' + item.dock;
 274             }
 275
 276             if (pos !== undefined) {
 277                 me.dockedItems.insert(pos + i, item);
 278             }
 279             else {
 280                 me.dockedItems.add(item);
 281             }
 282             item.onAdded(me, i);
 283             me.onDockedAdd(item);
 284         }
 285         if (me.rendered &amp;&amp; !me.suspendLayout) {
 286             me.doComponentLayout();
 287         }
 288         return items;
 289     },
 290
 291     // Placeholder empty functions
 292     onDockedAdd : Ext.emptyFn,
 293     onDockedRemove : Ext.emptyFn,
 294
 295 <span id='Ext-panel-AbstractPanel-method-insertDocked'>    /**
 296 </span>     * Inserts docked item(s) to the panel at the indicated position.
 297      * @param {Number} pos The index at which the Component will be inserted
 298      * @param {Object/Array} component. The Component or array of components to add. The components
 299      * must include a 'dock' paramater on each component to indicate where it should be docked ('top', 'right',
 300      * 'bottom', 'left').
 301      */
 302     insertDocked : function(pos, items) {
 303         this.addDocked(items, pos);
 304     },
 305
 306 <span id='Ext-panel-AbstractPanel-method-removeDocked'>    /**
 307 </span>     * Removes the docked item from the panel.
 308      * @param {Ext.Component} item. The Component to remove.
 309      * @param {Boolean} autoDestroy (optional) Destroy the component after removal.
 310      */
 311     removeDocked : function(item, autoDestroy) {
 312         var me = this,
 313             layout,
 314             hasLayout;
 315
 316         if (!me.dockedItems.contains(item)) {
 317             return item;
 318         }
 319
 320         layout = me.componentLayout;
 321         hasLayout = layout &amp;&amp; me.rendered;
 322
 323         if (hasLayout) {
 324             layout.onRemove(item);
 325         }
 326
 327         me.dockedItems.remove(item);
 328         item.onRemoved();
 329         me.onDockedRemove(item);
 330
 331         if (autoDestroy === true || (autoDestroy !== false &amp;&amp; me.autoDestroy)) {
 332             item.destroy();
 333         }
 334
 335         if (hasLayout &amp;&amp; !autoDestroy) {
 336             layout.afterRemove(item);
 337         }
 338
 339         if (!this.destroying) {
 340             me.doComponentLayout();
 341         }
 342
 343         return item;
 344     },
 345
 346 <span id='Ext-panel-AbstractPanel-method-getDockedItems'>    /**
 347 </span>     * Retrieve an array of all currently docked Components.
 348      * @param {String} cqSelector A {@link Ext.ComponentQuery ComponentQuery} selector string to filter the returned items.
 349      * @return {Array} An array of components.
 350      */
 351     getDockedItems : function(cqSelector) {
 352         var me = this,
 353             // Start with a weight of 1, so users can provide &lt;= 0 to come before top items
 354             // Odd numbers, so users can provide a weight to come in between if desired
 355             defaultWeight = { top: 1, left: 3, right: 5, bottom: 7 },
 356             dockedItems;
 357
 358         if (me.dockedItems &amp;&amp; me.dockedItems.items.length) {
 359             // Allow filtering of returned docked items by CQ selector.
 360             if (cqSelector) {
 361                 dockedItems = Ext.ComponentQuery.query(cqSelector, me.dockedItems.items);
 362             } else {
 363                 dockedItems = me.dockedItems.items.slice();
 364             }
 365
 366             Ext.Array.sort(dockedItems, function(a, b) {
 367                 // Docked items are ordered by their visual representation by default (t,l,r,b)
 368                 // TODO: Enforce position ordering, and have weights be sub-ordering within positions?
 369                 var aw = a.weight || defaultWeight[a.dock],
 370                     bw = b.weight || defaultWeight[b.dock];
 371                 if (Ext.isNumber(aw) &amp;&amp; Ext.isNumber(bw)) {
 372                     return aw - bw;
 373                 }
 374                 return 0;
 375             });
 376
 377             return dockedItems;
 378         }
 379         return [];
 380     },
 381
 382     // inherit docs
 383     addUIClsToElement: function(cls, force) {
 384         var me = this;
 385
 386         me.callParent(arguments);
 387
 388         if (!force &amp;&amp; me.rendered) {
 389             me.body.addCls(Ext.baseCSSPrefix + cls);
 390             me.body.addCls(me.baseCls + '-body-' + cls);
 391             me.body.addCls(me.baseCls + '-body-' + me.ui + '-' + cls);
 392         }
 393     },
 394
 395     // inherit docs
 396     removeUIClsFromElement: function(cls, force) {
 397         var me = this;
 398
 399         me.callParent(arguments);
 400
 401         if (!force &amp;&amp; me.rendered) {
 402             me.body.removeCls(Ext.baseCSSPrefix + cls);
 403             me.body.removeCls(me.baseCls + '-body-' + cls);
 404             me.body.removeCls(me.baseCls + '-body-' + me.ui + '-' + cls);
 405         }
 406     },
 407
 408     // inherit docs
 409     addUIToElement: function(force) {
 410         var me = this;
 411
 412         me.callParent(arguments);
 413
 414         if (!force &amp;&amp; me.rendered) {
 415             me.body.addCls(me.baseCls + '-body-' + me.ui);
 416         }
 417     },
 418
 419     // inherit docs
 420     removeUIFromElement: function() {
 421         var me = this;
 422
 423         me.callParent(arguments);
 424
 425         if (me.rendered) {
 426             me.body.removeCls(me.baseCls + '-body-' + me.ui);
 427         }
 428     },
 429
 430     // @private
 431     getTargetEl : function() {
 432         return this.body;
 433     },
 434
 435     getRefItems: function(deep) {
 436         var items = this.callParent(arguments),
 437             // deep fetches all docked items, and their descendants using '*' selector and then '* *'
 438             dockedItems = this.getDockedItems(deep ? '*,* *' : undefined),
 439             ln = dockedItems.length,
 440             i = 0,
 441             item;
 442
 443         // Find the index where we go from top/left docked items to right/bottom docked items
 444         for (; i &lt; ln; i++) {
 445             item = dockedItems[i];
 446             if (item.dock === 'right' || item.dock === 'bottom') {
 447                 break;
 448             }
 449         }
 450
 451         // Return docked items in the top/left position before our container items, and
 452         // return right/bottom positioned items after our container items.
 453         // See AbstractDock.renderItems() for more information.
 454         return dockedItems.splice(0, i).concat(items).concat(dockedItems);
 455     },
 456
 457     beforeDestroy: function(){
 458         var docked = this.dockedItems,
 459             c;
 460
 461         if (docked) {
 462             while ((c = docked.first())) {
 463                 this.removeDocked(c, true);
 464             }
 465         }
 466         this.callParent();
 467     },
 468
 469     setBorder: function(border) {
 470         var me = this;
 471         me.border = (border !== undefined) ? border : true;
 472         if (me.rendered) {
 473             me.doComponentLayout();
 474         }
 475     }
 476 });</pre>
 477 </body>
 478 </html>