Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, { cls: "x-statusbar", busyIconCls: "x-status-busy", busyText: "Loading...", autoClear: 5E3, activeThreadId: 0, initComponent: function() { if (this.statusAlign == "right") this.cls += " x-status-right"; Ext.ux.StatusBar.superclass.initComponent.call(this) }, afterRender: function() { Ext.ux.StatusBar.superclass.afterRender.call(this); var a = this.statusAlign == "right"; this.statusEl = new Ext.Toolbar.TextItem({ cls: "x-status-text " + (this.iconCls || this.defaultIconCls || ""), text: this.text || this.defaultText || "" }); if (a) { this.add("->"); this.add(this.statusEl) } else { this.insert(0, this.statusEl); this.insert(1, "->") } }, setStatus: function(a) { a = a || {}; if (typeof a == "string") a = { text: a }; a.text !== undefined && this.setText(a.text); a.iconCls !== undefined && this.setIcon(a.iconCls); if (a.clear) { a = a.clear; var b = this.autoClear, c = { useDefaults: true, anim: true }; if (typeof a == "object") { a = Ext.applyIf(a, c); if (a.wait) b = a.wait } else if (typeof a == "number") { b = a; a = c } else if (typeof a == "boolean") a = c; a.threadId = this.activeThreadId; this.clearStatus.defer(b, this, [a]) } return this }, clearStatus: function(a) { a = a || {}; if (a.threadId && a.threadId !== this.activeThreadId) return this; var b = a.useDefaults ? this.defaultText : "", c = a.useDefaults ? this.defaultIconCls ? this.defaultIconCls : "" : ""; if (a.anim) this.statusEl.fadeOut({ remove: false, useDisplay: true, scope: this, callback: function() { this.setStatus({ text: b, iconCls: c }); this.statusEl.show() } }); else { this.statusEl.hide(); this.setStatus({ text: b, iconCls: c }); this.statusEl.show() } return this }, setText: function(a) { this.activeThreadId++; this.text = a || ""; this.rendered && this.statusEl.setText(this.text); return this }, getText: function() { return this.text }, setIcon: function(a) { this.activeThreadId++; a = a || ""; if (this.rendered) { if (this.currIconCls) { this.statusEl.removeClass(this.currIconCls); this.currIconCls = null } if (a.length > 0) { this.statusEl.addClass(a); this.currIconCls = a } } else this.currIconCls = a; return this }, showBusy: function(a) { if (typeof a == "string") a = { text: a }; a = Ext.applyIf(a || {}, { text: this.busyText, iconCls: this.busyIconCls }); return this.setStatus(a) } }); Ext.reg("statusbar", Ext.ux.StatusBar); Ext.ux.ValidationStatus = Ext.extend(Ext.Component, { errorIconCls: "x-status-error", errorListCls: "x-status-error-list", validIconCls: "x-status-valid", showText: "The form has errors (click for details...)", hideText: "Click again to hide the error list", submitText: "Saving...", init: function(a) { a.on("render", function() { this.statusBar = a; this.monitor = true; this.errors = new Ext.util.MixedCollection; this.listAlign = a.statusAlign == "right" ? "br-tr?" : "bl-tl?"; if (this.form) { var b = Ext.getCmp(this.form); this.form = b.getForm(); b.rendered ? this.startMonitoring() : b.on("afterrender", this.startMonitoring, this); this.form.on("beforeaction", function(e, d) { if (d.type == "submit") this.monitor = false }, this); b = function() { this.monitor = true }; var c = function() { this.monitor = true; this.statusBar.setStatus({ text: this.showText, iconCls: this.errorIconCls }) }; this.form.on("actioncomplete", b, this); this.form.on("actionfailed", c, this) } }, this, { single: true }); a.on({ scope: this, afterlayout: { single: true, fn: function() { a.statusEl.getEl().on("click", this.onStatusClick, this, { buffer: 200 }) } }, beforedestroy: { single: true, fn: this.onDestroy} }) }, startMonitoring: function() { this.form.items.each(function(a) { a.on("invalid", this.onFieldValidation, this); a.on("valid", this.onFieldValidation, this) }, this) }, stopMonitoring: function() { this.form.items.each(function(a) { a.un("invalid", this.onFieldValidation, this); a.un("valid", this.onFieldValidation, this) }, this) }, onDestroy: function() { this.stopMonitoring(); this.statusBar.statusEl.un("click", this.onStatusClick, this); Ext.ux.ValidationStatus.superclass.onDestroy.call(this) }, onFieldValidation: function(a, b) { if (!this.monitor) return false; b ? this.errors.add(a.id, { field: a, msg: b }) : this.errors.removeKey(a.id); this.updateErrorList(); if (this.errors.getCount() > 0) this.statusBar.getText() != this.showText && this.statusBar.setStatus({ text: this.showText, iconCls: this.errorIconCls }); else this.statusBar.clearStatus().setIcon(this.validIconCls) }, updateErrorList: function() { if (this.errors.getCount() > 0) { var a = "<ul>"; this.errors.each(function(b) { a += '<li id="x-err-' + b.field.id + '"><a href="#">' + b.msg + "</a></li>" }, this); this.getMsgEl().update(a + "</ul>") } else this.getMsgEl().update("") }, getMsgEl: function() { if (!this.msgEl) { this.msgEl = Ext.DomHelper.append(Ext.getBody(), { cls: this.errorListCls + " x-hide-offsets" }, true); this.msgEl.on("click", function(a) { if (a = a.getTarget("li", 10, true)) { Ext.getCmp(a.id.split("x-err-")[1]).focus(); this.hideErrors() } }, this, { stopEvent: true }) } return this.msgEl }, showErrors: function() { this.updateErrorList(); this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn("b", { duration: 0.3, easing: "easeOut" }); this.statusBar.setText(this.hideText); this.form.getEl().on("click", this.hideErrors, this, { single: true }) }, hideErrors: function() { var a = this.getMsgEl(); if (a.isVisible()) { a.slideOut("b", { duration: 0.2, easing: "easeIn" }); this.statusBar.setText(this.showText) } this.form.getEl().un("click", this.hideErrors, this) }, onStatusClick: function() { if (this.getMsgEl().isVisible()) this.hideErrors(); else this.errors.getCount() > 0 && this.showErrors() } });