《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 详解与实践》 一书的全面介绍。