Extjs 3 Explanation and practice Read more: Use boxcomponent to create a logger UI

If the required UI control does not require any other detailed controls, that is, it only encapsulates HTML elements of a certain part, but also listens to the size, size, and layout control provided by the layout manager, the extension object is Ext. boxcomponent. For example, if a logger class intends to simply display log information, it can be defined as follows:

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 ('textmenu ', 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/> });

There are also some styles that need to be added:

. 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/>. 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}

How to use it? Let's put logger in the window and try it!

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! ");

Run as follows:

Logger usage: Right-click the menu to show the content.

We place the HTML list of log information in a boxcomponent. We add processing in the onrender phase, so that the right-click menu can control the visibility of logged entries Based on the name of the CSS style class. Objects at this level also provide special template methods:

• Onresize: At this moment, the size of boxcomponent has changed, and the remaining tasks can be executed.
• Onposition at this moment, the position of boxcomponent has changed, and the remaining tasks can be executed.

The content disclosed here is extjs 3 details and practices
For more information, see extjs 3 details and practices.
A comprehensive introduction to this book.