《ExtJS 3详解与实践》阅读补充资料：用BoxComponent制作Logger UI

如果要求的UI控件不需要其他的细节的控件，也就是，仅仅是封装某部分的HTML元素的话，还要听凭布局管理器提供的大小尺寸、布局的调控，那么这个的扩展对象就是Ext.BoxComponent。例如，假设一个Logger类打算是简单地显示log信息，就可以这样定义：

Ext.ns('Ext.ux.Logger');
Ext.ux.Logger = Ext.extend(Ext.BoxComponent, {
tpl: new Ext.Template("<li class='x-log-entry x-log-{0:lowercase}-entry'>",
"<div class='x-log-level'>",
"{0:capitalize}",
"</div>",
"<span class='x-log-time'>",
"{2:date('H:i:s.u')}",
"</span>",
"<span class='x-log-message'>",
"{1}",
"</span>",
"</li>"),
autoEl: {
tag: 'ul',
cls: 'x-logger'
},

autoHide:false,
onRender: function() {
Ext.ux.Logger.superclass.onRender.apply(this, arguments);
this.contextMenu = new Ext.menu.Menu({
items: [new Ext.menu.CheckItem({
id: 'debug',
text: 'Debug',
checkHandler: Ext.ux.Logger.prototype.onMenuCheck,
scope: this
}), new Ext.menu.CheckItem({
id: 'info',
text: 'Info',
checkHandler: Ext.ux.Logger.prototype.onMenuCheck,
scope: this
}), new Ext.menu.CheckItem({
id: 'warning',
text: 'Warning',
checkHandler: Ext.ux.Logger.prototype.onMenuCheck,
scope: this
}), new Ext.menu.CheckItem({
id: 'error',
text: 'Error',
checkHandler: Ext.ux.Logger.prototype.onMenuCheck,
scope: this
})]
});
this.el.on('contextmenu', this.onContextMenu, this, { stopEvent: true });
},
onContextMenu: function(e) {
this.contextMenu.logger = this;
this.contextMenu.showAt(e.getXY());
},
onMenuCheck: function(checkItem, state) {
var logger = checkItem.parentMenu.logger;
var cls = 'x-log-show-' + checkItem.id;
if (state) {
logger.el.addClass(cls);
} else {
logger.el.removeClass(cls);
}
},
debug: function(msg) {
this.tpl.insertFirst(this.el, ['debug', msg, new Date()]);
this.el.scrollTo("top", 0, true);
},
info: function(msg) {
this.tpl.insertFirst(this.el, ['info', msg, new Date()]);
this.el.scrollTo("top", 0, true);
},
warning: function(msg) {
this.tpl.insertFirst(this.el, ['warning', msg, new Date()]);
this.el.scrollTo("top", 0, true);
},
error: function(msg) {
this.tpl.insertFirst(this.el, ['error', msg, new Date()]);
this.el.scrollTo("top", 0, true);
}
});

还有一些样式需要加入：

.x-logger {
overflow: auto;
}
.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-entry, .x-log-info-entry, .x-log-warning-entry, .x-log-error-entry {
display:none;
}
 
.x-log-show-debug .x-log-debug-entry { display: block }
.x-log-show-info .x-log-info-entry { display: block }
.x-log-show-warning .x-log-warning-entry { display: block }
.x-log-show-error .x-log-error-entry { display: block }
 
.x-log-debug-entry .x-log-level { background-color: #46c }
.x-log-info-entry .x-log-level  { background-color: green }
.x-log-warning-entry .x-log-level  { background-color: yellow }
.x-log-error-entry .x-log-level  { background-color: red }

怎么使用？我们将logger放进Window中试试！

logger = new Ext.ux.Logger();
new Ext.Window({
items: logger,
width: 500,
height: 350,
title: "Logger",
layout: "fit"
}).show();
logger.debug("Hello world!");
logger.info("Hello world!");
logger.warning("Hello world!");
logger.error("Hello world!");
logger.debug(88+200);
logger.info({});
logger.warning("Hello world!");
logger.error("Hello world!");

运行截图如：



Logger用法：右键面板探出菜单，以显示内容。

我们把log的信息的HTML列表均放置在一个BoxComponent中。我们在onRender的阶段加入处理，使得右键菜单可以根据CSS样式类的名称操控logged条目的可见性。 位于该层次的对象还提供了特别的模板方法：

onResize 此时此刻，BoxComponent的大小已经发生变化，此时可执行剩余的任务。

onPosition 此时此刻，BoxComponent的定位已经发生变化，此时可执行剩余的任务。

此处披露的内容是《ExtJS 3详解与实践》
的补充内容，完整的资料敬请参阅《ExtJS 3 详解与实践》
一书的全面介绍。