PDA

View Full Version : A Logger singleton



Animal
8 Nov 2007, 3:55 AM
Someone asked in a Help thread if there was a built-in Logger facility.

Here's a simple implementation.

Ext.ux.Logger is a singleton Ext.Window to which have been added four methods:

info(String)
debug(String)
warning(String)
error(String)

Code:



Ext.ux.Logger = function() {
var tpl = new Ext.Template("<div class='x-log-entry'><div class='x-log-level x-log-{0:lowercase}'>" +
"{0:capitalize}</div><span class='x-log-time'>{2:date('H:i:s.u')}</span>" +
"<span class='x-log-message'>{1}</span></div>");

return Ext.apply(new Ext.Window({
title: 'Ext Logger',
closeAction: 'hide',
height: 200,
minHeight: 200,
width: 400,
autoScroll: true,
buttons: [{
text: 'Clear',
handler: function() {
Ext.ux.Logger.body.update('');
}
}]
}), {
debug: function(msg) {
tpl.insertFirst(this.body, ['debug', msg, new Date()], true).scrollIntoView(this.body);
},

info: function(msg) {
tpl.insertFirst(this.body, ['info', msg, new Date()], true).scrollIntoView(this.body);
},

warning: function(msg) {
tpl.insertFirst(this.body, ['warning', msg, new Date()], true).scrollIntoView(this.body);
},

error: function(msg) {
tpl.insertFirst(this.body, ['error', msg, new Date()], true).scrollIntoView(this.body);
}
});
}();


CSS:



.x-log-entry { }
.x-log-entry .x-log-level {
float:left;
width:4em;
text-align:center;
margin-right: 3px
}
.x-log-entry .x-log-time {
margin-right: 3px
}
.x-log-entry .x-log-message {
margin-right: 3px
}
.x-log-debug { background-color: #46c }
.x-log-info { background-color: green }
.x-log-warning { background-color: yellow }
.x-log-error { background-color: red }

bearmonger
19 Nov 2007, 7:35 AM
I can recommend log4javascript. It is obviously based on log4J and I use it for all my projects. It is very easy to incorporate and a very powerful logger.



log = log4javascript.getLogger();


log4javascript.setEnabled(true);

//set the global logging level
log.setLevel(LOGGING_LEVEL);


//Create a PopUpAppender with default options
var popUpAppender = new log4javascript.PopUpAppender();

popUpAppender.setMaxMessages(null);

//Add the appender to the logger
log.addAppender(popUpAppender);


//Create an AjaxAppender with default options
var ajaxAppender = new log4javascript.AjaxAppender("/servlet/RequestHandler?ActionID=logger");

//Add the appender to the logger
log.addAppender(ajaxAppender);

log.trace("Successfully initialised logging");

bearmonger
19 Nov 2007, 7:38 AM
Screenshot: