PDA

View Full Version : how to add custom html tags into an ext.panel



Vaevictus
5 Mar 2011, 8:25 AM
Here is the code for a header panel that sits at the top of my browser window.


Presentation.MainHeaderPanel = function(config) {

var siteconfig = getSiteConfiguration();
var toolbarHeight = 23;
this.largeHeight = config.bbar? 74: 74 - toolbarHeight - 2;
this.smallHeight = config.bbar? 50: 50 - toolbarHeight - 2;
this.noneHeight = config.bbar? 23: 0;

Ext.applyIf( config, {
mainWindow : true
, region : 'north'
, border : false
, leftImage : 'logoheader.jpg'
, leftToolTip : ''
, title : 'Document Search Engine'
, titleToolTip : ''
, rightImage : siteconfig.SiteLogo
, rightToolTip : siteconfig.SiteName
});

config.displayMode = config.mainWindow ? 'Large' : 'Small';

var prefs = getUserPreferences();
if(prefs && prefs.Header){
if(config.mainWindow){
config.displayMode = prefs.Header.Value;
}
else{
if(prefs.Header.Value == 'None'){
config.displayMode = 'None';
}
}
}

if(config.displayMode == 'Large'){
config.mainHeaderClass = 'mainHeader';
config.height = this.largeHeight;
}
else if(config.displayMode == 'Small'){
config.mainHeaderClass = 'mainHeaderSmall';
config.height = this.smallHeight;
}
else{
config.mainHeaderClass = 'mainHeaderSmall';
config.height = this.noneHeight;
}

Ext.apply( config, {
header: false
});
Presentation.MainHeaderPanel.superclass.constructor.call(this, config);
};

Ext.extend(Presentation.MainHeaderPanel, Ext.Panel, {

ctype: "Presentation.MainHeaderPanel",

initComponent : function(){
Presentation.MainHeaderPanel.superclass.initComponent.call(this);
this.on('render', this.renderingDone, this);
},

setDisplayMode : function (newMode){
if(newMode != this.displayMode){
this.displayMode = newMode;
this.processModeChange();
}
},

processModeChange: function(){
var previousClass = this.mainHeaderClass;
if(this.displayMode == 'Large'){
this.mainHeaderClass = 'mainHeader';
this.leftImage.setStyle('display', 'block');
this.rightImage.show();
this.leftSpan.hide();
this.setHeight(this.largeHeight);
}
else if(this.displayMode == 'Small'){
this.leftImage.setStyle('display', 'none');
this.rightImage.hide();
this.leftSpan.show();
this.mainHeaderClass = 'mainHeaderSmall';
this.setHeight(this.smallHeight);
}
else{
this.leftImage.hide();
this.leftImage.setStyle('display', 'none');
this.leftSpan.hide();
this.mainHeaderClass = 'mainHeaderSmall';
this.setHeight(this.noneHeight);
}
this.body.replaceClass(previousClass, this.mainHeaderClass );
this.titleElement.replaceClass( previousClass, this.mainHeaderClass );
},

renderingDone: function(){
this.body.addClass( this.mainHeaderClass );
// Only visible when large
this.leftImage = Ext.get(appendImage(this.body, Ext.id(), imagesUrl + this.leftImage, this.leftToolTip, 'mainLogo'));
this.titleElement = Ext.get(appendSpan(this.body, Ext.id(), this.title , this.titleToolTip, this.mainHeaderClass));
// Only visible when large
this.rightImage = Ext.get(appendImage(this.body, Ext.id(), imagesUrl + this.rightImage, this.rightToolTip, 'unitLogo'));
// Only visible when small
this.leftSpan = Ext.get(appendSpan(this.body, Ext.id(), this.rightToolTip , "", 'unitSpan'));
this.processModeChange();
// Make sure the display hide is used
this.leftImage.setVisibilityMode(Ext.Element.DISPLAY);
},

setTitle: function(title){
this.title = title;
if(this.titleElement){
setInnerText(this.titleElement, this.title);
}
}

});

Ext.reg('mainheaderpanel', Presentation.MainHeaderPanel);

I want to render the following html element into the panel:

<canvas id="clockid" class="CoolClock:Skin:Radius:noSeconds:GMTOffset"></canvas>

How can I do this? I dont have a clue.

Any pointers much appreciated.
Vae

ExtJSBeginner
5 Mar 2011, 10:01 AM
Can't you just use



html: '<canvas id="clockid" class="CoolClock:Skin:Radius:noSeconds:GMTOffset"></canvas>'


in your Panel Config?

steffenk
5 Mar 2011, 2:34 PM
http://dev.sk-typo3.de/ext/hopalong.html