-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-panel.AbstractPanel-method-constructor'><span id='Ext-panel.AbstractPanel'>/**
-</span></span> * @class Ext.panel.AbstractPanel
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-panel-AbstractPanel'>/**
+</span> * @class Ext.panel.AbstractPanel
* @extends Ext.container.Container
- * <p>A base class which provides methods common to Panel classes across the Sencha product range.</p>
- * <p>Please refer to sub class's documentation</p>
- * @constructor
- * @param {Object} config The config object
+ * A base class which provides methods common to Panel classes across the Sencha product range.
+ * @private
*/
Ext.define('Ext.panel.AbstractPanel', {
extend: 'Ext.container.Container',
- requires: ['Ext.util.MixedCollection', 'Ext.core.Element', 'Ext.toolbar.Toolbar'],
+ requires: ['Ext.util.MixedCollection', 'Ext.Element', 'Ext.toolbar.Toolbar'],
/* End Definitions */
-<span id='Ext-panel.AbstractPanel-cfg-baseCls'> /**
-</span> * @cfg {String} baseCls
- * The base CSS class to apply to this panel's element (defaults to <code>'x-panel'</code>).
+<span id='Ext-panel-AbstractPanel-cfg-baseCls'> /**
+</span> * @cfg {String} [baseCls='x-panel']
+ * The base CSS class to apply to this panel's element.
*/
baseCls : Ext.baseCSSPrefix + 'panel',
-<span id='Ext-panel.AbstractPanel-cfg-bodyPadding'> /**
+<span id='Ext-panel-AbstractPanel-cfg-bodyPadding'> /**
</span> * @cfg {Number/String} bodyPadding
* A shortcut for setting a padding style on the body element. The value can either be
* a number to be applied to all sides, or a normal css string describing padding.
- * Defaults to <code>undefined</code>.
*/
-<span id='Ext-panel.AbstractPanel-cfg-bodyBorder'> /**
+<span id='Ext-panel-AbstractPanel-cfg-bodyBorder'> /**
</span> * @cfg {Boolean} bodyBorder
- * 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`.
- * Defaults to <code>undefined</code>.
+ * 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`.
*/
-
-<span id='Ext-panel.AbstractPanel-cfg-bodyStyle'> /**
+
+<span id='Ext-panel-AbstractPanel-cfg-bodyStyle'> /**
</span> * @cfg {String/Object/Function} bodyStyle
* Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string,
* an object containing style property name/value pairs or a function that returns such a string or object.
}
* </code></pre>
*/
-
-<span id='Ext-panel.AbstractPanel-cfg-bodyCls'> /**
-</span> * @cfg {String/Array} bodyCls
+
+<span id='Ext-panel-AbstractPanel-cfg-bodyCls'> /**
+</span> * @cfg {String/String[]} bodyCls
* A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element.
* The following examples are all valid:<pre><code>
bodyCls: 'foo'
componentLayout: 'dock',
- renderTpl: ['<div class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl> {baseCls}-body-{ui}<tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>'],
+<span id='Ext-panel-AbstractPanel-cfg-defaultDockWeights'> /**
+</span> * @cfg {Object} defaultDockWeights
+ * This object holds the default weights applied to dockedItems that have no weight. These start with a
+ * weight of 1, to allow negative weights to insert before top items and are odd numbers
+ * so that even weights can be used to get between different dock orders.
+ *
+ * To make default docking order match border layout, do this:
+ * <pre><code>
+Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };</code></pre>
+ * Changing these defaults as above or individually on this object will effect all Panels.
+ * To change the defaults on a single panel, you should replace the entire object:
+ * <pre><code>
+initComponent: function () {
+ // NOTE: Don't change members of defaultDockWeights since the object is shared.
+ this.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
+
+ this.callParent();
+}</code></pre>
+ *
+ * To change only one of the default values, you do this:
+ * <pre><code>
+initComponent: function () {
+ // NOTE: Don't change members of defaultDockWeights since the object is shared.
+ this.defaultDockWeights = Ext.applyIf({ top: 10 }, this.defaultDockWeights);
+
+ this.callParent();
+}</code></pre>
+ */
+ defaultDockWeights: { top: 1, left: 3, right: 5, bottom: 7 },
+
+ renderTpl: [
+ '<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
+ ' {baseCls}-body-{ui}<tpl if="uiCls">',
+ '<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
+ '</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
+ '</div>'
+ ],
// TODO: Move code examples into product-specific files. The code snippet below is Touch only.
-<span id='Ext-panel.AbstractPanel-cfg-dockedItems'> /**
-</span> * @cfg {Object/Array} dockedItems
+<span id='Ext-panel-AbstractPanel-cfg-dockedItems'> /**
+</span> * @cfg {Object/Object[]} dockedItems
* A component or series of components to be added as docked items to this panel.
* The docked items can be docked to either the top, right, left or bottom of a panel.
* This is typically used for things like toolbars or tab bars:
}]
});</code></pre>
*/
-
+
border: true,
initComponent : function() {
var me = this;
-
+
me.addEvents(
-<span id='Ext-panel.AbstractPanel-event-bodyresize'> /**
+<span id='Ext-panel-AbstractPanel-event-bodyresize'> /**
</span> * @event bodyresize
* Fires after the Panel has been resized.
* @param {Ext.panel.Panel} p the Panel which has been resized.
// 'deactivate'
);
- Ext.applyIf(me.renderSelectors, {
- body: '.' + me.baseCls + '-body'
- });
-
- //!frame
+ me.addChildEls('body');
+
+ //!frame
//!border
-
+
if (me.frame && me.border && me.bodyBorder === undefined) {
me.bodyBorder = false;
}
if (me.frame && me.border && (me.bodyBorder === false || me.bodyBorder === 0)) {
me.manageBodyBorders = true;
}
-
+
me.callParent();
},
initItems : function() {
var me = this,
items = me.dockedItems;
-
+
me.callParent();
me.dockedItems = Ext.create('Ext.util.MixedCollection', false, me.getComponentId);
if (items) {
}
},
-<span id='Ext-panel.AbstractPanel-method-getDockedComponent'> /**
+<span id='Ext-panel-AbstractPanel-method-getDockedComponent'> /**
</span> * Finds a docked component by id, itemId or position. Also see {@link #getDockedItems}
* @param {String/Number} comp The id, itemId or position of the docked component (see {@link #getComponent} for details)
* @return {Ext.Component} The docked component (if found)
return this.dockedItems.get(comp);
},
-<span id='Ext-panel.AbstractPanel-method-getComponent'> /**
+<span id='Ext-panel-AbstractPanel-method-getComponent'> /**
</span> * Attempts a default component lookup (see {@link Ext.container.Container#getComponent}). If the component is not found in the normal
- * items, the dockedItems are searched and the matched component (if any) returned (see {@loink #getDockedComponent}). Note that docked
+ * items, the dockedItems are searched and the matched component (if any) returned (see {@link #getDockedComponent}). Note that docked
* items will only be matched by component id or itemId -- if you pass a numeric index only non-docked child components will be searched.
* @param {String/Number} comp The component id, itemId or position to find
* @return {Ext.Component} The component (if found)
return component;
},
-<span id='Ext-panel.AbstractPanel-method-initBodyStyles'> /**
+<span id='Ext-panel-AbstractPanel-method-initBodyStyles'> /**
</span> * Parses the {@link bodyStyle} config if available to create a style string that will be applied to the body element.
* This also includes {@link bodyPadding} and {@link bodyBorder} if available.
* @return {String} A CSS style string with body styles, padding and border.
var me = this,
bodyStyle = me.bodyStyle,
styles = [],
- Element = Ext.core.Element,
+ Element = Ext.Element,
prop;
if (Ext.isFunction(bodyStyle)) {
delete me.bodyStyle;
return styles.length ? styles.join(';') : undefined;
},
-
-<span id='Ext-panel.AbstractPanel-method-initBodyCls'> /**
-</span> * Parse the {@link bodyCls} config if available to create a comma-delimited string of
+
+<span id='Ext-panel-AbstractPanel-method-initBodyCls'> /**
+</span> * Parse the {@link bodyCls} config if available to create a comma-delimited string of
* CSS classes to be applied to the body element.
* @return {String} The CSS class(es)
* @private
var me = this,
cls = '',
bodyCls = me.bodyCls;
-
+
if (bodyCls) {
Ext.each(bodyCls, function(v) {
cls += " " + v;
}
return cls.length > 0 ? cls : undefined;
},
-
-<span id='Ext-panel.AbstractPanel-method-initRenderData'> /**
+
+<span id='Ext-panel-AbstractPanel-method-initRenderData'> /**
</span> * Initialized the renderData to be used when rendering the renderTpl.
* @return {Object} Object with keys and values that are going to be applied to the renderTpl
* @private
});
},
-<span id='Ext-panel.AbstractPanel-method-addDocked'> /**
+<span id='Ext-panel-AbstractPanel-method-addDocked'> /**
</span> * Adds docked item(s) to the panel.
- * @param {Object/Array} component The Component or array of components to add. The components
+ * @param {Object/Object[]} component The Component or array of components to add. The components
* must include a 'dock' parameter on each component to indicate where it should be docked ('top', 'right',
* 'bottom', 'left').
* @param {Number} pos (optional) The index at which the Component will be added
item.onAdded(me, i);
me.onDockedAdd(item);
}
- if (me.rendered) {
+
+ // Set flag which means that beforeLayout will not veto the layout due to the size not changing
+ me.componentLayout.childrenChanged = true;
+ if (me.rendered && !me.suspendLayout) {
me.doComponentLayout();
}
return items;
onDockedAdd : Ext.emptyFn,
onDockedRemove : Ext.emptyFn,
-<span id='Ext-panel.AbstractPanel-method-insertDocked'> /**
+<span id='Ext-panel-AbstractPanel-method-insertDocked'> /**
</span> * Inserts docked item(s) to the panel at the indicated position.
* @param {Number} pos The index at which the Component will be inserted
- * @param {Object/Array} component. The Component or array of components to add. The components
+ * @param {Object/Object[]} component. The Component or array of components to add. The components
* must include a 'dock' paramater on each component to indicate where it should be docked ('top', 'right',
* 'bottom', 'left').
*/
this.addDocked(items, pos);
},
-<span id='Ext-panel.AbstractPanel-method-removeDocked'> /**
+<span id='Ext-panel-AbstractPanel-method-removeDocked'> /**
</span> * Removes the docked item from the panel.
* @param {Ext.Component} item. The Component to remove.
* @param {Boolean} autoDestroy (optional) Destroy the component after removal.
var me = this,
layout,
hasLayout;
-
+
if (!me.dockedItems.contains(item)) {
return item;
}
if (autoDestroy === true || (autoDestroy !== false && me.autoDestroy)) {
item.destroy();
+ } else if (hasLayout) {
+ // not destroying, make any layout related removals
+ layout.afterRemove(item);
}
- if (hasLayout && !autoDestroy) {
- layout.afterRemove(item);
- }
-
- if (!this.destroying) {
+
+ // Set flag which means that beforeLayout will not veto the layout due to the size not changing
+ me.componentLayout.childrenChanged = true;
+ if (!me.destroying && !me.suspendLayout) {
me.doComponentLayout();
}
return item;
},
-<span id='Ext-panel.AbstractPanel-method-getDockedItems'> /**
+<span id='Ext-panel-AbstractPanel-method-getDockedItems'> /**
</span> * Retrieve an array of all currently docked Components.
* @param {String} cqSelector A {@link Ext.ComponentQuery ComponentQuery} selector string to filter the returned items.
- * @return {Array} An array of components.
+ * @return {Ext.Component[]} An array of components.
*/
getDockedItems : function(cqSelector) {
var me = this,
- // Start with a weight of 1, so users can provide <= 0 to come before top items
- // Odd numbers, so users can provide a weight to come in between if desired
- defaultWeight = { top: 1, left: 3, right: 5, bottom: 7 },
+ defaultWeight = me.defaultDockWeights,
dockedItems;
if (me.dockedItems && me.dockedItems.items.length) {
Ext.Array.sort(dockedItems, function(a, b) {
// Docked items are ordered by their visual representation by default (t,l,r,b)
- // TODO: Enforce position ordering, and have weights be sub-ordering within positions?
var aw = a.weight || defaultWeight[a.dock],
bw = b.weight || defaultWeight[b.dock];
if (Ext.isNumber(aw) && Ext.isNumber(bw)) {
}
return 0;
});
-
+
return dockedItems;
}
return [];
},
-
+
// inherit docs
addUIClsToElement: function(cls, force) {
- var me = this;
-
- me.callParent(arguments);
-
+ var me = this,
+ result = me.callParent(arguments),
+ classes = [Ext.baseCSSPrefix + cls, me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls],
+ array, i;
+
if (!force && me.rendered) {
- me.body.addCls(Ext.baseCSSPrefix + cls);
- me.body.addCls(me.baseCls + '-body-' + cls);
- me.body.addCls(me.baseCls + '-body-' + me.ui + '-' + cls);
+ if (me.bodyCls) {
+ me.body.addCls(me.bodyCls);
+ } else {
+ me.body.addCls(classes);
+ }
+ } else {
+ if (me.bodyCls) {
+ array = me.bodyCls.split(' ');
+
+ for (i = 0; i < classes.length; i++) {
+ if (!Ext.Array.contains(array, classes[i])) {
+ array.push(classes[i]);
+ }
+ }
+
+ me.bodyCls = array.join(' ');
+ } else {
+ me.bodyCls = classes.join(' ');
+ }
}
+
+ return result;
},
-
+
// inherit docs
removeUIClsFromElement: function(cls, force) {
- var me = this;
-
- me.callParent(arguments);
-
+ var me = this,
+ result = me.callParent(arguments),
+ classes = [Ext.baseCSSPrefix + cls, me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls],
+ array, i;
+
if (!force && me.rendered) {
- me.body.removeCls(Ext.baseCSSPrefix + cls);
- me.body.removeCls(me.baseCls + '-body-' + cls);
- me.body.removeCls(me.baseCls + '-body-' + me.ui + '-' + cls);
+ if (me.bodyCls) {
+ me.body.removeCls(me.bodyCls);
+ } else {
+ me.body.removeCls(classes);
+ }
+ } else {
+ if (me.bodyCls) {
+ array = me.bodyCls.split(' ');
+
+ for (i = 0; i < classes.length; i++) {
+ Ext.Array.remove(array, classes[i]);
+ }
+
+ me.bodyCls = array.join(' ');
+ }
}
+
+ return result;
},
-
+
// inherit docs
addUIToElement: function(force) {
- var me = this;
-
+ var me = this,
+ cls = me.baseCls + '-body-' + me.ui,
+ array;
+
me.callParent(arguments);
-
+
if (!force && me.rendered) {
- me.body.addCls(me.baseCls + '-body-' + me.ui);
+ if (me.bodyCls) {
+ me.body.addCls(me.bodyCls);
+ } else {
+ me.body.addCls(cls);
+ }
+ } else {
+ if (me.bodyCls) {
+ array = me.bodyCls.split(' ');
+
+ if (!Ext.Array.contains(array, cls)) {
+ array.push(cls);
+ }
+
+ me.bodyCls = array.join(' ');
+ } else {
+ me.bodyCls = cls;
+ }
}
},
-
+
// inherit docs
removeUIFromElement: function() {
- var me = this;
-
+ var me = this,
+ cls = me.baseCls + '-body-' + me.ui,
+ array;
+
me.callParent(arguments);
-
+
if (me.rendered) {
- me.body.removeCls(me.baseCls + '-body-' + me.ui);
+ if (me.bodyCls) {
+ me.body.removeCls(me.bodyCls);
+ } else {
+ me.body.removeCls(cls);
+ }
+ } else {
+ if (me.bodyCls) {
+ array = me.bodyCls.split(' ');
+ Ext.Array.remove(array, cls);
+ me.bodyCls = array.join(' ');
+ } else {
+ me.bodyCls = cls;
+ }
}
},
ln = dockedItems.length,
i = 0,
item;
-
+
// Find the index where we go from top/left docked items to right/bottom docked items
for (; i < ln; i++) {
item = dockedItems[i];
break;
}
}
-
+
// Return docked items in the top/left position before our container items, and
// return right/bottom positioned items after our container items.
// See AbstractDock.renderItems() for more information.
- return dockedItems.splice(0, i).concat(items).concat(dockedItems);
+ return Ext.Array.splice(dockedItems, 0, i).concat(items).concat(dockedItems);
},
beforeDestroy: function(){
}
this.callParent();
},
-
+
setBorder: function(border) {
var me = this;
me.border = (border !== undefined) ? border : true;
me.doComponentLayout();
}
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff