学步园

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

Ext.ns('Ext.ux.Logger');<br /> Ext.ux.Logger = Ext.extend(Ext.BoxComponent, {<br /> tpl: new Ext.Template("<li class='x-log-entry x-log-{0:lowercase}-entry'>",<br /> "<div class='x-log-level'>",<br /> "{0:capitalize}",<br /> "</div>",<br /> "<span class='x-log-time'>",<br /> "{2:date('H:i:s.u')}",<br /> "</span>",<br /> "<span class='x-log-message'>",<br /> "{1}",<br /> "</span>",<br /> "</li>"),<br /> autoEl: {<br /> tag: 'ul',<br /> cls: 'x-logger'<br /> },</p> <p> autoHide:false,<br /> onRender: function() {<br /> Ext.ux.Logger.superclass.onRender.apply(this, arguments);<br /> this.contextMenu = new Ext.menu.Menu({<br /> items: [new Ext.menu.CheckItem({<br /> id: 'debug',<br /> text: 'Debug',<br /> checkHandler: Ext.ux.Logger.prototype.onMenuCheck,<br /> scope: this<br /> }), new Ext.menu.CheckItem({<br /> id: 'info',<br /> text: 'Info',<br /> checkHandler: Ext.ux.Logger.prototype.onMenuCheck,<br /> scope: this<br /> }), new Ext.menu.CheckItem({<br /> id: 'warning',<br /> text: 'Warning',<br /> checkHandler: Ext.ux.Logger.prototype.onMenuCheck,<br /> scope: this<br /> }), new Ext.menu.CheckItem({<br /> id: 'error',<br /> text: 'Error',<br /> checkHandler: Ext.ux.Logger.prototype.onMenuCheck,<br /> scope: this<br /> })]<br /> });<br /> this.el.on('contextmenu', this.onContextMenu, this, { stopEvent: true });<br /> },<br /> onContextMenu: function(e) {<br /> this.contextMenu.logger = this;<br /> this.contextMenu.showAt(e.getXY());<br /> },<br /> onMenuCheck: function(checkItem, state) {<br /> var logger = checkItem.parentMenu.logger;<br /> var cls = 'x-log-show-' + checkItem.id;<br /> if (state) {<br /> logger.el.addClass(cls);<br /> } else {<br /> logger.el.removeClass(cls);<br /> }<br /> },<br /> debug: function(msg) {<br /> this.tpl.insertFirst(this.el, ['debug', msg, new Date()]);<br /> this.el.scrollTo("top", 0, true);<br /> },<br /> info: function(msg) {<br /> this.tpl.insertFirst(this.el, ['info', msg, new Date()]);<br /> this.el.scrollTo("top", 0, true);<br /> },<br /> warning: function(msg) {<br /> this.tpl.insertFirst(this.el, ['warning', msg, new Date()]);<br /> this.el.scrollTo("top", 0, true);<br /> },<br /> error: function(msg) {<br /> this.tpl.insertFirst(this.el, ['error', msg, new Date()]);<br /> this.el.scrollTo("top", 0, true);<br /> }<br /> });

还有一些样式需要加入：

.x-logger {<br /> overflow: auto;<br /> }<br /> .x-log-entry .x-log-level {<br /> float: left;<br /> width: 4em;<br /> text-align: center;<br /> margin-right: 3px;<br /> }<br /> .x-log-entry .x-log-time {<br /> margin-right: 3px;<br /> }<br /> .x-log-entry .x-log-message {<br /> margin-right: 3px;<br /> }<br /> .x-log-debug-entry, .x-log-info-entry, .x-log-warning-entry, .x-log-error-entry {<br /> display:none;<br /> }<br />  <br /> .x-log-show-debug .x-log-debug-entry { display: block }<br /> .x-log-show-info .x-log-info-entry { display: block }<br /> .x-log-show-warning .x-log-warning-entry { display: block }<br /> .x-log-show-error .x-log-error-entry { display: block }<br />  <br /> .x-log-debug-entry .x-log-level { background-color: #46c }<br /> .x-log-info-entry .x-log-level { background-color: green }<br /> .x-log-warning-entry .x-log-level { background-color: yellow }<br /> .x-log-error-entry .x-log-level { background-color: red }

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

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

运行截图如：

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

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

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

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