/**
+
+
+
+
+ The source code
+
+
+
+
+
+
+ /**
* @class Ext.panel.Header
* @extends Ext.container.Container
* Simple header class which is used for on {@link Ext.panel.Panel} and {@link Ext.window.Window}
- * @xtype header
*/
Ext.define('Ext.panel.Header', {
extend: 'Ext.container.Container',
@@ -14,10 +30,26 @@ Ext.define('Ext.panel.Header', {
indicateDrag : false,
weight : -1,
- renderTpl: ['<div class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl><tpl if="uiCls"><tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>'],
+ renderTpl: [
+ '<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
+ '<tpl if="uiCls">',
+ '<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
+ '</tpl>"',
+ '<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>'],
+
+ /**
+ * @cfg {String} title
+ * The title text to display
+ */
+
+ /**
+ * @cfg {String} iconCls
+ * CSS class for icon in header. Used for displaying an icon to the left of a title.
+ */
initComponent: function() {
var me = this,
+ ruleStyle,
rule,
style,
titleTextEl,
@@ -35,9 +67,7 @@ Ext.define('Ext.panel.Header', {
me.addClsWithUI(me.orientation);
me.addClsWithUI(me.dock);
- Ext.applyIf(me.renderSelectors, {
- body: '.' + me.baseCls + '-body'
- });
+ me.addChildEls('body');
// Add Icon
if (!Ext.isEmpty(me.iconCls)) {
@@ -72,7 +102,11 @@ Ext.define('Ext.panel.Header', {
if (Ext.isArray(ui)) {
ui = ui[0];
}
- rule = Ext.util.CSS.getRule('.' + me.baseCls + '-text-' + ui);
+ ruleStyle = '.' + me.baseCls + '-text-' + ui;
+ if (Ext.scopeResetCSS) {
+ ruleStyle = '.' + Ext.baseCSSPrefix + 'reset ' + ruleStyle;
+ }
+ rule = Ext.util.CSS.getRule(ruleStyle);
if (rule) {
style = rule.style;
}
@@ -88,9 +122,12 @@ Ext.define('Ext.panel.Header', {
ariaRole : 'heading',
focusable: false,
viewBox: false,
+ flex : 1,
autoSize: true,
margins: '5 0 0 0',
items: [ me.textConfig ],
+ // this is a bit of a cheat: we are not selecting an element of titleCmp
+ // but rather of titleCmp.items[0] (so we cannot use childEls)
renderSelectors: {
textEl: '.' + me.baseCls + '-text'
}
@@ -106,27 +143,21 @@ Ext.define('Ext.panel.Header', {
xtype : 'component',
ariaRole : 'heading',
focusable: false,
- renderTpl : ['<span class="{cls}-text {cls}-text-{ui}">{title}</span>'],
+ flex : 1,
+ cls: me.baseCls + '-text-container',
+ renderTpl : [
+ '<span id="{id}-textEl" class="{cls}-text {cls}-text-{ui}">{title}</span>'
+ ],
renderData: {
title: me.title,
cls : me.baseCls,
ui : me.ui
},
- renderSelectors: {
- textEl: '.' + me.baseCls + '-text'
- }
+ childEls: ['textEl']
});
}
me.items.push(me.titleCmp);
- // Spacer ->
- me.items.push({
- xtype: 'component',
- html : ' ',
- flex : 1,
- focusable: false
- });
-
// Add Tools
me.items = me.items.concat(me.tools);
this.callParent();
@@ -135,16 +166,16 @@ Ext.define('Ext.panel.Header', {
initIconCmp: function() {
this.iconCmp = Ext.create('Ext.Component', {
focusable: false,
- renderTpl : ['<img alt="" src="{blank}" class="{cls}-icon {iconCls}"/>'],
+ renderTpl : [
+ '<img id="{id}-iconEl" alt="" src="{blank}" class="{cls}-icon {iconCls}"/>'
+ ],
renderData: {
blank : Ext.BLANK_IMAGE_URL,
cls : this.baseCls,
iconCls: this.iconCls,
orientation: this.orientation
},
- renderSelectors: {
- iconEl: '.' + this.baseCls + '-icon'
- },
+ childEls: ['iconEl'],
iconCls: this.iconCls
});
},
@@ -175,36 +206,90 @@ Ext.define('Ext.panel.Header', {
// inherit docs
addUIClsToElement: function(cls, force) {
- var me = this;
-
- me.callParent(arguments);
+ var me = this,
+ result = me.callParent(arguments),
+ classes = [me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls],
+ array, i;
if (!force && me.rendered) {
- 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 = [me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls],
+ array, i;
if (!force && me.rendered) {
- 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,
+ array, cls;
me.callParent(arguments);
+ cls = me.baseCls + '-body-' + me.ui;
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;
+ }
}
if (!force && me.titleCmp && me.titleCmp.rendered && me.titleCmp.textEl) {
@@ -214,12 +299,26 @@ Ext.define('Ext.panel.Header', {
// inherit docs
removeUIFromElement: function() {
- var me = this;
+ var me = this,
+ array, cls;
me.callParent(arguments);
+ cls = me.baseCls + '-body-' + me.ui;
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;
+ }
}
if (me.titleCmp && me.titleCmp.rendered && me.titleCmp.textEl) {
@@ -237,7 +336,7 @@ Ext.define('Ext.panel.Header', {
return this.body || this.frameBody || this.el;
},
- /**
+ /**
* Sets the title of the header.
* @param {String} title The title to be set
*/
@@ -283,25 +382,26 @@ Ext.define('Ext.panel.Header', {
}
},
- /**
- * Sets the CSS class that provides the icon image for this panel. This method will replace any existing
- * icon class if one has already been set and fire the {@link #iconchange} event after completion.
+ /**
+ * Sets the CSS class that provides the icon image for this header. This method will replace any existing
+ * icon class if one has already been set.
* @param {String} cls The new CSS class name
*/
setIconCls: function(cls) {
- this.iconCls = cls;
- if (!this.iconCmp) {
- this.initIconCmp();
- this.insert(0, this.iconCmp);
- }
- else {
- if (!cls || !cls.length) {
- this.iconCmp.destroy();
- }
- else {
- var iconCmp = this.iconCmp,
- el = iconCmp.iconEl;
-
+ var me = this,
+ isEmpty = !cls || !cls.length,
+ iconCmp = me.iconCmp,
+ el;
+
+ me.iconCls = cls;
+ if (!me.iconCmp && !isEmpty) {
+ me.initIconCmp();
+ me.insert(0, me.iconCmp);
+ } else if (iconCmp) {
+ if (isEmpty) {
+ me.iconCmp.destroy();
+ } else {
+ el = iconCmp.iconEl;
el.removeCls(iconCmp.iconCls);
el.addCls(cls);
iconCmp.iconCls = cls;
@@ -309,7 +409,7 @@ Ext.define('Ext.panel.Header', {
}
},
- /**
+ /**
* Add a tool to the header
* @param {Object} tool
*/
@@ -317,7 +417,7 @@ Ext.define('Ext.panel.Header', {
this.tools.push(this.add(tool));
},
- /**
+ /**
* @private
* Set up the tools.<tool type> link in the owning Panel.
* Bind the tool to its owning Panel.
@@ -332,4 +432,6 @@ Ext.define('Ext.panel.Header', {
}
}
});
-
\ No newline at end of file
+