From a4ca1f548b8b324f5a07acfa2dd8d027e8eceb0e Mon Sep 17 00:00:00 2001
From: keynslug =a.x&&b.right<=a.right&&b.y>=a.y&&b.bottom<=a.bottom)},intersect:function(g){var f=this,d=Math.max(f.y,g.y),e=Math.min(f.right,g.right),a=Math.min(f.bottom,g.bottom),c=Math.max(f.x,g.x);if(a>d&&e>c){return new this.self(d,e,a,c)}else{return false}},union:function(g){var f=this,d=Math.min(f.y,g.y),e=Math.max(f.right,g.right),a=Math.max(f.bottom,g.bottom),c=Math.min(f.x,g.x);return new this.self(d,e,a,c)},constrainTo:function(b){var a=this,c=Ext.Number.constrain;a.top=a.y=c(a.top,b.y,b.bottom);a.bottom=c(a.bottom,b.y,b.bottom);a.left=a.x=c(a.left,b.x,b.right);a.right=c(a.right,b.x,b.right);return a},adjust:function(d,f,a,c){var e=this;e.top=e.y+=d;e.left=e.x+=c;e.right+=f;e.bottom+=a;return e},getOutOfBoundOffset:function(a,b){if(!Ext.isObject(a)){if(a=="x"){return this.getOutOfBoundOffsetX(b)}else{return this.getOutOfBoundOffsetY(b)}}else{b=a;var c=Ext.create("Ext.util.Offset");c.x=this.getOutOfBoundOffsetX(b.x);c.y=this.getOutOfBoundOffsetY(b.y);return c}},getOutOfBoundOffsetX:function(a){if(a<=this.x){return this.x-a}else{if(a>=this.right){return this.right-a}}return 0},getOutOfBoundOffsetY:function(a){if(a<=this.y){return this.y-a}else{if(a>=this.bottom){return this.bottom-a}}return 0},isOutOfBound:function(a,b){if(!Ext.isObject(a)){if(a=="x"){return this.isOutOfBoundX(b)}else{return this.isOutOfBoundY(b)}}else{b=a;return(this.isOutOfBoundX(b.x)||this.isOutOfBoundY(b.y))}},isOutOfBoundX:function(a){return(a To enable Dates to also be formatted according to that format, a corresponding
+ * formatting function must be placed into the {@link #formatFunctions} property.
+ * @property parseFunctions
+ * @static
+ * @type Object
+ */
+ parseFunctions: {
+ "MS": function(input, strict) {
+ // note: the timezone offset is ignored since the MS Ajax server sends
+ // a UTC milliseconds-since-Unix-epoch value (negative values are allowed)
+ var re = new RegExp('\\/Date\\(([-+])?(\\d+)(?:[+-]\\d{4})?\\)\\/');
+ var r = (input || '').match(re);
+ return r? new Date(((r[1] || '') + r[2]) * 1) : null;
+ }
+ },
+ parseRegexes: [],
+
+ /**
+ * An object hash in which each property is a date formatting function. The property name is the
+ * format string which corresponds to the produced formatted date string. This object is automatically populated with date formatting functions as
+ * date formats are requested for Ext standard formatting strings. Custom formatting functions may be inserted into this object, keyed by a name which from then on
+ * may be used as a format string to {@link #format}. Example: A formatting function should return a string representation of the passed Date object, and is passed the following parameters:\^])\s?|\s|$)/,c=/^(#)?([\w\-]+|\*)(?:\((true|false)\))?/,b=[{re:/^\.([\w\-]+)(?:\((true|false)\))?/,method:l},{re:/^(?:[\[](?:@)?([\w\-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]])/,method:m},{re:/^#([\w\-]+)/,method:d},{re:/^\:([\w\-]+)(?:\(((?:\{[^\}]+\})|(?:(?!\{)[^\s>\/]*?(?!\})))\))?/,method:k},{re:/^(?:\{([^\}]+)\})/,method:j}];g.Query=Ext.extend(Object,{constructor:function(n){n=n||{};Ext.apply(this,n)},execute:function(o){var q=this.operations,r=0,s=q.length,p,n;if(!o){n=Ext.ComponentManager.all.getArray()}else{if(Ext.isArray(o)){n=o}}for(;r1){for(q=0,r=s.length;q
");i=Ext.util.TextMetrics.measure(h,g,d).height+h.getBorderWidth("tb")+h.getPadding("tb");f=b.growMax;if(Ext.isNumber(j)){f=Math.min(f,j)}k[1]=Ext.Number.constrain(i,b.growMin,f)}return k}});Ext.define("Ext.dd.DragDropManager",{singleton:true,requires:["Ext.util.Region"],uses:["Ext.tip.QuickTipManager"],alternateClassName:["Ext.dd.DragDropMgr","Ext.dd.DDM"],ids:{},handleIds:{},dragCurrent:null,dragOvers:{},deltaX:0,deltaY:0,preventDefault:true,stopPropagation:true,initialized:false,locked:false,init:function(){this.initialized=true},POINT:0,INTERSECT:1,mode:0,_execOnAll:function(c,b){for(var d in this.ids){for(var a in this.ids[d]){var e=this.ids[d][a];if(!this.isTypeOfDD(e)){continue}e[c].apply(e,b)}}},_onLoad:function(){this.init();var a=Ext.EventManager;a.on(document,"mouseup",this.handleMouseUp,this,true);a.on(document,"mousemove",this.handleMouseMove,this,true);a.on(window,"unload",this._onUnload,this,true);a.on(window,"resize",this._onResize,this,true)},_onResize:function(a){this._execOnAll("resetConstraints",[])},lock:function(){this.locked=true},unlock:function(){this.locked=false},isLocked:function(){return this.locked},locationCache:{},useCache:true,clickPixelThresh:3,clickTimeThresh:350,dragThreshMet:false,clickTimeout:null,startX:0,startY:0,regDragDrop:function(b,a){if(!this.initialized){this.init()}if(!this.ids[a]){this.ids[a]={}}this.ids[a][b.id]=b},removeDDFromGroup:function(c,a){if(!this.ids[a]){this.ids[a]={}}var b=this.ids[a];if(b&&b[c.id]){delete b[c.id]}},_remove:function(b){for(var a in b.groups){if(a&&this.ids[a]&&this.ids[a][b.id]){delete this.ids[a][b.id]}}delete this.handleIds[b.id]},regHandle:function(b,a){if(!this.handleIds[b]){this.handleIds[b]={}}this.handleIds[b][a]=a},isDragDrop:function(a){return(this.getDDById(a))?true:false},getRelated:function(f,b){var e=[];for(var d in f.groups){for(var c in this.ids[d]){var a=this.ids[d][c];if(!this.isTypeOfDD(a)){continue}if(!b||a.isTarget){e[e.length]=a}}}return e},isLegalTarget:function(e,d){var b=this.getRelated(e,true);for(var c=0,a=b.length;cthis.clickPixelThresh||a>this.clickPixelThresh){this.startDrag(this.startX,this.startY)}}if(this.dragThreshMet){this.dragCurrent.b4Drag(c);this.dragCurrent.onDrag(c);if(!this.dragCurrent.moveOnly){this.fireEvents(c,false)}}this.stopEvent(c);return true},fireEvents:function(l,m){var o=this.dragCurrent;if(!o||o.isLocked()){return}var p=l.getPoint();var a=[];var d=[];var j=[];var g=[];var c=[];for(var f in this.dragOvers){var b=this.dragOvers[f];if(!this.isTypeOfDD(b)){continue}if(!this.isOverTarget(p,b,this.mode)){d.push(b)}a[f]=true;delete this.dragOvers[f]}for(var n in o.groups){if("string"!=typeof n){continue}for(f in this.ids[n]){var h=this.ids[n][f];if(!this.isTypeOfDD(h)){continue}if(h.isTarget&&!h.isLocked()&&((h!=o)||(o.ignoreSelf===false))){if(this.isOverTarget(p,h,this.mode)){if(m){g.push(h)}else{if(!a[h.id]){c.push(h)}else{j.push(h)}this.dragOvers[h.id]=h}}}}}if(this.mode){if(d.length){o.b4DragOut(l,d);o.onDragOut(l,d)}if(c.length){o.onDragEnter(l,c)}if(j.length){o.b4DragOver(l,j);o.onDragOver(l,j)}if(g.length){o.b4DragDrop(l,g);o.onDragDrop(l,g)}}else{var k=0;for(f=0,k=d.length;f",'
"],initFrame:function(){if(Ext.supports.CSS3BorderRadius){return false}var d=this,c=d.getFrameInfo(),b=c.width,a=d.getFrameTpl(c.table);if(d.frame){a.insertFirst(d.el,Ext.apply({},{ui:d.ui,uiCls:d.uiCls,frameCls:d.frameCls,baseCls:d.baseCls,frameWidth:b,top:!!c.top,left:!!c.left,right:!!c.right,bottom:!!c.bottom},d.getFramePositions(c)));d.frameBody=d.el.down("."+d.frameCls+"-mc");Ext.apply(d.renderSelectors,{frameTL:"."+d.baseCls+"-tl",frameTC:"."+d.baseCls+"-tc",frameTR:"."+d.baseCls+"-tr",frameML:"."+d.baseCls+"-ml",frameMC:"."+d.baseCls+"-mc",frameMR:"."+d.baseCls+"-mr",frameBL:"."+d.baseCls+"-bl",frameBC:"."+d.baseCls+"-bc",frameBR:"."+d.baseCls+"-br"})}},updateFrame:function(){if(Ext.supports.CSS3BorderRadius){return false}var e=this,g=this.frameSize&&this.frameSize.table,f=this.frameTL,d=this.frameBL,c=this.frameML,a=this.frameMC,b;this.initFrame();if(a){if(e.frame){delete e.frameTL;delete e.frameTC;delete e.frameTR;delete e.frameML;delete e.frameMC;delete e.frameMR;delete e.frameBL;delete e.frameBC;delete e.frameBR;this.applyRenderSelectors();b=this.frameMC.dom.className;a.insertAfter(this.frameMC);this.frameMC.remove();this.frameBody=this.frameMC=a;a.dom.className=b;if(g){e.el.query("> table")[1].remove()}else{if(f){f.remove()}if(d){d.remove()}c.remove()}}else{}}else{if(e.frame){this.applyRenderSelectors()}}},getFrameInfo:function(){if(Ext.supports.CSS3BorderRadius){return false}var c=this,f=c.el.getStyle("background-position-x"),e=c.el.getStyle("background-position-y"),d,b=false,a;if(!f&&!e){d=c.el.getStyle("background-position").split(" ");f=d[0];e=d[1]}if(parseInt(f,10)>=1000000&&parseInt(e,10)>=1000000){a=Math.max;b={table:f.substr(0,3)=="110",vertical:e.substr(0,3)=="110",top:a(f.substr(3,2),f.substr(5,2)),right:a(f.substr(5,2),e.substr(3,2)),bottom:a(e.substr(3,2),e.substr(5,2)),left:a(e.substr(5,2),f.substr(3,2))};b.width=a(b.top,b.right,b.bottom,b.left);c.el.setStyle("background-image","none")}if(c.frame===true&&!b){Ext.Error.raise("You have set frame: true explicity on this component while it doesn't have any framing defined in the CSS template. In this case IE can't figure out what sizes to use and thus framing on this component will be disabled.")}c.frame=c.frame||!!b;c.frameSize=b||false;return b},getFramePositions:function(e){var g=this,h=e.width,i=g.dock,d,b,f,c,a;if(e.vertical){b="0 -"+(h*0)+"px";f="0 -"+(h*1)+"px";if(i&&i=="right"){b="right -"+(h*0)+"px";f="right -"+(h*1)+"px"}d={tl:"0 -"+(h*0)+"px",tr:"0 -"+(h*1)+"px",bl:"0 -"+(h*2)+"px",br:"0 -"+(h*3)+"px",ml:"-"+(h*1)+"px 0",mr:"right 0",tc:b,bc:f}}else{c="-"+(h*0)+"px 0";a="right 0";if(i&&i=="bottom"){c="left bottom";a="right bottom"}d={tl:"0 -"+(h*2)+"px",tr:"right -"+(h*3)+"px",bl:"0 -"+(h*4)+"px",br:"right -"+(h*5)+"px",ml:c,mr:a,tc:"0 -"+(h*0)+"px",bc:"0 -"+(h*1)+"px"}}return d},getFrameTpl:function(a){return a?this.getTpl("frameTableTpl"):this.getTpl("frameTpl")},initCls:function(){var b=this,a=[];a.push(b.baseCls);if(Ext.isDefined(b.cmpCls)){if(Ext.isDefined(Ext.global.console)){Ext.global.console.warn("Ext.Component: cmpCls has been deprecated. Please use componentCls.")}b.componentCls=b.cmpCls;delete b.cmpCls}if(b.componentCls){a.push(b.componentCls)}else{b.componentCls=b.baseCls}if(b.cls){a.push(b.cls);delete b.cls}return a.concat(b.additionalCls)},setUI:function(f){var e=this,b=Ext.Array.clone(e.uiCls),g=[],d=[],a,c;for(c=0;c",' "," ','",' ",' ','",' "," ','=this.minX;b=b-a){if(!c[b]){this.xTicks[this.xTicks.length]=b;c[b]=true}}for(b=this.initPageX;b<=this.maxX;b=b+a){if(!c[b]){this.xTicks[this.xTicks.length]=b;c[b]=true}}Ext.Array.sort(this.xTicks,this.DDMInstance.numericSort)},setYTicks:function(d,a){this.yTicks=[];this.yTickSize=a;var c={};for(var b=this.initPageY;b>=this.minY;b=b-a){if(!c[b]){this.yTicks[this.yTicks.length]=b;c[b]=true}}for(b=this.initPageY;b<=this.maxY;b=b+a){if(!c[b]){this.yTicks[this.yTicks.length]=b;c[b]=true}}Ext.Array.sort(this.yTicks,this.DDMInstance.numericSort)},setXConstraint:function(c,b,a){this.leftConstraint=c;this.rightConstraint=b;this.minX=this.initPageX-c;this.maxX=this.initPageX+b;if(a){this.setXTicks(this.initPageX,a)}this.constrainX=true},clearConstraints:function(){this.constrainX=false;this.constrainY=false;this.clearTicks()},clearTicks:function(){this.xTicks=null;this.yTicks=null;this.xTickSize=0;this.yTickSize=0},setYConstraint:function(a,c,b){this.topConstraint=a;this.bottomConstraint=c;this.minY=this.initPageY-a;this.maxY=this.initPageY+c;if(b){this.setYTicks(this.initPageY,b)}this.constrainY=true},resetConstraints:function(){if(this.initPageX||this.initPageX===0){var b=(this.maintainOffset)?this.lastPageX-this.initPageX:0;var a=(this.maintainOffset)?this.lastPageY-this.initPageY:0;this.setInitPosition(b,a)}else{this.setInitPosition()}if(this.constrainX){this.setXConstraint(this.leftConstraint,this.rightConstraint,this.xTickSize)}if(this.constrainY){this.setYConstraint(this.topConstraint,this.bottomConstraint,this.yTickSize)}},getTick:function(g,d){if(!d){return g}else{if(d[0]>=g){return d[0]}else{for(var b=0,a=d.length;b=g){var f=g-d[b];var e=d[c]-g;return(e>f)?d[b]:d[c]}}return d[d.length-1]}}},toString:function(){return("DragDrop "+this.id)}});Ext.define("Ext.dd.DD",{extend:"Ext.dd.DragDrop",requires:["Ext.dd.DragDropManager"],constructor:function(c,a,b){if(c){this.init(c,a,b)}},scroll:true,autoOffset:function(c,b){var a=c-this.startPageX;var d=b-this.startPageY;this.setDelta(a,d)},setDelta:function(b,a){this.deltaX=b;this.deltaY=a},setDragElPos:function(c,b){var a=this.getDragEl();this.alignElWithMouse(a,c,b)},alignElWithMouse:function(b,e,c){var f=this.getTargetCoord(e,c),d=b.dom?b:Ext.fly(b,"_dd"),k=d.getSize(),h=Ext.core.Element,i;if(!this.deltaSetXY){i=this.cachedViewportSize={width:h.getDocumentWidth(),height:h.getDocumentHeight()};var a=[Math.max(0,Math.min(f.x,i.width-k.width)),Math.max(0,Math.min(f.y,i.height-k.height))];d.setXY(a);var j=d.getLeft(true);var g=d.getTop(true);this.deltaSetXY=[j-f.x,g-f.y]}else{i=this.cachedViewportSize;d.setLeftTop(Math.max(0,Math.min(f.x+this.deltaSetXY[0],i.width-k.width)),Math.max(0,Math.min(f.y+this.deltaSetXY[1],i.height-k.height)))}this.cachePosition(f.x,f.y);this.autoScroll(f.x,f.y,b.offsetHeight,b.offsetWidth);return f},cachePosition:function(b,a){if(b){this.lastPageX=b;this.lastPageY=a}else{var c=Ext.core.Element.getXY(this.getEl());this.lastPageX=c[0];this.lastPageY=c[1]}},autoScroll:function(k,j,e,l){if(this.scroll){var m=Ext.core.Element.getViewHeight();var b=Ext.core.Element.getViewWidth();var o=this.DDMInstance.getScrollTop();var d=this.DDMInstance.getScrollLeft();var i=e+j;var n=l+k;var g=(m+o-j-this.deltaY);var f=(b+d-k-this.deltaX);var c=40;var a=(document.all)?80:30;if(i>m&&ge?1:(f
+ *
+Ext.Date.formatFunctions['x-date-format'] = myDateFormatter;
+
+ *
date
: Date
To enable date strings to also be parsed according to that format, a corresponding + * parsing function must be placed into the {@link #parseFunctions} property. + * @property formatFunctions + * @static + * @type Object + */ + formatFunctions: { + "MS": function() { + // UTC milliseconds since Unix epoch (MS-AJAX serialized date format (MRSF)) + return '\\/Date(' + this.getTime() + ')\\/'; + } + }, + + y2kYear : 50, + + /** + * Date interval constant + * @static + * @type String + */ + MILLI : "ms", + + /** + * Date interval constant + * @static + * @type String + */ + SECOND : "s", + + /** + * Date interval constant + * @static + * @type String + */ + MINUTE : "mi", + + /** Date interval constant + * @static + * @type String + */ + HOUR : "h", + + /** + * Date interval constant + * @static + * @type String + */ + DAY : "d", + + /** + * Date interval constant + * @static + * @type String + */ + MONTH : "mo", + + /** + * Date interval constant + * @static + * @type String + */ + YEAR : "y", + + /** + *
An object hash containing default date values used during date parsing.
+ *The following properties are available:
y
: Numberm
: Numberd
: Numberh
: Numberi
: Numbers
: Numberms
: NumberOverride these properties to customize the default date values used by the {@link #parse} method.
+ *Note: In countries which experience Daylight Saving Time (i.e. DST), the h, i, s + * and ms properties may coincide with the exact time in which DST takes effect. + * It is the responsiblity of the developer to account for this.
+ * Example Usage: + *
+// set default day value to the first day of the month
+Ext.Date.defaults.d = 1;
+
+// parse a February date string containing only year and month values.
+// setting the default day value to 1 prevents weird date rollover issues
+// when attempting to parse the following date string on, for example, March 31st 2009.
+Ext.Date.parse('2009-02', 'Y-m'); // returns a Date object representing February 1st 2009
+
+ * @property defaults
+ * @static
+ * @type Object
+ */
+ defaults: {},
+
+ /**
+ * An array of textual day names.
+ * Override these values for international dates.
+ * Example:
+ *
+Ext.Date.dayNames = [
+ 'SundayInYourLang',
+ 'MondayInYourLang',
+ ...
+];
+
+ * @type Array
+ * @static
+ */
+ dayNames : [
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday"
+ ],
+
+ /**
+ * An array of textual month names.
+ * Override these values for international dates.
+ * Example:
+ *
+Ext.Date.monthNames = [
+ 'JanInYourLang',
+ 'FebInYourLang',
+ ...
+];
+
+ * @type Array
+ * @static
+ */
+ monthNames : [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December"
+ ],
+
+ /**
+ * An object hash of zero-based javascript month numbers (with short month names as keys. note: keys are case-sensitive).
+ * Override these values for international dates.
+ * Example:
+ *
+Ext.Date.monthNumbers = {
+ 'ShortJanNameInYourLang':0,
+ 'ShortFebNameInYourLang':1,
+ ...
+};
+
+ * @type Object
+ * @static
+ */
+ monthNumbers : {
+ Jan:0,
+ Feb:1,
+ Mar:2,
+ Apr:3,
+ May:4,
+ Jun:5,
+ Jul:6,
+ Aug:7,
+ Sep:8,
+ Oct:9,
+ Nov:10,
+ Dec:11
+ },
+ /**
+ * The date format string that the {@link Ext.util.Format#dateRenderer} + * and {@link Ext.util.Format#date} functions use. See {@link Ext.Date} for details.
+ *This defaults to m/d/Y
, but may be overridden in a locale file.
+Ext.Date.formatCodes.x = "Ext.util.Format.leftPad(this.getDate(), 2, '0')";
+console.log(Ext.Date.format(new Date(), 'X'); // returns the current day of the month
+
+ * @type Object
+ * @static
+ */
+ formatCodes : {
+ d: "Ext.String.leftPad(this.getDate(), 2, '0')",
+ D: "Ext.Date.getShortDayName(this.getDay())", // get localised short day name
+ j: "this.getDate()",
+ l: "Ext.Date.dayNames[this.getDay()]",
+ N: "(this.getDay() ? this.getDay() : 7)",
+ S: "Ext.Date.getSuffix(this)",
+ w: "this.getDay()",
+ z: "Ext.Date.getDayOfYear(this)",
+ W: "Ext.String.leftPad(Ext.Date.getWeekOfYear(this), 2, '0')",
+ F: "Ext.Date.monthNames[this.getMonth()]",
+ m: "Ext.String.leftPad(this.getMonth() + 1, 2, '0')",
+ M: "Ext.Date.getShortMonthName(this.getMonth())", // get localised short month name
+ n: "(this.getMonth() + 1)",
+ t: "Ext.Date.getDaysInMonth(this)",
+ L: "(Ext.Date.isLeapYear(this) ? 1 : 0)",
+ o: "(this.getFullYear() + (Ext.Date.getWeekOfYear(this) == 1 && this.getMonth() > 0 ? +1 : (Ext.Date.getWeekOfYear(this) >= 52 && this.getMonth() < 11 ? -1 : 0)))",
+ Y: "Ext.String.leftPad(this.getFullYear(), 4, '0')",
+ y: "('' + this.getFullYear()).substring(2, 4)",
+ a: "(this.getHours() < 12 ? 'am' : 'pm')",
+ A: "(this.getHours() < 12 ? 'AM' : 'PM')",
+ g: "((this.getHours() % 12) ? this.getHours() % 12 : 12)",
+ G: "this.getHours()",
+ h: "Ext.String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0')",
+ H: "Ext.String.leftPad(this.getHours(), 2, '0')",
+ i: "Ext.String.leftPad(this.getMinutes(), 2, '0')",
+ s: "Ext.String.leftPad(this.getSeconds(), 2, '0')",
+ u: "Ext.String.leftPad(this.getMilliseconds(), 3, '0')",
+ O: "Ext.Date.getGMTOffset(this)",
+ P: "Ext.Date.getGMTOffset(this, true)",
+ T: "Ext.Date.getTimezone(this)",
+ Z: "(this.getTimezoneOffset() * -60)",
+
+ c: function() { // ISO-8601 -- GMT format
+ for (var c = "Y-m-dTH:i:sP", code = [], i = 0, l = c.length; i < l; ++i) {
+ var e = c.charAt(i);
+ code.push(e == "T" ? "'T'" : utilDate.getFormatCode(e)); // treat T as a character literal
+ }
+ return code.join(" + ");
+ },
+ /*
+ c: function() { // ISO-8601 -- UTC format
+ return [
+ "this.getUTCFullYear()", "'-'",
+ "Ext.util.Format.leftPad(this.getUTCMonth() + 1, 2, '0')", "'-'",
+ "Ext.util.Format.leftPad(this.getUTCDate(), 2, '0')",
+ "'T'",
+ "Ext.util.Format.leftPad(this.getUTCHours(), 2, '0')", "':'",
+ "Ext.util.Format.leftPad(this.getUTCMinutes(), 2, '0')", "':'",
+ "Ext.util.Format.leftPad(this.getUTCSeconds(), 2, '0')",
+ "'Z'"
+ ].join(" + ");
+ },
+ */
+
+ U: "Math.round(this.getTime() / 1000)"
+ },
+
+ /**
+ * Checks if the passed Date parameters will cause a javascript Date "rollover".
+ * @param {Number} year 4-digit year
+ * @param {Number} month 1-based month-of-year
+ * @param {Number} day Day of month
+ * @param {Number} hour (optional) Hour
+ * @param {Number} minute (optional) Minute
+ * @param {Number} second (optional) Second
+ * @param {Number} millisecond (optional) Millisecond
+ * @return {Boolean} true if the passed parameters do not cause a Date "rollover", false otherwise.
+ * @static
+ */
+ isValid : function(y, m, d, h, i, s, ms) {
+ // setup defaults
+ h = h || 0;
+ i = i || 0;
+ s = s || 0;
+ ms = ms || 0;
+
+ // Special handling for year < 100
+ var dt = utilDate.add(new Date(y < 100 ? 100 : y, m - 1, d, h, i, s, ms), utilDate.YEAR, y < 100 ? y - 100 : 0);
+
+ return y == dt.getFullYear() &&
+ m == dt.getMonth() + 1 &&
+ d == dt.getDate() &&
+ h == dt.getHours() &&
+ i == dt.getMinutes() &&
+ s == dt.getSeconds() &&
+ ms == dt.getMilliseconds();
+ },
+
+ /**
+ * Parses the passed string using the specified date format.
+ * Note that this function expects normal calendar dates, meaning that months are 1-based (i.e. 1 = January).
+ * The {@link #defaults} hash will be used for any date value (i.e. year, month, day, hour, minute, second or millisecond)
+ * which cannot be found in the passed string. If a corresponding default date value has not been specified in the {@link #defaults} hash,
+ * the current date's year, month, day or DST-adjusted zero-hour time value will be used instead.
+ * Keep in mind that the input date string must precisely match the specified format string
+ * in order for the parse operation to be successful (failed parse operations return a null value).
+ * Example:
+//dt = Fri May 25 2007 (current date)
+var dt = new Date();
+
+//dt = Thu May 25 2006 (today's month/day in 2006)
+dt = Ext.Date.parse("2006", "Y");
+
+//dt = Sun Jan 15 2006 (all date parts specified)
+dt = Ext.Date.parse("2006-01-15", "Y-m-d");
+
+//dt = Sun Jan 15 2006 15:20:01
+dt = Ext.Date.parse("2006-01-15 3:20:01 PM", "Y-m-d g:i:s A");
+
+// attempt to parse Sun Feb 29 2006 03:20:01 in strict mode
+dt = Ext.Date.parse("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
+
+ * @param {String} input The raw date string.
+ * @param {String} format The expected date string format.
+ * @param {Boolean} strict (optional) True to validate date strings while parsing (i.e. prevents javascript Date "rollover")
+ (defaults to false). Invalid date strings will return null when parsed.
+ * @return {Date} The parsed Date.
+ * @static
+ */
+ parse : function(input, format, strict) {
+ var p = utilDate.parseFunctions;
+ if (p[format] == null) {
+ utilDate.createParser(format);
+ }
+ return p[format](input, Ext.isDefined(strict) ? strict : utilDate.useStrict);
+ },
+
+ // Backwards compat
+ parseDate: function(input, format, strict){
+ return utilDate.parse(input, format, strict);
+ },
+
+
+ // private
+ getFormatCode : function(character) {
+ var f = utilDate.formatCodes[character];
+
+ if (f) {
+ f = typeof f == 'function'? f() : f;
+ utilDate.formatCodes[character] = f; // reassign function result to prevent repeated execution
+ }
+
+ // note: unknown characters are treated as literals
+ return f || ("'" + Ext.String.escape(character) + "'");
+ },
+
+ // private
+ createFormat : function(format) {
+ var code = [],
+ special = false,
+ ch = '';
+
+ for (var i = 0; i < format.length; ++i) {
+ ch = format.charAt(i);
+ if (!special && ch == "\\") {
+ special = true;
+ } else if (special) {
+ special = false;
+ code.push("'" + Ext.String.escape(ch) + "'");
+ } else {
+ code.push(utilDate.getFormatCode(ch));
+ }
+ }
+ utilDate.formatFunctions[format] = Ext.functionFactory("return " + code.join('+'));
+ },
+
+ // private
+ createParser : (function() {
+ var code = [
+ "var dt, y, m, d, h, i, s, ms, o, z, zz, u, v,",
+ "def = Ext.Date.defaults,",
+ "results = String(input).match(Ext.Date.parseRegexes[{0}]);", // either null, or an array of matched strings
+
+ "if(results){",
+ "{1}",
+
+ "if(u != null){", // i.e. unix time is defined
+ "v = new Date(u * 1000);", // give top priority to UNIX time
+ "}else{",
+ // create Date object representing midnight of the current day;
+ // this will provide us with our date defaults
+ // (note: clearTime() handles Daylight Saving Time automatically)
+ "dt = Ext.Date.clearTime(new Date);",
+
+ // date calculations (note: these calculations create a dependency on Ext.Number.from())
+ "y = Ext.Number.from(y, Ext.Number.from(def.y, dt.getFullYear()));",
+ "m = Ext.Number.from(m, Ext.Number.from(def.m - 1, dt.getMonth()));",
+ "d = Ext.Number.from(d, Ext.Number.from(def.d, dt.getDate()));",
+
+ // time calculations (note: these calculations create a dependency on Ext.Number.from())
+ "h = Ext.Number.from(h, Ext.Number.from(def.h, dt.getHours()));",
+ "i = Ext.Number.from(i, Ext.Number.from(def.i, dt.getMinutes()));",
+ "s = Ext.Number.from(s, Ext.Number.from(def.s, dt.getSeconds()));",
+ "ms = Ext.Number.from(ms, Ext.Number.from(def.ms, dt.getMilliseconds()));",
+
+ "if(z >= 0 && y >= 0){",
+ // both the year and zero-based day of year are defined and >= 0.
+ // these 2 values alone provide sufficient info to create a full date object
+
+ // create Date object representing January 1st for the given year
+ // handle years < 100 appropriately
+ "v = Ext.Date.add(new Date(y < 100 ? 100 : y, 0, 1, h, i, s, ms), Ext.Date.YEAR, y < 100 ? y - 100 : 0);",
+
+ // then add day of year, checking for Date "rollover" if necessary
+ "v = !strict? v : (strict === true && (z <= 364 || (Ext.Date.isLeapYear(v) && z <= 365))? Ext.Date.add(v, Ext.Date.DAY, z) : null);",
+ "}else if(strict === true && !Ext.Date.isValid(y, m + 1, d, h, i, s, ms)){", // check for Date "rollover"
+ "v = null;", // invalid date, so return null
+ "}else{",
+ // plain old Date object
+ // handle years < 100 properly
+ "v = Ext.Date.add(new Date(y < 100 ? 100 : y, m, d, h, i, s, ms), Ext.Date.YEAR, y < 100 ? y - 100 : 0);",
+ "}",
+ "}",
+ "}",
+
+ "if(v){",
+ // favour UTC offset over GMT offset
+ "if(zz != null){",
+ // reset to UTC, then add offset
+ "v = Ext.Date.add(v, Ext.Date.SECOND, -v.getTimezoneOffset() * 60 - zz);",
+ "}else if(o){",
+ // reset to GMT, then add offset
+ "v = Ext.Date.add(v, Ext.Date.MINUTE, -v.getTimezoneOffset() + (sn == '+'? -1 : 1) * (hr * 60 + mn));",
+ "}",
+ "}",
+
+ "return v;"
+ ].join('\n');
+
+ return function(format) {
+ var regexNum = utilDate.parseRegexes.length,
+ currentGroup = 1,
+ calc = [],
+ regex = [],
+ special = false,
+ ch = "";
+
+ for (var i = 0; i < format.length; ++i) {
+ ch = format.charAt(i);
+ if (!special && ch == "\\") {
+ special = true;
+ } else if (special) {
+ special = false;
+ regex.push(Ext.String.escape(ch));
+ } else {
+ var obj = utilDate.formatCodeToRegex(ch, currentGroup);
+ currentGroup += obj.g;
+ regex.push(obj.s);
+ if (obj.g && obj.c) {
+ calc.push(obj.c);
+ }
+ }
+ }
+
+ utilDate.parseRegexes[regexNum] = new RegExp("^" + regex.join('') + "$", 'i');
+ utilDate.parseFunctions[format] = Ext.functionFactory("input", "strict", xf(code, regexNum, calc.join('')));
+ };
+ })(),
+
+ // private
+ parseCodes : {
+ /*
+ * Notes:
+ * g = {Number} calculation group (0 or 1. only group 1 contributes to date calculations.)
+ * c = {String} calculation method (required for group 1. null for group 0. {0} = currentGroup - position in regex result array)
+ * s = {String} regex pattern. all matches are stored in results[], and are accessible by the calculation mapped to 'c'
+ */
+ d: {
+ g:1,
+ c:"d = parseInt(results[{0}], 10);\n",
+ s:"(\\d{2})" // day of month with leading zeroes (01 - 31)
+ },
+ j: {
+ g:1,
+ c:"d = parseInt(results[{0}], 10);\n",
+ s:"(\\d{1,2})" // day of month without leading zeroes (1 - 31)
+ },
+ D: function() {
+ for (var a = [], i = 0; i < 7; a.push(utilDate.getShortDayName(i)), ++i); // get localised short day names
+ return {
+ g:0,
+ c:null,
+ s:"(?:" + a.join("|") +")"
+ };
+ },
+ l: function() {
+ return {
+ g:0,
+ c:null,
+ s:"(?:" + utilDate.dayNames.join("|") + ")"
+ };
+ },
+ N: {
+ g:0,
+ c:null,
+ s:"[1-7]" // ISO-8601 day number (1 (monday) - 7 (sunday))
+ },
+ S: {
+ g:0,
+ c:null,
+ s:"(?:st|nd|rd|th)"
+ },
+ w: {
+ g:0,
+ c:null,
+ s:"[0-6]" // javascript day number (0 (sunday) - 6 (saturday))
+ },
+ z: {
+ g:1,
+ c:"z = parseInt(results[{0}], 10);\n",
+ s:"(\\d{1,3})" // day of the year (0 - 364 (365 in leap years))
+ },
+ W: {
+ g:0,
+ c:null,
+ s:"(?:\\d{2})" // ISO-8601 week number (with leading zero)
+ },
+ F: function() {
+ return {
+ g:1,
+ c:"m = parseInt(Ext.Date.getMonthNumber(results[{0}]), 10);\n", // get localised month number
+ s:"(" + utilDate.monthNames.join("|") + ")"
+ };
+ },
+ M: function() {
+ for (var a = [], i = 0; i < 12; a.push(utilDate.getShortMonthName(i)), ++i); // get localised short month names
+ return Ext.applyIf({
+ s:"(" + a.join("|") + ")"
+ }, utilDate.formatCodeToRegex("F"));
+ },
+ m: {
+ g:1,
+ c:"m = parseInt(results[{0}], 10) - 1;\n",
+ s:"(\\d{2})" // month number with leading zeros (01 - 12)
+ },
+ n: {
+ g:1,
+ c:"m = parseInt(results[{0}], 10) - 1;\n",
+ s:"(\\d{1,2})" // month number without leading zeros (1 - 12)
+ },
+ t: {
+ g:0,
+ c:null,
+ s:"(?:\\d{2})" // no. of days in the month (28 - 31)
+ },
+ L: {
+ g:0,
+ c:null,
+ s:"(?:1|0)"
+ },
+ o: function() {
+ return utilDate.formatCodeToRegex("Y");
+ },
+ Y: {
+ g:1,
+ c:"y = parseInt(results[{0}], 10);\n",
+ s:"(\\d{4})" // 4-digit year
+ },
+ y: {
+ g:1,
+ c:"var ty = parseInt(results[{0}], 10);\n"
+ + "y = ty > Ext.Date.y2kYear ? 1900 + ty : 2000 + ty;\n", // 2-digit year
+ s:"(\\d{1,2})"
+ },
+ /*
+ * In the am/pm parsing routines, we allow both upper and lower case
+ * even though it doesn't exactly match the spec. It gives much more flexibility
+ * in being able to specify case insensitive regexes.
+ */
+ a: {
+ g:1,
+ c:"if (/(am)/i.test(results[{0}])) {\n"
+ + "if (!h || h == 12) { h = 0; }\n"
+ + "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
+ s:"(am|pm|AM|PM)"
+ },
+ A: {
+ g:1,
+ c:"if (/(am)/i.test(results[{0}])) {\n"
+ + "if (!h || h == 12) { h = 0; }\n"
+ + "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
+ s:"(AM|PM|am|pm)"
+ },
+ g: function() {
+ return utilDate.formatCodeToRegex("G");
+ },
+ G: {
+ g:1,
+ c:"h = parseInt(results[{0}], 10);\n",
+ s:"(\\d{1,2})" // 24-hr format of an hour without leading zeroes (0 - 23)
+ },
+ h: function() {
+ return utilDate.formatCodeToRegex("H");
+ },
+ H: {
+ g:1,
+ c:"h = parseInt(results[{0}], 10);\n",
+ s:"(\\d{2})" // 24-hr format of an hour with leading zeroes (00 - 23)
+ },
+ i: {
+ g:1,
+ c:"i = parseInt(results[{0}], 10);\n",
+ s:"(\\d{2})" // minutes with leading zeros (00 - 59)
+ },
+ s: {
+ g:1,
+ c:"s = parseInt(results[{0}], 10);\n",
+ s:"(\\d{2})" // seconds with leading zeros (00 - 59)
+ },
+ u: {
+ g:1,
+ c:"ms = results[{0}]; ms = parseInt(ms, 10)/Math.pow(10, ms.length - 3);\n",
+ s:"(\\d+)" // decimal fraction of a second (minimum = 1 digit, maximum = unlimited)
+ },
+ O: {
+ g:1,
+ c:[
+ "o = results[{0}];",
+ "var sn = o.substring(0,1),", // get + / - sign
+ "hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60),", // get hours (performs minutes-to-hour conversion also, just in case)
+ "mn = o.substring(3,5) % 60;", // get minutes
+ "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))? (sn + Ext.String.leftPad(hr, 2, '0') + Ext.String.leftPad(mn, 2, '0')) : null;\n" // -12hrs <= GMT offset <= 14hrs
+ ].join("\n"),
+ s: "([+\-]\\d{4})" // GMT offset in hrs and mins
+ },
+ P: {
+ g:1,
+ c:[
+ "o = results[{0}];",
+ "var sn = o.substring(0,1),", // get + / - sign
+ "hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60),", // get hours (performs minutes-to-hour conversion also, just in case)
+ "mn = o.substring(4,6) % 60;", // get minutes
+ "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))? (sn + Ext.String.leftPad(hr, 2, '0') + Ext.String.leftPad(mn, 2, '0')) : null;\n" // -12hrs <= GMT offset <= 14hrs
+ ].join("\n"),
+ s: "([+\-]\\d{2}:\\d{2})" // GMT offset in hrs and mins (with colon separator)
+ },
+ T: {
+ g:0,
+ c:null,
+ s:"[A-Z]{1,4}" // timezone abbrev. may be between 1 - 4 chars
+ },
+ Z: {
+ g:1,
+ c:"zz = results[{0}] * 1;\n" // -43200 <= UTC offset <= 50400
+ + "zz = (-43200 <= zz && zz <= 50400)? zz : null;\n",
+ s:"([+\-]?\\d{1,5})" // leading '+' sign is optional for UTC offset
+ },
+ c: function() {
+ var calc = [],
+ arr = [
+ utilDate.formatCodeToRegex("Y", 1), // year
+ utilDate.formatCodeToRegex("m", 2), // month
+ utilDate.formatCodeToRegex("d", 3), // day
+ utilDate.formatCodeToRegex("h", 4), // hour
+ utilDate.formatCodeToRegex("i", 5), // minute
+ utilDate.formatCodeToRegex("s", 6), // second
+ {c:"ms = results[7] || '0'; ms = parseInt(ms, 10)/Math.pow(10, ms.length - 3);\n"}, // decimal fraction of a second (minimum = 1 digit, maximum = unlimited)
+ {c:[ // allow either "Z" (i.e. UTC) or "-0530" or "+08:00" (i.e. UTC offset) timezone delimiters. assumes local timezone if no timezone is specified
+ "if(results[8]) {", // timezone specified
+ "if(results[8] == 'Z'){",
+ "zz = 0;", // UTC
+ "}else if (results[8].indexOf(':') > -1){",
+ utilDate.formatCodeToRegex("P", 8).c, // timezone offset with colon separator
+ "}else{",
+ utilDate.formatCodeToRegex("O", 8).c, // timezone offset without colon separator
+ "}",
+ "}"
+ ].join('\n')}
+ ];
+
+ for (var i = 0, l = arr.length; i < l; ++i) {
+ calc.push(arr[i].c);
+ }
+
+ return {
+ g:1,
+ c:calc.join(""),
+ s:[
+ arr[0].s, // year (required)
+ "(?:", "-", arr[1].s, // month (optional)
+ "(?:", "-", arr[2].s, // day (optional)
+ "(?:",
+ "(?:T| )?", // time delimiter -- either a "T" or a single blank space
+ arr[3].s, ":", arr[4].s, // hour AND minute, delimited by a single colon (optional). MUST be preceded by either a "T" or a single blank space
+ "(?::", arr[5].s, ")?", // seconds (optional)
+ "(?:(?:\\.|,)(\\d+))?", // decimal fraction of a second (e.g. ",12345" or ".98765") (optional)
+ "(Z|(?:[-+]\\d{2}(?::)?\\d{2}))?", // "Z" (UTC) or "-0530" (UTC offset without colon delimiter) or "+08:00" (UTC offset with colon delimiter) (optional)
+ ")?",
+ ")?",
+ ")?"
+ ].join("")
+ };
+ },
+ U: {
+ g:1,
+ c:"u = parseInt(results[{0}], 10);\n",
+ s:"(-?\\d+)" // leading minus sign indicates seconds before UNIX epoch
+ }
+ },
+
+ //Old Ext.Date prototype methods.
+ // private
+ dateFormat: function(date, format) {
+ return utilDate.format(date, format);
+ },
+
+ /**
+ * Formats a date given the supplied format string.
+ * @param {Date} date The date to format
+ * @param {String} format The format string
+ * @return {String} The formatted date
+ */
+ format: function(date, format) {
+ if (utilDate.formatFunctions[format] == null) {
+ utilDate.createFormat(format);
+ }
+ var result = utilDate.formatFunctions[format].call(date);
+ return result + '';
+ },
+
+ /**
+ * Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
+ *
+ * Note: The date string returned by the javascript Date object's toString() method varies
+ * between browsers (e.g. FF vs IE) and system region settings (e.g. IE in Asia vs IE in America).
+ * For a given date string e.g. "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)",
+ * getTimezone() first tries to get the timezone abbreviation from between a pair of parentheses
+ * (which may or may not be present), failing which it proceeds to get the timezone abbreviation
+ * from the GMT offset portion of the date string.
+ * @param {Date} date The date
+ * @return {String} The abbreviated timezone name (e.g. 'CST', 'PDT', 'EDT', 'MPST' ...).
+ */
+ getTimezone : function(date) {
+ // the following list shows the differences between date strings from different browsers on a WinXP SP2 machine from an Asian locale:
+ //
+ // Opera : "Thu, 25 Oct 2007 22:53:45 GMT+0800" -- shortest (weirdest) date string of the lot
+ // Safari : "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)" -- value in parentheses always gives the correct timezone (same as FF)
+ // FF : "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)" -- value in parentheses always gives the correct timezone
+ // IE : "Thu Oct 25 22:54:35 UTC+0800 2007" -- (Asian system setting) look for 3-4 letter timezone abbrev
+ // IE : "Thu Oct 25 17:06:37 PDT 2007" -- (American system setting) look for 3-4 letter timezone abbrev
+ //
+ // this crazy regex attempts to guess the correct timezone abbreviation despite these differences.
+ // step 1: (?:\((.*)\) -- find timezone in parentheses
+ // step 2: ([A-Z]{1,4})(?:[\-+][0-9]{4})?(?: -?\d+)?) -- if nothing was found in step 1, find timezone from timezone offset portion of date string
+ // step 3: remove all non uppercase characters found in step 1 and 2
+ return date.toString().replace(/^.* (?:\((.*)\)|([A-Z]{1,4})(?:[\-+][0-9]{4})?(?: -?\d+)?)$/, "$1$2").replace(/[^A-Z]/g, "");
+ },
+
+ /**
+ * Get the offset from GMT of the current date (equivalent to the format specifier 'O').
+ * @param {Date} date The date
+ * @param {Boolean} colon (optional) true to separate the hours and minutes with a colon (defaults to false).
+ * @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600').
+ */
+ getGMTOffset : function(date, colon) {
+ var offset = date.getTimezoneOffset();
+ return (offset > 0 ? "-" : "+")
+ + Ext.String.leftPad(Math.floor(Math.abs(offset) / 60), 2, "0")
+ + (colon ? ":" : "")
+ + Ext.String.leftPad(Math.abs(offset % 60), 2, "0");
+ },
+
+ /**
+ * Get the numeric day number of the year, adjusted for leap year.
+ * @param {Date} date The date
+ * @return {Number} 0 to 364 (365 in leap years).
+ */
+ getDayOfYear: function(date) {
+ var num = 0,
+ d = Ext.Date.clone(date),
+ m = date.getMonth(),
+ i;
+
+ for (i = 0, d.setDate(1), d.setMonth(0); i < m; d.setMonth(++i)) {
+ num += utilDate.getDaysInMonth(d);
+ }
+ return num + date.getDate() - 1;
+ },
+
+ /**
+ * Get the numeric ISO-8601 week number of the year.
+ * (equivalent to the format specifier 'W', but without a leading zero).
+ * @param {Date} date The date
+ * @return {Number} 1 to 53
+ * @method
+ */
+ getWeekOfYear : (function() {
+ // adapted from http://www.merlyn.demon.co.uk/weekcalc.htm
+ var ms1d = 864e5, // milliseconds in a day
+ ms7d = 7 * ms1d; // milliseconds in a week
+
+ return function(date) { // return a closure so constants get calculated only once
+ var DC3 = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate() + 3) / ms1d, // an Absolute Day Number
+ AWN = Math.floor(DC3 / 7), // an Absolute Week Number
+ Wyr = new Date(AWN * ms7d).getUTCFullYear();
+
+ return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1;
+ };
+ })(),
+
+ /**
+ * Checks if the current date falls within a leap year.
+ * @param {Date} date The date
+ * @return {Boolean} True if the current date falls within a leap year, false otherwise.
+ */
+ isLeapYear : function(date) {
+ var year = date.getFullYear();
+ return !!((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
+ },
+
+ /**
+ * Get the first day of the current month, adjusted for leap year. The returned value
+ * is the numeric day index within the week (0-6) which can be used in conjunction with
+ * the {@link #monthNames} array to retrieve the textual day name.
+ * Example:
+ *
+var dt = new Date('1/10/2007'),
+ firstDay = Ext.Date.getFirstDayOfMonth(dt);
+console.log(Ext.Date.dayNames[firstDay]); //output: 'Monday'
+ *
+ * @param {Date} date The date
+ * @return {Number} The day number (0-6).
+ */
+ getFirstDayOfMonth : function(date) {
+ var day = (date.getDay() - (date.getDate() - 1)) % 7;
+ return (day < 0) ? (day + 7) : day;
+ },
+
+ /**
+ * Get the last day of the current month, adjusted for leap year. The returned value
+ * is the numeric day index within the week (0-6) which can be used in conjunction with
+ * the {@link #monthNames} array to retrieve the textual day name.
+ * Example:
+ *
+var dt = new Date('1/10/2007'),
+ lastDay = Ext.Date.getLastDayOfMonth(dt);
+console.log(Ext.Date.dayNames[lastDay]); //output: 'Wednesday'
+ *
+ * @param {Date} date The date
+ * @return {Number} The day number (0-6).
+ */
+ getLastDayOfMonth : function(date) {
+ return utilDate.getLastDateOfMonth(date).getDay();
+ },
+
+
+ /**
+ * Get the date of the first day of the month in which this date resides.
+ * @param {Date} date The date
+ * @return {Date}
+ */
+ getFirstDateOfMonth : function(date) {
+ return new Date(date.getFullYear(), date.getMonth(), 1);
+ },
+
+ /**
+ * Get the date of the last day of the month in which this date resides.
+ * @param {Date} date The date
+ * @return {Date}
+ */
+ getLastDateOfMonth : function(date) {
+ return new Date(date.getFullYear(), date.getMonth(), utilDate.getDaysInMonth(date));
+ },
+
+ /**
+ * Get the number of days in the current month, adjusted for leap year.
+ * @param {Date} date The date
+ * @return {Number} The number of days in the month.
+ * @method
+ */
+ getDaysInMonth: (function() {
+ var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+ return function(date) { // return a closure for efficiency
+ var m = date.getMonth();
+
+ return m == 1 && utilDate.isLeapYear(date) ? 29 : daysInMonth[m];
+ };
+ })(),
+
+ /**
+ * Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
+ * @param {Date} date The date
+ * @return {String} 'st, 'nd', 'rd' or 'th'.
+ */
+ getSuffix : function(date) {
+ switch (date.getDate()) {
+ case 1:
+ case 21:
+ case 31:
+ return "st";
+ case 2:
+ case 22:
+ return "nd";
+ case 3:
+ case 23:
+ return "rd";
+ default:
+ return "th";
+ }
+ },
+
+ /**
+ * Creates and returns a new Date instance with the exact same date value as the called instance.
+ * Dates are copied and passed by reference, so if a copied date variable is modified later, the original
+ * variable will also be changed. When the intention is to create a new variable that will not
+ * modify the original instance, you should create a clone.
+ *
+ * Example of correctly cloning a date:
+ *
+//wrong way:
+var orig = new Date('10/1/2006');
+var copy = orig;
+copy.setDate(5);
+console.log(orig); //returns 'Thu Oct 05 2006'!
+
+//correct way:
+var orig = new Date('10/1/2006'),
+ copy = Ext.Date.clone(orig);
+copy.setDate(5);
+console.log(orig); //returns 'Thu Oct 01 2006'
+ *
+ * @param {Date} date The date
+ * @return {Date} The new Date instance.
+ */
+ clone : function(date) {
+ return new Date(date.getTime());
+ },
+
+ /**
+ * Checks if the current date is affected by Daylight Saving Time (DST).
+ * @param {Date} date The date
+ * @return {Boolean} True if the current date is affected by DST.
+ */
+ isDST : function(date) {
+ // adapted from http://sencha.com/forum/showthread.php?p=247172#post247172
+ // courtesy of @geoffrey.mcgill
+ return new Date(date.getFullYear(), 0, 1).getTimezoneOffset() != date.getTimezoneOffset();
+ },
+
+ /**
+ * Attempts to clear all time information from this Date by setting the time to midnight of the same day,
+ * automatically adjusting for Daylight Saving Time (DST) where applicable.
+ * (note: DST timezone information for the browser's host operating system is assumed to be up-to-date)
+ * @param {Date} date The date
+ * @param {Boolean} clone true to create a clone of this date, clear the time and return it (defaults to false).
+ * @return {Date} this or the clone.
+ */
+ clearTime : function(date, clone) {
+ if (clone) {
+ return Ext.Date.clearTime(Ext.Date.clone(date));
+ }
+
+ // get current date before clearing time
+ var d = date.getDate();
+
+ // clear time
+ date.setHours(0);
+ date.setMinutes(0);
+ date.setSeconds(0);
+ date.setMilliseconds(0);
+
+ if (date.getDate() != d) { // account for DST (i.e. day of month changed when setting hour = 0)
+ // note: DST adjustments are assumed to occur in multiples of 1 hour (this is almost always the case)
+ // refer to http://www.timeanddate.com/time/aboutdst.html for the (rare) exceptions to this rule
+
+ // increment hour until cloned date == current date
+ for (var hr = 1, c = utilDate.add(date, Ext.Date.HOUR, hr); c.getDate() != d; hr++, c = utilDate.add(date, Ext.Date.HOUR, hr));
+
+ date.setDate(d);
+ date.setHours(c.getHours());
+ }
+
+ return date;
+ },
+
+ /**
+ * Provides a convenient method for performing basic date arithmetic. This method
+ * does not modify the Date instance being called - it creates and returns
+ * a new Date instance containing the resulting date value.
+ *
+ * Examples:
+ *
+// Basic usage:
+var dt = Ext.Date.add(new Date('10/29/2006'), Ext.Date.DAY, 5);
+console.log(dt); //returns 'Fri Nov 03 2006 00:00:00'
+
+// Negative values will be subtracted:
+var dt2 = Ext.Date.add(new Date('10/1/2006'), Ext.Date.DAY, -5);
+console.log(dt2); //returns 'Tue Sep 26 2006 00:00:00'
+
+ *
+ *
+ * @param {Date} date The date to modify
+ * @param {String} interval A valid date interval enum value.
+ * @param {Number} value The amount to add to the current date.
+ * @return {Date} The new Date instance.
+ */
+ add : function(date, interval, value) {
+ var d = Ext.Date.clone(date),
+ Date = Ext.Date;
+ if (!interval || value === 0) return d;
+
+ switch(interval.toLowerCase()) {
+ case Ext.Date.MILLI:
+ d.setMilliseconds(d.getMilliseconds() + value);
+ break;
+ case Ext.Date.SECOND:
+ d.setSeconds(d.getSeconds() + value);
+ break;
+ case Ext.Date.MINUTE:
+ d.setMinutes(d.getMinutes() + value);
+ break;
+ case Ext.Date.HOUR:
+ d.setHours(d.getHours() + value);
+ break;
+ case Ext.Date.DAY:
+ d.setDate(d.getDate() + value);
+ break;
+ case Ext.Date.MONTH:
+ var day = date.getDate();
+ if (day > 28) {
+ day = Math.min(day, Ext.Date.getLastDateOfMonth(Ext.Date.add(Ext.Date.getFirstDateOfMonth(date), 'mo', value)).getDate());
+ }
+ d.setDate(day);
+ d.setMonth(date.getMonth() + value);
+ break;
+ case Ext.Date.YEAR:
+ d.setFullYear(date.getFullYear() + value);
+ break;
+ }
+ return d;
+ },
+
+ /**
+ * Checks if a date falls on or between the given start and end dates.
+ * @param {Date} date The date to check
+ * @param {Date} start Start date
+ * @param {Date} end End date
+ * @return {Boolean} true if this date falls on or between the given start and end dates.
+ */
+ between : function(date, start, end) {
+ var t = date.getTime();
+ return start.getTime() <= t && t <= end.getTime();
+ },
+
+ //Maintains compatibility with old static and prototype window.Date methods.
+ compat: function() {
+ var nativeDate = window.Date,
+ p, u,
+ statics = ['useStrict', 'formatCodeToRegex', 'parseFunctions', 'parseRegexes', 'formatFunctions', 'y2kYear', 'MILLI', 'SECOND', 'MINUTE', 'HOUR', 'DAY', 'MONTH', 'YEAR', 'defaults', 'dayNames', 'monthNames', 'monthNumbers', 'getShortMonthName', 'getShortDayName', 'getMonthNumber', 'formatCodes', 'isValid', 'parseDate', 'getFormatCode', 'createFormat', 'createParser', 'parseCodes'],
+ proto = ['dateFormat', 'format', 'getTimezone', 'getGMTOffset', 'getDayOfYear', 'getWeekOfYear', 'isLeapYear', 'getFirstDayOfMonth', 'getLastDayOfMonth', 'getDaysInMonth', 'getSuffix', 'clone', 'isDST', 'clearTime', 'add', 'between'];
+
+ //Append statics
+ Ext.Array.forEach(statics, function(s) {
+ nativeDate[s] = utilDate[s];
+ });
+
+ //Append to prototype
+ Ext.Array.forEach(proto, function(s) {
+ nativeDate.prototype[s] = function() {
+ var args = Array.prototype.slice.call(arguments);
+ args.unshift(this);
+ return utilDate[s].apply(utilDate, args);
+ };
+ });
+ }
+};
+
+var utilDate = Ext.Date;
+
+})();
+
+/**
+ * @author Jacky Nguyen Encodes a Date. This returns the actual string which is inserted into the JSON string as the literal expression. + * The returned value includes enclosing double quotation marks.
+ *The default return format is "yyyy-mm-ddThh:mm:ss".
+ *To override this:
+ Ext.JSON.encodeDate = function(d) {
+ return d.format('"Y-m-d"');
+ };
+
+ * @param {Date} d The Date to encode
+ * @return {String} The string literal to use in a JSON string.
+ */
+ this.encodeDate = function(o) {
+ return '"' + o.getFullYear() + "-"
+ + pad(o.getMonth() + 1) + "-"
+ + pad(o.getDate()) + "T"
+ + pad(o.getHours()) + ":"
+ + pad(o.getMinutes()) + ":"
+ + pad(o.getSeconds()) + '"';
+ };
+
+ /**
+ * Encodes an Object, Array or other value
+ * @param {Mixed} o The variable to encode
+ * @return {String} The JSON string
+ */
+ this.encode = function() {
+ var ec;
+ return function(o) {
+ if (!ec) {
+ // setup encoding function on first access
+ ec = isNative() ? JSON.stringify : doEncode;
+ }
+ return ec(o);
+ };
+ }();
+
+
+ /**
+ * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError unless the safe option is set.
+ * @param {String} json The JSON string
+ * @param {Boolean} safe (optional) Whether to return null or throw an exception if the JSON is invalid.
+ * @return {Object} The resulting object
+ */
+ this.decode = function() {
+ var dc;
+ return function(json, safe) {
+ if (!dc) {
+ // setup decoding function on first access
+ dc = isNative() ? JSON.parse : doDecode;
+ }
+ try {
+ return dc(json);
+ } catch (e) {
+ if (safe === true) {
+ return null;
+ }
+ Ext.Error.raise({
+ sourceClass: "Ext.JSON",
+ sourceMethod: "decode",
+ msg: "You're trying to decode an invalid JSON String: " + json
+ });
+ }
+ };
+ }();
+
+})();
+/**
+ * Shorthand for {@link Ext.JSON#encode}
+ * @param {Mixed} o The variable to encode
+ * @return {String} The JSON string
+ * @member Ext
+ * @method encode
+ */
+Ext.encode = Ext.JSON.encode;
+/**
+ * Shorthand for {@link Ext.JSON#decode}
+ * @param {String} json The JSON string
+ * @param {Boolean} safe (optional) Whether to return null or throw an exception if the JSON is invalid.
+ * @return {Object} The resulting object
+ * @member Ext
+ * @method decode
+ */
+Ext.decode = Ext.JSON.decode;
+
+
+/**
+ * @class Ext
+
+ The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries.
+ Most user interface Components are at a lower level of nesting in the namespace, but many common utility functions are provided
+ as direct properties of the Ext namespace.
+
+ Also many frequently used methods from other classes are provided as shortcuts within the Ext namespace.
+ For example {@link Ext#getCmp Ext.getCmp} aliases {@link Ext.ComponentManager#get Ext.ComponentManager.get}.
+
+ Many applications are initiated with {@link Ext#onReady Ext.onReady} which is called once the DOM is ready.
+ This ensures all scripts have been loaded, preventing dependency issues. For example
+
+ Ext.onReady(function(){
+ new Ext.Component({
+ renderTo: document.body,
+ html: 'DOM ready!'
+ });
+ });
+
+For more information about how to use the Ext classes, see
+
+- The Learning Center
+- The FAQ
+- The forums
+
+ * @singleton
+ * @markdown
+ */
+Ext.apply(Ext, {
+ userAgent: navigator.userAgent.toLowerCase(),
+ cache: {},
+ idSeed: 1000,
+ BLANK_IMAGE_URL : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
+ isStrict: document.compatMode == "CSS1Compat",
+ windowId: 'ext-window',
+ documentId: 'ext-document',
+
+ /**
+ * True when the document is fully initialized and ready for action
+ * @type Boolean
+ */
+ isReady: false,
+
+ /**
+ * True to automatically uncache orphaned Ext.core.Elements periodically (defaults to true)
+ * @type Boolean
+ */
+ enableGarbageCollector: true,
+
+ /**
+ * True to automatically purge event listeners during garbageCollection (defaults to true).
+ * @type Boolean
+ */
+ enableListenerCollection: true,
+
+ /**
+ * Generates unique ids. If the element already has an id, it is unchanged
+ * @param {Mixed} el (optional) The element to generate an id for
+ * @param {String} prefix (optional) Id prefix (defaults "ext-gen")
+ * @return {String} The generated Id.
+ */
+ id: function(el, prefix) {
+ var me = this,
+ sandboxPrefix = '';
+ el = Ext.getDom(el, true) || {};
+ if (el === document) {
+ el.id = me.documentId;
+ }
+ else if (el === window) {
+ el.id = me.windowId;
+ }
+ if (!el.id) {
+ if (me.isSandboxed) {
+ if (!me.uniqueGlobalNamespace) {
+ me.getUniqueGlobalNamespace();
+ }
+ sandboxPrefix = me.uniqueGlobalNamespace + '-';
+ }
+ el.id = sandboxPrefix + (prefix || "ext-gen") + (++Ext.idSeed);
+ }
+ return el.id;
+ },
+
+ /**
+ * Returns the current document body as an {@link Ext.core.Element}.
+ * @return Ext.core.Element The document body
+ */
+ getBody: function() {
+ return Ext.get(document.body || false);
+ },
+
+ /**
+ * Returns the current document head as an {@link Ext.core.Element}.
+ * @return Ext.core.Element The document head
+ * @method
+ */
+ getHead: function() {
+ var head;
+
+ return function() {
+ if (head == undefined) {
+ head = Ext.get(document.getElementsByTagName("head")[0]);
+ }
+
+ return head;
+ };
+ }(),
+
+ /**
+ * Returns the current HTML document object as an {@link Ext.core.Element}.
+ * @return Ext.core.Element The document
+ */
+ getDoc: function() {
+ return Ext.get(document);
+ },
+
+ /**
+ * This is shorthand reference to {@link Ext.ComponentManager#get}.
+ * Looks up an existing {@link Ext.Component Component} by {@link Ext.Component#id id}
+ * @param {String} id The component {@link Ext.Component#id id}
+ * @return Ext.Component The Component, undefined if not found, or null if a
+ * Class was found.
+ */
+ getCmp: function(id) {
+ return Ext.ComponentManager.get(id);
+ },
+
+ /**
+ * Returns the current orientation of the mobile device
+ * @return {String} Either 'portrait' or 'landscape'
+ */
+ getOrientation: function() {
+ return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+ },
+
+ /**
+ * Attempts to destroy any objects passed to it by removing all event listeners, removing them from the
+ * DOM (if applicable) and calling their destroy functions (if available). This method is primarily
+ * intended for arguments of type {@link Ext.core.Element} and {@link Ext.Component}, but any subclass of
+ * {@link Ext.util.Observable} can be passed in. Any number of elements and/or components can be
+ * passed into this function in a single call as separate arguments.
+ * @param {Mixed} arg1 An {@link Ext.core.Element}, {@link Ext.Component}, or an Array of either of these to destroy
+ * @param {Mixed} arg2 (optional)
+ * @param {Mixed} etc... (optional)
+ */
+ destroy: function() {
+ var ln = arguments.length,
+ i, arg;
+
+ for (i = 0; i < ln; i++) {
+ arg = arguments[i];
+ if (arg) {
+ if (Ext.isArray(arg)) {
+ this.destroy.apply(this, arg);
+ }
+ else if (Ext.isFunction(arg.destroy)) {
+ arg.destroy();
+ }
+ else if (arg.dom) {
+ arg.remove();
+ }
+ }
+ }
+ },
+
+ /**
+ * Execute a callback function in a particular scope. If no function is passed the call is ignored.
+ *
+ * For example, these lines are equivalent:
+ *
+ * Ext.callback(myFunc, this, [arg1, arg2]);
+ * Ext.isFunction(myFunc) && myFunc.apply(this, [arg1, arg2]);
+ *
+ * @param {Function} callback The callback to execute
+ * @param {Object} scope (optional) The scope to execute in
+ * @param {Array} args (optional) The arguments to pass to the function
+ * @param {Number} delay (optional) Pass a number to delay the call by a number of milliseconds.
+ */
+ callback: function(callback, scope, args, delay){
+ if(Ext.isFunction(callback)){
+ args = args || [];
+ scope = scope || window;
+ if (delay) {
+ Ext.defer(callback, delay, scope, args);
+ } else {
+ callback.apply(scope, args);
+ }
+ }
+ },
+
+ /**
+ * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
+ * @param {String} value The string to encode
+ * @return {String} The encoded text
+ */
+ htmlEncode : function(value) {
+ return Ext.String.htmlEncode(value);
+ },
+
+ /**
+ * Convert certain characters (&, <, >, and ') from their HTML character equivalents.
+ * @param {String} value The string to decode
+ * @return {String} The decoded text
+ */
+ htmlDecode : function(value) {
+ return Ext.String.htmlDecode(value);
+ },
+
+ /**
+ * Appends content to the query string of a URL, handling logic for whether to place
+ * a question mark or ampersand.
+ * @param {String} url The URL to append to.
+ * @param {String} s The content to append to the URL.
+ * @return (String) The resulting URL
+ */
+ urlAppend : function(url, s) {
+ if (!Ext.isEmpty(s)) {
+ return url + (url.indexOf('?') === -1 ? '?' : '&') + s;
+ }
+ return url;
+ }
+});
+
+
+Ext.ns = Ext.namespace;
+
+// for old browsers
+window.undefined = window.undefined;
+
+/**
+ * @class Ext
+ * Ext core utilities and functions.
+ * @singleton
+ */
+(function(){
+ var check = function(regex){
+ return regex.test(Ext.userAgent);
+ },
+ docMode = document.documentMode,
+ isOpera = check(/opera/),
+ isOpera10_5 = isOpera && check(/version\/10\.5/),
+ isChrome = check(/\bchrome\b/),
+ isWebKit = check(/webkit/),
+ isSafari = !isChrome && check(/safari/),
+ isSafari2 = isSafari && check(/applewebkit\/4/), // unique to Safari 2
+ isSafari3 = isSafari && check(/version\/3/),
+ isSafari4 = isSafari && check(/version\/4/),
+ isIE = !isOpera && check(/msie/),
+ isIE7 = isIE && (check(/msie 7/) || docMode == 7),
+ isIE8 = isIE && (check(/msie 8/) && docMode != 7 && docMode != 9 || docMode == 8),
+ isIE9 = isIE && (check(/msie 9/) && docMode != 7 && docMode != 8 || docMode == 9),
+ isIE6 = isIE && check(/msie 6/),
+ isGecko = !isWebKit && check(/gecko/),
+ isGecko3 = isGecko && check(/rv:1\.9/),
+ isGecko4 = isGecko && check(/rv:2\.0/),
+ isFF3_0 = isGecko3 && check(/rv:1\.9\.0/),
+ isFF3_5 = isGecko3 && check(/rv:1\.9\.1/),
+ isFF3_6 = isGecko3 && check(/rv:1\.9\.2/),
+ isWindows = check(/windows|win32/),
+ isMac = check(/macintosh|mac os x/),
+ isLinux = check(/linux/),
+ scrollbarSize = null,
+ webKitVersion = isWebKit && (/webkit\/(\d+\.\d+)/.exec(Ext.userAgent));
+
+ // remove css image flicker
+ try {
+ document.execCommand("BackgroundImageCache", false, true);
+ } catch(e) {}
+
+ Ext.setVersion('extjs', '4.0.2a');
+ Ext.apply(Ext, {
+ /**
+ * URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
+ * the IE insecure content warning ('about:blank', except for IE in secure mode, which is 'javascript:""').
+ * @type String
+ */
+ SSL_SECURE_URL : Ext.isSecure && isIE ? 'javascript:""' : 'about:blank',
+
+ /**
+ * True if the {@link Ext.fx.Anim} Class is available
+ * @type Boolean
+ * @property enableFx
+ */
+
+ /**
+ * True to scope the reset CSS to be just applied to Ext components. Note that this wraps root containers
+ * with an additional element. Also remember that when you turn on this option, you have to use ext-all-scoped {
+ * unless you use the bootstrap.js to load your javascript, in which case it will be handled for you.
+ * @type Boolean
+ */
+ scopeResetCSS : Ext.buildSettings.scopeResetCSS,
+
+ /**
+ * EXPERIMENTAL - True to cascade listener removal to child elements when an element is removed.
+ * Currently not optimized for performance.
+ * @type Boolean
+ */
+ enableNestedListenerRemoval : false,
+
+ /**
+ * Indicates whether to use native browser parsing for JSON methods.
+ * This option is ignored if the browser does not support native JSON methods.
+ * Note: Native JSON methods will not work with objects that have functions.
+ * Also, property names must be quoted, otherwise the data will not parse. (Defaults to false)
+ * @type Boolean
+ */
+ USE_NATIVE_JSON : false,
+
+ /**
+ * Return the dom node for the passed String (id), dom node, or Ext.core.Element.
+ * Optional 'strict' flag is needed for IE since it can return 'name' and
+ * 'id' elements by using getElementById.
+ * Here are some examples:
+ *
+// gets dom node based on id
+var elDom = Ext.getDom('elId');
+// gets dom node based on the dom node
+var elDom1 = Ext.getDom(elDom);
+
+// If we don't know if we are working with an
+// Ext.core.Element or a dom node use Ext.getDom
+function(el){
+ var dom = Ext.getDom(el);
+ // do something with the dom node
+}
+ *
+ * Note: the dom node to be found actually needs to exist (be rendered, etc)
+ * when this method is called to be successful.
+ * @param {Mixed} el
+ * @return HTMLElement
+ */
+ getDom : function(el, strict) {
+ if (!el || !document) {
+ return null;
+ }
+ if (el.dom) {
+ return el.dom;
+ } else {
+ if (typeof el == 'string') {
+ var e = document.getElementById(el);
+ // IE returns elements with the 'name' and 'id' attribute.
+ // we do a strict check to return the element with only the id attribute
+ if (e && isIE && strict) {
+ if (el == e.getAttribute('id')) {
+ return e;
+ } else {
+ return null;
+ }
+ }
+ return e;
+ } else {
+ return el;
+ }
+ }
+ },
+
+ /**
+ * Removes a DOM node from the document.
+ * Removes this element from the document, removes all DOM event listeners, and deletes the cache reference.
+ * All DOM event listeners are removed from this element. If {@link Ext#enableNestedListenerRemoval Ext.enableNestedListenerRemoval} is
+ * true
, then DOM event listeners are also removed from all child nodes. The body node
+ * will be ignored if passed in.
Utility method for returning a default value if the passed value is empty.
+ *The value is deemed to be empty if it is
+Ext.addBehaviors({
+ // add a listener for click on all anchors in element with id foo
+ '#foo a@click' : function(e, t){
+ // do something
+ },
+
+ // add the same listener to multiple selectors (separated by comma BEFORE the @)
+ '#foo a, #bar span.some-class@mouseover' : function(){
+ // do something
+ }
+});
+ *
+ * @param {Object} obj The list of behaviors to apply
+ */
+ addBehaviors : function(o){
+ if(!Ext.isReady){
+ Ext.onReady(function(){
+ Ext.addBehaviors(o);
+ });
+ } else {
+ var cache = {}, // simple cache for applying multiple behaviors to same selector does query multiple times
+ parts,
+ b,
+ s;
+ for (b in o) {
+ if ((parts = b.split('@'))[1]) { // for Object prototype breakers
+ s = parts[0];
+ if(!cache[s]){
+ cache[s] = Ext.select(s);
+ }
+ cache[s].on(parts[1], o[b]);
+ }
+ }
+ cache = null;
+ }
+ },
+
+ /**
+ * Returns the size of the browser scrollbars. This can differ depending on
+ * operating system settings, such as the theme or font size.
+ * @param {Boolean} force (optional) true to force a recalculation of the value.
+ * @return {Object} An object containing the width of a vertical scrollbar and the
+ * height of a horizontal scrollbar.
+ */
+ getScrollbarSize: function (force) {
+ if(!Ext.isReady){
+ return 0;
+ }
+
+ if(force === true || scrollbarSize === null){
+ // BrowserBug: IE9
+ // When IE9 positions an element offscreen via offsets, the offsetWidth is
+ // inaccurately reported. For IE9 only, we render on screen before removing.
+ var cssClass = Ext.isIE9 ? '' : Ext.baseCSSPrefix + 'hide-offsets',
+ // Append our div, do our calculation and then remove it
+ div = Ext.getBody().createChild(' '),
+ child = div.child('div', true),
+ w1 = child.offsetWidth;
+
+ div.setStyle('overflow', (Ext.isWebKit || Ext.isGecko) ? 'auto' : 'scroll');
+
+ var w2 = child.offsetWidth, width = w1 - w2;
+ div.remove();
+
+ // We assume width == height for now. TODO: is this always true?
+ scrollbarSize = { width: width, height: width };
+ }
+
+ return scrollbarSize;
+ },
+
+ /**
+ * Utility method for getting the width of the browser's vertical scrollbar. This
+ * can differ depending on operating system settings, such as the theme or font size.
+ *
+ * This method is deprected in favor of {@link #getScrollbarSize}.
+ *
+ * @param {Boolean} force (optional) true to force a recalculation of the value.
+ * @return {Number} The width of a vertical scrollbar.
+ * @deprecated
+ */
+ getScrollBarWidth: function(force){
+ var size = Ext.getScrollbarSize(force);
+ return size.width + 2; // legacy fudge factor
+ },
+
+ /**
+ * Copies a set of named properties fom the source object to the destination object.
+ *
+ * Example:
+ *
+ * ImageComponent = Ext.extend(Ext.Component, {
+ * initComponent: function() {
+ * this.autoEl = { tag: 'img' };
+ * MyComponent.superclass.initComponent.apply(this, arguments);
+ * this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
+ * }
+ * });
+ *
+ * Important note: To borrow class prototype methods, use {@link Ext.Base#borrow} instead.
+ *
+ * @param {Object} dest The destination object.
+ * @param {Object} source The source object.
+ * @param {Array/String} names Either an Array of property names, or a comma-delimited list
+ * of property names to copy.
+ * @param {Boolean} usePrototypeKeys (Optional) Defaults to false. Pass true to copy keys off of the prototype as well as the instance.
+ * @return {Object} The modified object.
+ */
+ copyTo : function(dest, source, names, usePrototypeKeys){
+ if(typeof names == 'string'){
+ names = names.split(/[,;\s]/);
+ }
+ Ext.each(names, function(name){
+ if(usePrototypeKeys || source.hasOwnProperty(name)){
+ dest[name] = source[name];
+ }
+ }, this);
+ return dest;
+ },
+
+ /**
+ * Attempts to destroy and then remove a set of named properties of the passed object.
+ * @param {Object} o The object (most likely a Component) who's properties you wish to destroy.
+ * @param {Mixed} arg1 The name of the property to destroy and remove from the object.
+ * @param {Mixed} etc... More property names to destroy and remove.
+ */
+ destroyMembers : function(o){
+ for (var i = 1, a = arguments, len = a.length; i < len; i++) {
+ Ext.destroy(o[a[i]]);
+ delete o[a[i]];
+ }
+ },
+
+ /**
+ * Logs a message. If a console is present it will be used. On Opera, the method
+ * "opera.postError" is called. In other cases, the message is logged to an array
+ * "Ext.log.out". An attached debugger can watch this array and view the log. The
+ * log buffer is limited to a maximum of "Ext.log.max" entries (defaults to 100).
+ *
+ * If additional parameters are passed, they are joined and appended to the message.
+ *
+ * This method does nothing in a release build.
+ *
+ * @param {String|Object} message The message to log or an options object with any
+ * of the following properties:
+ *
+ * - `msg`: The message to log (required).
+ * - `level`: One of: "error", "warn", "info" or "log" (the default is "log").
+ * - `dump`: An object to dump to the log as part of the message.
+ * - `stack`: True to include a stack trace in the log.
+ * @markdown
+ */
+ log : function (message) {
+ },
+
+ /**
+ * Partitions the set into two sets: a true set and a false set.
+ * Example:
+ * Example2:
+ *
+// Example 1:
+Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]
+
+// Example 2:
+Ext.partition(
+ Ext.query("p"),
+ function(val){
+ return val.className == "class1"
+ }
+);
+// true are those paragraph elements with a className of "class1",
+// false set are those that do not have that className.
+ *
+ * @param {Array|NodeList} arr The array to partition
+ * @param {Function} truth (optional) a function to determine truth. If this is omitted the element
+ * itself must be able to be evaluated for its truthfulness.
+ * @return {Array} [array of truish values, array of falsy values]
+ * @deprecated 4.0.0 Will be removed in the next major version
+ */
+ partition : function(arr, truth){
+ var ret = [[],[]];
+ Ext.each(arr, function(v, i, a) {
+ ret[ (truth && truth(v, i, a)) || (!truth && v) ? 0 : 1].push(v);
+ });
+ return ret;
+ },
+
+ /**
+ * Invokes a method on each item in an Array.
+ *
+// Example:
+Ext.invoke(Ext.query("p"), "getAttribute", "id");
+// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
+ *
+ * @param {Array|NodeList} arr The Array of items to invoke the method on.
+ * @param {String} methodName The method name to invoke.
+ * @param {...*} args Arguments to send into the method invocation.
+ * @return {Array} The results of invoking the method on each item in the array.
+ * @deprecated 4.0.0 Will be removed in the next major version
+ */
+ invoke : function(arr, methodName){
+ var ret = [],
+ args = Array.prototype.slice.call(arguments, 2);
+ Ext.each(arr, function(v,i) {
+ if (v && typeof v[methodName] == 'function') {
+ ret.push(v[methodName].apply(v, args));
+ } else {
+ ret.push(undefined);
+ }
+ });
+ return ret;
+ },
+
+ /**
+ * Zips N sets together.
+ *
+// Example 1:
+Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
+// Example 2:
+Ext.zip(
+ [ "+", "-", "+"],
+ [ 12, 10, 22],
+ [ 43, 15, 96],
+ function(a, b, c){
+ return "$" + a + "" + b + "." + c
+ }
+); // ["$+12.43", "$-10.15", "$+22.96"]
+ *
+ * @param {Arrays|NodeLists} arr This argument may be repeated. Array(s) to contribute values.
+ * @param {Function} zipper (optional) The last item in the argument list. This will drive how the items are zipped together.
+ * @return {Array} The zipped set.
+ * @deprecated 4.0.0 Will be removed in the next major version
+ */
+ zip : function(){
+ var parts = Ext.partition(arguments, function( val ){ return typeof val != 'function'; }),
+ arrs = parts[0],
+ fn = parts[1][0],
+ len = Ext.max(Ext.pluck(arrs, "length")),
+ ret = [];
+
+ for (var i = 0; i < len; i++) {
+ ret[i] = [];
+ if(fn){
+ ret[i] = fn.apply(fn, Ext.pluck(arrs, i));
+ }else{
+ for (var j = 0, aLen = arrs.length; j < aLen; j++){
+ ret[i].push( arrs[j][i] );
+ }
+ }
+ }
+ return ret;
+ },
+
+ /**
+ * Turns an array into a sentence, joined by a specified connector - e.g.:
+ * Ext.toSentence(['Adama', 'Tigh', 'Roslin']); //'Adama, Tigh and Roslin'
+ * Ext.toSentence(['Adama', 'Tigh', 'Roslin'], 'or'); //'Adama, Tigh or Roslin'
+ * @param {Array} items The array to create a sentence from
+ * @param {String} connector The string to use to connect the last two words. Usually 'and' or 'or' - defaults to 'and'.
+ * @return {String} The sentence string
+ * @deprecated 4.0.0 Will be removed in the next major version
+ */
+ toSentence: function(items, connector) {
+ var length = items.length;
+
+ if (length <= 1) {
+ return items[0];
+ } else {
+ var head = items.slice(0, length - 1),
+ tail = items[length - 1];
+
+ return Ext.util.Format.format("{0} {1} {2}", head.join(", "), connector || 'and', tail);
+ }
+ },
+
+ /**
+ * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
+ * you may want to set this to true.
+ * @type Boolean
+ */
+ useShims: isIE6
+ });
+})();
+
+/**
+ * Loads Ext.app.Application class and starts it up with given configuration after the page is ready.
+ *
+ * See Ext.app.Application for details.
+ *
+ * @param {Object} config
+ */
+Ext.application = function(config) {
+ Ext.require('Ext.app.Application');
+
+ Ext.onReady(function() {
+ Ext.create('Ext.app.Application', config);
+ });
+};
+
+/**
+ * @class Ext.util.Format
+
+This class is a centralized place for formatting functions inside the library. It includes
+functions to format various different types of data, such as text, dates and numeric values.
+
+__Localization__
+This class contains several options for localization. These can be set once the library has loaded,
+all calls to the functions from that point will use the locale settings that were specified.
+Options include:
+- thousandSeparator
+- decimalSeparator
+- currenyPrecision
+- currencySign
+- currencyAtEnd
+This class also uses the default date format defined here: {@link Ext.Date#defaultFormat}.
+
+__Using with renderers__
+There are two helper functions that return a new function that can be used in conjunction with
+grid renderers:
+
+ columns: [{
+ dataIndex: 'date',
+ renderer: Ext.util.Format.dateRenderer('Y-m-d')
+ }, {
+ dataIndex: 'time',
+ renderer: Ext.util.Format.numberRenderer('0.000')
+ }]
+
+Functions that only take a single argument can also be passed directly:
+ columns: [{
+ dataIndex: 'cost',
+ renderer: Ext.util.Format.usMoney
+ }, {
+ dataIndex: 'productCode',
+ renderer: Ext.util.Format.uppercase
+ }]
+
+__Using with XTemplates__
+XTemplates can also directly use Ext.util.Format functions:
+
+ new Ext.XTemplate([
+ 'Date: {startDate:date("Y-m-d")}',
+ 'Cost: {cost:usMoney}'
+ ]);
+
+ * @markdown
+ * @singleton
+ */
+(function() {
+ Ext.ns('Ext.util');
+
+ Ext.util.Format = {};
+ var UtilFormat = Ext.util.Format,
+ stripTagsRE = /<\/?[^>]+>/gi,
+ stripScriptsRe = /(?:The character that the {@link #number} function uses as a thousand separator.
+ *This defaults to ,
, but may be overridden in a locale file.
The character that the {@link #number} function uses as a decimal point.
+ *This defaults to .
, but may be overridden in a locale file.
The number of decimal places that the {@link #currency} function displays.
+ *This defaults to 2
, but may be overridden in a locale file.
The currency sign that the {@link #currency} function displays.
+ *This defaults to $
, but may be overridden in a locale file.
This may be set to true
to make the {@link #currency} function
+ * append the currency sign to the formatted value.
This defaults to false
, but may be overridden in a locale file.
+ * var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
+ *
+ * @return {Function} A function that operates on the passed value.
+ * @method
+ */
+ math : function(){
+ var fns = {};
+
+ return function(v, a){
+ if (!fns[a]) {
+ fns[a] = Ext.functionFactory('v', 'return v ' + a + ';');
+ }
+ return fns[a](v);
+ };
+ }(),
+
+ /**
+ * Rounds the passed number to the required decimal precision.
+ * @param {Number/String} value The numeric value to round.
+ * @param {Number} precision The number of decimal places to which to round the first parameter's value.
+ * @return {Number} The rounded value.
+ */
+ round : function(value, precision) {
+ var result = Number(value);
+ if (typeof precision == 'number') {
+ precision = Math.pow(10, precision);
+ result = Math.round(value * precision) / precision;
+ }
+ return result;
+ },
+
+ /**
+ * Formats the passed number according to the passed format string.
+ *The number of digits after the decimal separator character specifies the number of + * decimal places in the resulting string. The local-specific decimal character is used in the result.
+ *The presence of a thousand separator character in the format string specifies that + * the locale-specific thousand separator (if any) is inserted separating thousand groups.
+ *By default, "," is expected as the thousand separator, and "." is expected as the decimal separator.
+ *New to Ext4
+ *Locale-specific characters are always used in the formatted output when inserting + * thousand and decimal separators.
+ *The format string must specify separator characters according to US/UK conventions ("," as the + * thousand separator, and "." as the decimal separator)
+ *To allow specification of format strings according to local conventions for separator characters, add
+ * the string /i
to the end of the format string.
+// Start a simple clock task that updates a div once per second
+var updateClock = function(){
+ Ext.fly('clock').update(new Date().format('g:i:s A'));
+}
+var task = {
+ run: updateClock,
+ interval: 1000 //1 second
+}
+var runner = new Ext.util.TaskRunner();
+runner.start(task);
+
+// equivalent using TaskManager
+Ext.TaskManager.start({
+ run: updateClock,
+ interval: 1000
+});
+
+ *
+ * See the {@link #start} method for details about how to configure a task object.
+ * Also see {@link Ext.util.DelayedTask}. + * + * @constructor + * @param {Number} interval (optional) The minimum precision in milliseconds supported by this TaskRunner instance + * (defaults to 10) + */ +Ext.ns('Ext.util'); + +Ext.util.TaskRunner = function(interval) { + interval = interval || 10; + var tasks = [], + removeQueue = [], + id = 0, + running = false, + + // private + stopThread = function() { + running = false; + clearInterval(id); + id = 0; + }, + + // private + startThread = function() { + if (!running) { + running = true; + id = setInterval(runTasks, interval); + } + }, + + // private + removeTask = function(t) { + removeQueue.push(t); + if (t.onStop) { + t.onStop.apply(t.scope || t); + } + }, + + // private + runTasks = function() { + var rqLen = removeQueue.length, + now = new Date().getTime(), + i; + + if (rqLen > 0) { + for (i = 0; i < rqLen; i++) { + Ext.Array.remove(tasks, removeQueue[i]); + } + removeQueue = []; + if (tasks.length < 1) { + stopThread(); + return; + } + } + i = 0; + var t, + itime, + rt, + len = tasks.length; + for (; i < len; ++i) { + t = tasks[i]; + itime = now - t.taskRunTime; + if (t.interval <= itime) { + rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]); + t.taskRunTime = now; + if (rt === false || t.taskRunCount === t.repeat) { + removeTask(t); + return; + } + } + if (t.duration && t.duration <= (now - t.taskStartTime)) { + removeTask(t); + } + } + }; + + /** + * Starts a new task. + * @method start + * @param {Object} taskA config object that supports the following properties:
run
: FunctionThe function to execute each time the task is invoked. The
+ * function will be called at each interval and passed the args
argument if specified, and the
+ * current invocation count if not.
If a particular scope (this
reference) is required, be sure to specify it using the scope
argument.
Return false
from this function to terminate the task.
interval
: Numberargs
: Arrayrun
. If not specified, the current invocation count is passed.scope
: Objectrun
function. Defaults to the task config object.duration
: Numberrepeat
: NumberBefore each invocation, Ext injects the property taskRunCount
into the task object so
+ * that calculations based on the repeat count can be performed.
+// Start a simple clock task that updates a div once per second
+var task = {
+ run: function(){
+ Ext.fly('clock').update(new Date().format('g:i:s A'));
+ },
+ interval: 1000 //1 second
+}
+Ext.TaskManager.start(task);
+
+ * See the {@link #start} method for details about how to configure a task object.
+ * @singleton + */ +Ext.TaskManager = Ext.create('Ext.util.TaskRunner'); +/** + * @class Ext.is + * + * Determines information about the current platform the application is running on. + * + * @singleton + */ +Ext.is = { + init : function(navigator) { + var platforms = this.platforms, + ln = platforms.length, + i, platform; + + navigator = navigator || window.navigator; + + for (i = 0; i < ln; i++) { + platform = platforms[i]; + this[platform.identity] = platform.regex.test(navigator[platform.property]); + } + + /** + * @property Desktop True if the browser is running on a desktop machine + * @type {Boolean} + */ + this.Desktop = this.Mac || this.Windows || (this.Linux && !this.Android); + /** + * @property Tablet True if the browser is running on a tablet (iPad) + */ + this.Tablet = this.iPad; + /** + * @property Phone True if the browser is running on a phone. + * @type {Boolean} + */ + this.Phone = !this.Desktop && !this.Tablet; + /** + * @property iOS True if the browser is running on iOS + * @type {Boolean} + */ + this.iOS = this.iPhone || this.iPad || this.iPod; + + /** + * @property Standalone Detects when application has been saved to homescreen. + * @type {Boolean} + */ + this.Standalone = !!window.navigator.standalone; + }, + + /** + * @property iPhone True when the browser is running on a iPhone + * @type {Boolean} + */ + platforms: [{ + property: 'platform', + regex: /iPhone/i, + identity: 'iPhone' + }, + + /** + * @property iPod True when the browser is running on a iPod + * @type {Boolean} + */ + { + property: 'platform', + regex: /iPod/i, + identity: 'iPod' + }, + + /** + * @property iPad True when the browser is running on a iPad + * @type {Boolean} + */ + { + property: 'userAgent', + regex: /iPad/i, + identity: 'iPad' + }, + + /** + * @property Blackberry True when the browser is running on a Blackberry + * @type {Boolean} + */ + { + property: 'userAgent', + regex: /Blackberry/i, + identity: 'Blackberry' + }, + + /** + * @property Android True when the browser is running on an Android device + * @type {Boolean} + */ + { + property: 'userAgent', + regex: /Android/i, + identity: 'Android' + }, + + /** + * @property Mac True when the browser is running on a Mac + * @type {Boolean} + */ + { + property: 'platform', + regex: /Mac/i, + identity: 'Mac' + }, + + /** + * @property Windows True when the browser is running on Windows + * @type {Boolean} + */ + { + property: 'platform', + regex: /Win/i, + identity: 'Windows' + }, + + /** + * @property Linux True when the browser is running on Linux + * @type {Boolean} + */ + { + property: 'platform', + regex: /Linux/i, + identity: 'Linux' + }] +}; + +Ext.is.init(); + +/** + * @class Ext.supports + * + * Determines information about features are supported in the current environment + * + * @singleton + */ +Ext.supports = { + init : function() { + var doc = document, + div = doc.createElement('div'), + tests = this.tests, + ln = tests.length, + i, test; + + div.innerHTML = [ + 'The DomHelper class provides a layer of abstraction from DOM and transparently supports creating + * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates + * from your DOM building code.
+ * + *DomHelper element specification object
+ *A specification object is used when creating elements. Attributes of this object + * are assumed to be element attributes, except for 4 special attributes: + *
NOTE: For other arbitrary attributes, the value will currently not be automatically + * HTML-escaped prior to building the element's HTML string. This means that if your attribute value + * contains special characters that would not normally be allowed in a double-quoted attribute value, + * you must manually HTML-encode it beforehand (see {@link Ext.String#htmlEncode}) or risk + * malformed HTML being created. This behavior may change in a future release.
+ * + *Insertion methods
+ *Commonly used insertion methods: + *
Example
+ *This is an example, where an unordered list with 3 children items is appended to an existing
+ * element with id 'my-div':
+
+var dh = Ext.core.DomHelper; // create shorthand alias
+// specification object
+var spec = {
+ id: 'my-ul',
+ tag: 'ul',
+ cls: 'my-list',
+ // append children after creating
+ children: [ // may also specify 'cn' instead of 'children'
+ {tag: 'li', id: 'item0', html: 'List Item 0'},
+ {tag: 'li', id: 'item1', html: 'List Item 1'},
+ {tag: 'li', id: 'item2', html: 'List Item 2'}
+ ]
+};
+var list = dh.append(
+ 'my-div', // the context element 'my-div' can either be the id or the actual node
+ spec // the specification object
+);
+
+ * Element creation specification parameters in this class may also be passed as an Array of + * specification objects. This can be used to insert multiple sibling nodes into an existing + * container very efficiently. For example, to add more list items to the example above:
+dh.append('my-ul', [
+ {tag: 'li', id: 'item3', html: 'List Item 3'},
+ {tag: 'li', id: 'item4', html: 'List Item 4'}
+]);
+ *
+ *
+ * Templating
+ *The real power is in the built-in templating. Instead of creating or appending any elements, + * {@link #createTemplate} returns a Template object which can be used over and over to + * insert new elements. Revisiting the example above, we could utilize templating this time: + *
+// create the node
+var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
+// get template
+var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
+
+for(var i = 0; i < 5, i++){
+ tpl.append(list, [i]); // use template to append to the actual node
+}
+ *
+ * An example using a template:
+var html = '{2}';
+
+var tpl = new Ext.core.DomHelper.createTemplate(html);
+tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', "Ed's Site"]);
+tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
+ *
+ *
+ * The same example using named parameters:
+var html = '{text}';
+
+var tpl = new Ext.core.DomHelper.createTemplate(html);
+tpl.append('blog-roll', {
+ id: 'link1',
+ url: 'http://www.edspencer.net/',
+ text: "Ed's Site"
+});
+tpl.append('blog-roll', {
+ id: 'link2',
+ url: 'http://www.dustindiaz.com/',
+ text: "Dustin's Site"
+});
+ *
+ *
+ * Compiling Templates
+ *Templates are applied using regular expressions. The performance is great, but if + * you are adding a bunch of DOM elements using the same template, you can increase + * performance even further by {@link Ext.Template#compile "compiling"} the template. + * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and + * broken up at the different variable points and a dynamic function is created and eval'ed. + * The generated function performs string concatenation of these parts and the passed + * variables instead of using regular expressions. + *
+var html = '{text}';
+
+var tpl = new Ext.core.DomHelper.createTemplate(html);
+tpl.compile();
+
+//... use template like normal
+ *
+ *
+ * Performance Boost
+ *DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead + * of DOM can significantly boost performance.
+ *Element creation specification parameters may also be strings. If {@link #useDom} is false, + * then the string is used as innerHTML. If {@link #useDom} is true, a string specification + * results in the creation of a text node. Usage:
+ *
+Ext.core.DomHelper.useDom = true; // force it to use DOM; reduces performance
+ *
+ * @singleton
+ */
+Ext.ns('Ext.core');
+Ext.core.DomHelper = function(){
+ var tempTableEl = null,
+ emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
+ tableRe = /^table|tbody|tr|td$/i,
+ confRe = /tag|children|cn|html$/i,
+ tableElRe = /td|tr|tbody/i,
+ endRe = /end/i,
+ pub,
+ // kill repeat to save bytes
+ afterbegin = 'afterbegin',
+ afterend = 'afterend',
+ beforebegin = 'beforebegin',
+ beforeend = 'beforeend',
+ ts = '+DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.
+ ++All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure. +
+The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.
+Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
+ *All instances of this class inherit the methods of {@link Ext.fx.Anim} making visual effects easily available to all DOM elements.
+ *Note that the events documented in this class are not Ext events, they encapsulate browser events. To + * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older + * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.
+ * Usage:
+// by id
+var el = Ext.get("my-div");
+
+// by DOM element reference
+var el = Ext.get(myDivElement);
+
+ * AnimationsWhen an element is manipulated, by default there is no animation.
+ *
+var el = Ext.get("my-div");
+
+// no animation
+el.setWidth(100);
+ *
+ * Many of the functions for manipulating an element have an optional "animate" parameter. This + * parameter can be specified as boolean (true) for default animation effects.
+ *
+// default animation
+el.setWidth(100, true);
+ *
+ *
+ * To configure the effects, an object literal with animation options to use as the Element animation + * configuration object can also be specified. Note that the supported Element animation configuration + * options are a subset of the {@link Ext.fx.Anim} animation options specific to Fx effects. The supported + * Element animation configuration options are:
++Option Default Description +--------- -------- --------------------------------------------- +{@link Ext.fx.Anim#duration duration} .35 The duration of the animation in seconds +{@link Ext.fx.Anim#easing easing} easeOut The easing method +{@link Ext.fx.Anim#callback callback} none A function to execute when the anim completes +{@link Ext.fx.Anim#scope scope} this The scope (this) of the callback function ++ * + *
+// Element animation options object
+var opt = {
+ {@link Ext.fx.Anim#duration duration}: 1,
+ {@link Ext.fx.Anim#easing easing}: 'elasticIn',
+ {@link Ext.fx.Anim#callback callback}: this.foo,
+ {@link Ext.fx.Anim#scope scope}: this
+};
+// animation with some options set
+el.setWidth(100, opt);
+ *
+ * The Element animation object being used for the animation will be set on the options + * object as "anim", which allows you to stop or manipulate the animation. Here is an example:
+ *
+// using the "anim" property to get the Anim object
+if(opt.anim.isAnimated()){
+ opt.anim.stop();
+}
+ *
+ * Also see the {@link #animate} method for another animation technique.
+ *Composite (Collections of) Elements
+ *For working with collections of Elements, see {@link Ext.CompositeElement}
+ * @constructor Create a new Element directly. + * @param {String/HTMLElement} element + * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class). + */ + (function() { + var DOC = document, + EC = Ext.cache; + + Ext.Element = Ext.core.Element = function(element, forceNew) { + var dom = typeof element == "string" ? DOC.getElementById(element) : element, + id; + + if (!dom) { + return null; + } + + id = dom.id; + + if (!forceNew && id && EC[id]) { + // element object already exists + return EC[id].el; + } + + /** + * The DOM element + * @type HTMLElement + */ + this.dom = dom; + + /** + * The DOM element ID + * @type String + */ + this.id = id || Ext.id(dom); + }; + + var DH = Ext.core.DomHelper, + El = Ext.core.Element; + + + El.prototype = { + /** + * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function) + * @param {Object} o The object with the attributes + * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos. + * @return {Ext.core.Element} this + */ + set: function(o, useSet) { + var el = this.dom, + attr, + val; + useSet = (useSet !== false) && !!el.setAttribute; + + for (attr in o) { + if (o.hasOwnProperty(attr)) { + val = o[attr]; + if (attr == 'style') { + DH.applyStyles(el, val); + } else if (attr == 'cls') { + el.className = val; + } else if (useSet) { + el.setAttribute(attr, val); + } else { + el[attr] = val; + } + } + } + return this; + }, + + // Mouse events + /** + * @event click + * Fires when a mouse click is detected within the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event contextmenu + * Fires when a right click is detected within the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event dblclick + * Fires when a mouse double click is detected within the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event mousedown + * Fires when a mousedown is detected within the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event mouseup + * Fires when a mouseup is detected within the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event mouseover + * Fires when a mouseover is detected within the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event mousemove + * Fires when a mousemove is detected with the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event mouseout + * Fires when a mouseout is detected with the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event mouseenter + * Fires when the mouse enters the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event mouseleave + * Fires when the mouse leaves the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + + // Keyboard events + /** + * @event keypress + * Fires when a keypress is detected within the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event keydown + * Fires when a keydown is detected within the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event keyup + * Fires when a keyup is detected within the element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + + + // HTML frame/object events + /** + * @event load + * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event unload + * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event abort + * Fires when an object/image is stopped from loading before completely loaded. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event error + * Fires when an object/image/frame cannot be loaded properly. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event resize + * Fires when a document view is resized. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event scroll + * Fires when a document view is scrolled. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + + // Form events + /** + * @event select + * Fires when a user selects some text in a text field, including input and textarea. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event change + * Fires when a control loses the input focus and its value has been modified since gaining focus. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event submit + * Fires when a form is submitted. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event reset + * Fires when a form is reset. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event focus + * Fires when an element receives focus either via the pointing device or by tab navigation. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event blur + * Fires when an element loses focus either via the pointing device or by tabbing navigation. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + + // User Interface events + /** + * @event DOMFocusIn + * Where supported. Similar to HTML focus event, but can be applied to any focusable element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event DOMFocusOut + * Where supported. Similar to HTML blur event, but can be applied to any focusable element. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event DOMActivate + * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + + // DOM Mutation events + /** + * @event DOMSubtreeModified + * Where supported. Fires when the subtree is modified. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event DOMNodeInserted + * Where supported. Fires when a node has been added as a child of another node. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event DOMNodeRemoved + * Where supported. Fires when a descendant node of the element is removed. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event DOMNodeRemovedFromDocument + * Where supported. Fires when a node is being removed from a document. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event DOMNodeInsertedIntoDocument + * Where supported. Fires when a node is being inserted into a document. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event DOMAttrModified + * Where supported. Fires when an attribute has been modified. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + /** + * @event DOMCharacterDataModified + * Where supported. Fires when the character data has been modified. + * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. + * @param {HtmlElement} t The target of the event. + * @param {Object} o The options configuration passed to the {@link #addListener} call. + */ + + /** + * The default unit to append to CSS values where a unit isn't provided (defaults to px). + * @type String + */ + defaultUnit: "px", + + /** + * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child) + * @param {String} selector The simple selector to test + * @return {Boolean} True if this element matches the selector, else false + */ + is: function(simpleSelector) { + return Ext.DomQuery.is(this.dom, simpleSelector); + }, + + /** + * Tries to focus the element. Any exceptions are caught and ignored. + * @param {Number} defer (optional) Milliseconds to defer the focus + * @return {Ext.core.Element} this + */ + focus: function(defer, + /* private */ + dom) { + var me = this; + dom = dom || me.dom; + try { + if (Number(defer)) { + Ext.defer(me.focus, defer, null, [null, dom]); + } else { + dom.focus(); + } + } catch(e) {} + return me; + }, + + /** + * Tries to blur the element. Any exceptions are caught and ignored. + * @return {Ext.core.Element} this + */ + blur: function() { + try { + this.dom.blur(); + } catch(e) {} + return this; + }, + + /** + * Returns the value of the "value" attribute + * @param {Boolean} asNumber true to parse the value as a number + * @return {String/Number} + */ + getValue: function(asNumber) { + var val = this.dom.value; + return asNumber ? parseInt(val, 10) : val; + }, + + /** + * Appends an event handler to this element. The shorthand version {@link #on} is equivalent. + * @param {String} eventName The name of event to handle. + * @param {Function} fn The handler function the event invokes. This function is passed + * the following parameters:this
reference) in which the handler function is executed.
+ * If omitted, defaults to this Element..
+ * @param {Object} options (optional) An object containing handler configuration properties.
+ * This may contain any of the following properties:this
reference) in which the handler function is executed.
+ * If omitted, defaults to this Element.
+ * Combining Options
+ * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
+ * addListener. The two are equivalent. Using the options argument, it is possible to combine different
+ * types of listeners:
+ *
+ * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
+ * options object. The options object is available as the third parameter in the handler function.
+el.on('click', this.onClick, this, {
+ single: true,
+ delay: 100,
+ stopEvent : true,
+ forumId: 4
+});
+ *
+ * Attaching multiple handlers in 1 call
+ * The method also allows for a single argument to be passed which is a config object containing properties
+ * which specify multiple handlers.
+ * Code:
+el.on({
+ 'click' : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+ },
+ 'mouseover' : {
+ fn: this.onMouseOver,
+ scope: this
+ },
+ 'mouseout' : {
+ fn: this.onMouseOut,
+ scope: this
+ }
+});
+ *
+ * Or a shorthand syntax:
+ * Code:
+el.on({
+ 'click' : this.onClick,
+ 'mouseover' : this.onMouseOver,
+ 'mouseout' : this.onMouseOut,
+ scope: this
+});
+ *
+ * delegate
+ *This is a configuration option that you can pass along when registering a handler for + * an event to assist with event delegation. Event delegation is a technique that is used to + * reduce memory consumption and prevent exposure to memory-leaks. By registering an event + * for a container element as opposed to each element within a container. By setting this + * configuration option to a simple selector, the target element will be filtered to look for + * a descendant of the target. + * For example:
+// using this markup:
+<div id='elId'>
+ <p id='p1'>paragraph one</p>
+ <p id='p2' class='clickable'>paragraph two</p>
+ <p id='p3'>paragraph three</p>
+</div>
+// utilize event delegation to registering just one handler on the container element:
+el = Ext.get('elId');
+el.on(
+ 'click',
+ function(e,t) {
+ // handle click
+ console.info(t.id); // 'p2'
+ },
+ this,
+ {
+ // filter the target element to be a descendant with the class 'clickable'
+ delegate: '.clickable'
+ }
+);
+ *
+ * @return {Ext.core.Element} this
+ */
+ addListener: function(eventName, fn, scope, options) {
+ Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
+ return this;
+ },
+
+ /**
+ * Removes an event handler from this element. The shorthand version {@link #un} is equivalent.
+ * Note: if a scope was explicitly specified when {@link #addListener adding} the
+ * listener, the same scope must be specified here.
+ * Example:
+ *
+el.removeListener('click', this.handlerFn);
+// or
+el.un('click', this.handlerFn);
+
+ * @param {String} eventName The name of the event from which to remove the handler.
+ * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call.
+ * @param {Object} scope If a scope (this
reference) was specified when the listener was added,
+ * then this must refer to the same object.
+ * @return {Ext.core.Element} this
+ */
+ removeListener: function(eventName, fn, scope) {
+ Ext.EventManager.un(this.dom, eventName, fn, scope || this);
+ return this;
+ },
+
+ /**
+ * Removes all previous added listeners from this element
+ * @return {Ext.core.Element} this
+ */
+ removeAllListeners: function() {
+ Ext.EventManager.removeAll(this.dom);
+ return this;
+ },
+
+ /**
+ * Recursively removes all previous added listeners from this element and its children
+ * @return {Ext.core.Element} this
+ */
+ purgeAllListeners: function() {
+ Ext.EventManager.purgeElement(this);
+ return this;
+ },
+
+ /**
+ * @private Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
+ * @param size {Mixed} The size to set
+ * @param units {String} The units to append to a numeric size value
+ */
+ addUnits: function(size, units) {
+
+ // Most common case first: Size is set to a number
+ if (Ext.isNumber(size)) {
+ return size + (units || this.defaultUnit || 'px');
+ }
+
+ // Size set to a value which means "auto"
+ if (size === "" || size == "auto" || size === undefined || size === null) {
+ return size || '';
+ }
+
+ // Otherwise, warn if it's not a valid CSS measurement
+ if (!unitPattern.test(size)) {
+ return size || '';
+ }
+ return size;
+ },
+
+ /**
+ * Tests various css rules/browsers to determine if this element uses a border box
+ * @return {Boolean}
+ */
+ isBorderBox: function() {
+ return Ext.isBorderBox || noBoxAdjust[(this.dom.tagName || "").toLowerCase()];
+ },
+
+ /**
+ * Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode Ext.removeNode}
+ */ + remove: function() { + var me = this, + dom = me.dom; + + if (dom) { + delete me.dom; + Ext.removeNode(dom); + } + }, + + /** + * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element. + * @param {Function} overFn The function to call when the mouse enters the Element. + * @param {Function} outFn The function to call when the mouse leaves the Element. + * @param {Object} scope (optional) The scope (this
reference) in which the functions are executed. Defaults to the Element's DOM element.
+ * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the options parameter}.
+ * @return {Ext.core.Element} this
+ */
+ hover: function(overFn, outFn, scope, options) {
+ var me = this;
+ me.on('mouseenter', overFn, scope || me.dom, options);
+ me.on('mouseleave', outFn, scope || me.dom, options);
+ return me;
+ },
+
+ /**
+ * Returns true if this element is an ancestor of the passed element
+ * @param {HTMLElement/String} el The element to check
+ * @return {Boolean} True if this element is an ancestor of el, else false
+ */
+ contains: function(el) {
+ return ! el ? false: Ext.core.Element.isAncestor(this.dom, el.dom ? el.dom: el);
+ },
+
+ /**
+ * Returns the value of a namespaced attribute from the element's underlying DOM node.
+ * @param {String} namespace The namespace in which to look for the attribute
+ * @param {String} name The attribute name
+ * @return {String} The attribute value
+ * @deprecated
+ */
+ getAttributeNS: function(ns, name) {
+ return this.getAttribute(name, ns);
+ },
+
+ /**
+ * Returns the value of an attribute from the element's underlying DOM node.
+ * @param {String} name The attribute name
+ * @param {String} namespace (optional) The namespace in which to look for the attribute
+ * @return {String} The attribute value
+ * @method
+ */
+ getAttribute: (Ext.isIE && !(Ext.isIE9 && document.documentMode === 9)) ?
+ function(name, ns) {
+ var d = this.dom,
+ type;
+ if(ns) {
+ type = typeof d[ns + ":" + name];
+ if (type != 'undefined' && type != 'unknown') {
+ return d[ns + ":" + name] || null;
+ }
+ return null;
+ }
+ if (name === "for") {
+ name = "htmlFor";
+ }
+ return d[name] || null;
+ }: function(name, ns) {
+ var d = this.dom;
+ if (ns) {
+ return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name);
+ }
+ return d.getAttribute(name) || d[name] || null;
+ },
+
+ /**
+ * Update the innerHTML of this element
+ * @param {String} html The new HTML
+ * @return {Ext.core.Element} this
+ */
+ update: function(html) {
+ if (this.dom) {
+ this.dom.innerHTML = html;
+ }
+ return this;
+ }
+ };
+
+ var ep = El.prototype;
+
+ El.addMethods = function(o) {
+ Ext.apply(ep, o);
+ };
+
+ /**
+ * Appends an event handler (shorthand for {@link #addListener}).
+ * @param {String} eventName The name of event to handle.
+ * @param {Function} fn The handler function the event invokes.
+ * @param {Object} scope (optional) The scope (this
reference) in which the handler function is executed.
+ * @param {Object} options (optional) An object containing standard {@link #addListener} options
+ * @member Ext.core.Element
+ * @method on
+ */
+ ep.on = ep.addListener;
+
+ /**
+ * Removes an event handler from this element (see {@link #removeListener} for additional notes).
+ * @param {String} eventName The name of the event from which to remove the handler.
+ * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call.
+ * @param {Object} scope If a scope (this
reference) was specified when the listener was added,
+ * then this must refer to the same object.
+ * @return {Ext.core.Element} this
+ * @member Ext.core.Element
+ * @method un
+ */
+ ep.un = ep.removeListener;
+
+ /**
+ * Removes all previous added listeners from this element
+ * @return {Ext.core.Element} this
+ * @member Ext.core.Element
+ * @method clearListeners
+ */
+ ep.clearListeners = ep.removeAllListeners;
+
+ /**
+ * Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode Ext.removeNode}.
+ * Alias to {@link #remove}.
+ * @member Ext.core.Element
+ * @method destroy
+ */
+ ep.destroy = ep.remove;
+
+ /**
+ * true to automatically adjust width and height settings for box-model issues (default to true)
+ */
+ ep.autoBoxAdjust = true;
+
+ // private
+ var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
+ docEl;
+
+ /**
+ * Retrieves Ext.core.Element objects.
+ * This method does not retrieve {@link Ext.Component Component}s. This method + * retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by + * its ID, use {@link Ext.ComponentManager#get}.
+ *Uses simple caching to consistently return the same object. Automatically fixes if an + * object was recreated with the same id via AJAX or DOM.
+ * @param {Mixed} el The id of the node, a DOM Node or an existing Element. + * @return {Element} The Element object (or null if no matching element was found) + * @static + * @member Ext.core.Element + * @method get + */ + El.get = function(el) { + var ex, + elm, + id; + if (!el) { + return null; + } + if (typeof el == "string") { + // element id + if (! (elm = DOC.getElementById(el))) { + return null; + } + if (EC[el] && EC[el].el) { + ex = EC[el].el; + ex.dom = elm; + } else { + ex = El.addToCache(new El(elm)); + } + return ex; + } else if (el.tagName) { + // dom element + if (! (id = el.id)) { + id = Ext.id(el); + } + if (EC[id] && EC[id].el) { + ex = EC[id].el; + ex.dom = el; + } else { + ex = El.addToCache(new El(el)); + } + return ex; + } else if (el instanceof El) { + if (el != docEl) { + // refresh dom element in case no longer valid, + // catch case where it hasn't been appended + // If an el instance is passed, don't pass to getElementById without some kind of id + if (Ext.isIE && (el.id == undefined || el.id == '')) { + el.dom = el.dom; + } else { + el.dom = DOC.getElementById(el.id) || el.dom; + } + } + return el; + } else if (el.isComposite) { + return el; + } else if (Ext.isArray(el)) { + return El.select(el); + } else if (el == DOC) { + // create a bogus element object representing the document object + if (!docEl) { + var f = function() {}; + f.prototype = El.prototype; + docEl = new f(); + docEl.dom = DOC; + } + return docEl; + } + return null; + }; + + El.addToCache = function(el, id) { + if (el) { + id = id || el.id; + EC[id] = { + el: el, + data: {}, + events: {} + }; + } + return el; + }; + + // private method for getting and setting element data + El.data = function(el, key, value) { + el = El.get(el); + if (!el) { + return null; + } + var c = EC[el.id].data; + if (arguments.length == 2) { + return c[key]; + } else { + return (c[key] = value); + } + }; + + // private + // Garbage collection - uncache elements/purge listeners on orphaned elements + // so we don't hold a reference and cause the browser to retain them + function garbageCollect() { + if (!Ext.enableGarbageCollector) { + clearInterval(El.collectorThreadId); + } else { + var eid, + el, + d, + o; + + for (eid in EC) { + if (!EC.hasOwnProperty(eid)) { + continue; + } + o = EC[eid]; + if (o.skipGarbageCollection) { + continue; + } + el = o.el; + d = el.dom; + // ------------------------------------------------------- + // Determining what is garbage: + // ------------------------------------------------------- + // !d + // dom node is null, definitely garbage + // ------------------------------------------------------- + // !d.parentNode + // no parentNode == direct orphan, definitely garbage + // ------------------------------------------------------- + // !d.offsetParent && !document.getElementById(eid) + // display none elements have no offsetParent so we will + // also try to look it up by it's id. However, check + // offsetParent first so we don't do unneeded lookups. + // This enables collection of elements that are not orphans + // directly, but somewhere up the line they have an orphan + // parent. + // ------------------------------------------------------- + if (!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))) { + if (d && Ext.enableListenerCollection) { + Ext.EventManager.removeAll(d); + } + delete EC[eid]; + } + } + // Cleanup IE Object leaks + if (Ext.isIE) { + var t = {}; + for (eid in EC) { + if (!EC.hasOwnProperty(eid)) { + continue; + } + t[eid] = EC[eid]; + } + EC = Ext.cache = t; + } + } + } + El.collectorThreadId = setInterval(garbageCollect, 30000); + + var flyFn = function() {}; + flyFn.prototype = El.prototype; + + // dom is optional + El.Flyweight = function(dom) { + this.dom = dom; + }; + + El.Flyweight.prototype = new flyFn(); + El.Flyweight.prototype.isFlyweight = true; + El._flyweights = {}; + + /** + *Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - + * the dom node can be overwritten by other code. Shorthand of {@link Ext.core.Element#fly}
+ *Use this to make one-time references to DOM elements which are not going to be accessed again either by + * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get Ext.get} + * will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.
+ * @param {String/HTMLElement} el The dom node or id + * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts + * (e.g. internally Ext uses "_global") + * @return {Element} The shared Element object (or null if no matching element was found) + * @member Ext.core.Element + * @method fly + */ + El.fly = function(el, named) { + var ret = null; + named = named || '_global'; + el = Ext.getDom(el); + if (el) { + (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; + ret = El._flyweights[named]; + } + return ret; + }; + + /** + * Retrieves Ext.core.Element objects. + *This method does not retrieve {@link Ext.Component Component}s. This method + * retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by + * its ID, use {@link Ext.ComponentManager#get}.
+ *Uses simple caching to consistently return the same object. Automatically fixes if an + * object was recreated with the same id via AJAX or DOM.
+ * Shorthand of {@link Ext.core.Element#get} + * @param {Mixed} el The id of the node, a DOM Node or an existing Element. + * @return {Element} The Element object (or null if no matching element was found) + * @member Ext + * @method get + */ + Ext.get = El.get; + + /** + *Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - + * the dom node can be overwritten by other code. Shorthand of {@link Ext.core.Element#fly}
+ *Use this to make one-time references to DOM elements which are not going to be accessed again either by + * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get Ext.get} + * will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.
+ * @param {String/HTMLElement} el The dom node or id + * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts + * (e.g. internally Ext uses "_global") + * @return {Element} The shared Element object (or null if no matching element was found) + * @member Ext + * @method fly + */ + Ext.fly = El.fly; + + // speedy lookup for elements never to box adjust + var noBoxAdjust = Ext.isStrict ? { + select: 1 + }: { + input: 1, + select: 1, + textarea: 1 + }; + if (Ext.isIE || Ext.isGecko) { + noBoxAdjust['button'] = 1; + } +})(); + +/** + * @class Ext.core.Element + */ +Ext.core.Element.addMethods({ + /** + * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child) + * @param {String} selector The simple selector to test + * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 50 || document.body) + * @param {Boolean} returnEl (optional) True to return a Ext.core.Element object instead of DOM node + * @return {HTMLElement} The matching DOM node (or null if no match was found) + */ + findParent : function(simpleSelector, maxDepth, returnEl) { + var p = this.dom, + b = document.body, + depth = 0, + stopEl; + + maxDepth = maxDepth || 50; + if (isNaN(maxDepth)) { + stopEl = Ext.getDom(maxDepth); + maxDepth = Number.MAX_VALUE; + } + while (p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl) { + if (Ext.DomQuery.is(p, simpleSelector)) { + return returnEl ? Ext.get(p) : p; + } + depth++; + p = p.parentNode; + } + return null; + }, + + /** + * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child) + * @param {String} selector The simple selector to test + * @param {Number/Mixed} maxDepth (optional) The max depth to + search as a number or element (defaults to 10 || document.body) + * @param {Boolean} returnEl (optional) True to return a Ext.core.Element object instead of DOM node + * @return {HTMLElement} The matching DOM node (or null if no match was found) + */ + findParentNode : function(simpleSelector, maxDepth, returnEl) { + var p = Ext.fly(this.dom.parentNode, '_internal'); + return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null; + }, + + /** + * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child). + * This is a shortcut for findParentNode() that always returns an Ext.core.Element. + * @param {String} selector The simple selector to test + * @param {Number/Mixed} maxDepth (optional) The max depth to + search as a number or element (defaults to 10 || document.body) + * @return {Ext.core.Element} The matching DOM node (or null if no match was found) + */ + up : function(simpleSelector, maxDepth) { + return this.findParentNode(simpleSelector, maxDepth, true); + }, + + /** + * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id). + * @param {String} selector The CSS selector + * @return {CompositeElement/CompositeElement} The composite element + */ + select : function(selector) { + return Ext.core.Element.select(selector, false, this.dom); + }, + + /** + * Selects child nodes based on the passed CSS selector (the selector should not contain an id). + * @param {String} selector The CSS selector + * @return {Array} An array of the matched nodes + */ + query : function(selector) { + return Ext.DomQuery.select(selector, this.dom); + }, + + /** + * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id). + * @param {String} selector The CSS selector + * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.core.Element (defaults to false) + * @return {HTMLElement/Ext.core.Element} The child Ext.core.Element (or DOM node if returnDom = true) + */ + down : function(selector, returnDom) { + var n = Ext.DomQuery.selectNode(selector, this.dom); + return returnDom ? n : Ext.get(n); + }, + + /** + * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id). + * @param {String} selector The CSS selector + * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.core.Element (defaults to false) + * @return {HTMLElement/Ext.core.Element} The child Ext.core.Element (or DOM node if returnDom = true) + */ + child : function(selector, returnDom) { + var node, + me = this, + id; + id = Ext.get(me).id; + // Escape . or : + id = id.replace(/[\.:]/g, "\\$0"); + node = Ext.DomQuery.selectNode('#' + id + " > " + selector, me.dom); + return returnDom ? node : Ext.get(node); + }, + + /** + * Gets the parent node for this element, optionally chaining up trying to match a selector + * @param {String} selector (optional) Find a parent node that matches the passed simple selector + * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element + * @return {Ext.core.Element/HTMLElement} The parent node or null + */ + parent : function(selector, returnDom) { + return this.matchNode('parentNode', 'parentNode', selector, returnDom); + }, + + /** + * Gets the next sibling, skipping text nodes + * @param {String} selector (optional) Find the next sibling that matches the passed simple selector + * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element + * @return {Ext.core.Element/HTMLElement} The next sibling or null + */ + next : function(selector, returnDom) { + return this.matchNode('nextSibling', 'nextSibling', selector, returnDom); + }, + + /** + * Gets the previous sibling, skipping text nodes + * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector + * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element + * @return {Ext.core.Element/HTMLElement} The previous sibling or null + */ + prev : function(selector, returnDom) { + return this.matchNode('previousSibling', 'previousSibling', selector, returnDom); + }, + + + /** + * Gets the first child, skipping text nodes + * @param {String} selector (optional) Find the next sibling that matches the passed simple selector + * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element + * @return {Ext.core.Element/HTMLElement} The first child or null + */ + first : function(selector, returnDom) { + return this.matchNode('nextSibling', 'firstChild', selector, returnDom); + }, + + /** + * Gets the last child, skipping text nodes + * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector + * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element + * @return {Ext.core.Element/HTMLElement} The last child or null + */ + last : function(selector, returnDom) { + return this.matchNode('previousSibling', 'lastChild', selector, returnDom); + }, + + matchNode : function(dir, start, selector, returnDom) { + if (!this.dom) { + return null; + } + + var n = this.dom[start]; + while (n) { + if (n.nodeType == 1 && (!selector || Ext.DomQuery.is(n, selector))) { + return !returnDom ? Ext.get(n) : n; + } + n = n[dir]; + } + return null; + } +}); + +/** + * @class Ext.core.Element + */ +Ext.core.Element.addMethods({ + /** + * Appends the passed element(s) to this element + * @param {String/HTMLElement/Array/Element/CompositeElement} el + * @return {Ext.core.Element} this + */ + appendChild : function(el) { + return Ext.get(el).appendTo(this); + }, + + /** + * Appends this element to the passed element + * @param {Mixed} el The new parent element + * @return {Ext.core.Element} this + */ + appendTo : function(el) { + Ext.getDom(el).appendChild(this.dom); + return this; + }, + + /** + * Inserts this element before the passed element in the DOM + * @param {Mixed} el The element before which this element will be inserted + * @return {Ext.core.Element} this + */ + insertBefore : function(el) { + el = Ext.getDom(el); + el.parentNode.insertBefore(this.dom, el); + return this; + }, + + /** + * Inserts this element after the passed element in the DOM + * @param {Mixed} el The element to insert after + * @return {Ext.core.Element} this + */ + insertAfter : function(el) { + el = Ext.getDom(el); + el.parentNode.insertBefore(this.dom, el.nextSibling); + return this; + }, + + /** + * Inserts (or creates) an element (or DomHelper config) as the first child of this element + * @param {Mixed/Object} el The id or element to insert or a DomHelper config to create and insert + * @return {Ext.core.Element} The new child + */ + insertFirst : function(el, returnDom) { + el = el || {}; + if (el.nodeType || el.dom || typeof el == 'string') { // element + el = Ext.getDom(el); + this.dom.insertBefore(el, this.dom.firstChild); + return !returnDom ? Ext.get(el) : el; + } + else { // dh config + return this.createChild(el, this.dom.firstChild, returnDom); + } + }, + + /** + * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element + * @param {Mixed/Object/Array} el The id, element to insert or a DomHelper config to create and insert *or* an array of any of those. + * @param {String} where (optional) 'before' or 'after' defaults to before + * @param {Boolean} returnDom (optional) True to return the .;ll;l,raw DOM element instead of Ext.core.Element + * @return {Ext.core.Element} The inserted Element. If an array is passed, the last inserted element is returned. + */ + insertSibling: function(el, where, returnDom){ + var me = this, rt, + isAfter = (where || 'before').toLowerCase() == 'after', + insertEl; + + if(Ext.isArray(el)){ + insertEl = me; + Ext.each(el, function(e) { + rt = Ext.fly(insertEl, '_internal').insertSibling(e, where, returnDom); + if(isAfter){ + insertEl = rt; + } + }); + return rt; + } + + el = el || {}; + + if(el.nodeType || el.dom){ + rt = me.dom.parentNode.insertBefore(Ext.getDom(el), isAfter ? me.dom.nextSibling : me.dom); + if (!returnDom) { + rt = Ext.get(rt); + } + }else{ + if (isAfter && !me.dom.nextSibling) { + rt = Ext.core.DomHelper.append(me.dom.parentNode, el, !returnDom); + } else { + rt = Ext.core.DomHelper[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom); + } + } + return rt; + }, + + /** + * Replaces the passed element with this element + * @param {Mixed} el The element to replace + * @return {Ext.core.Element} this + */ + replace : function(el) { + el = Ext.get(el); + this.insertBefore(el); + el.remove(); + return this; + }, + + /** + * Replaces this element with the passed element + * @param {Mixed/Object} el The new element or a DomHelper config of an element to create + * @return {Ext.core.Element} this + */ + replaceWith: function(el){ + var me = this; + + if(el.nodeType || el.dom || typeof el == 'string'){ + el = Ext.get(el); + me.dom.parentNode.insertBefore(el, me.dom); + }else{ + el = Ext.core.DomHelper.insertBefore(me.dom, el); + } + + delete Ext.cache[me.id]; + Ext.removeNode(me.dom); + me.id = Ext.id(me.dom = el); + Ext.core.Element.addToCache(me.isFlyweight ? new Ext.core.Element(me.dom) : me); + return me; + }, + + /** + * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element. + * @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be + * automatically generated with the specified attributes. + * @param {HTMLElement} insertBefore (optional) a child element of this element + * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element + * @return {Ext.core.Element} The new child element + */ + createChild : function(config, insertBefore, returnDom) { + config = config || {tag:'div'}; + if (insertBefore) { + return Ext.core.DomHelper.insertBefore(insertBefore, config, returnDom !== true); + } + else { + return Ext.core.DomHelper[!this.dom.firstChild ? 'insertFirst' : 'append'](this.dom, config, returnDom !== true); + } + }, + + /** + * Creates and wraps this element with another element + * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div + * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.core.Element + * @return {HTMLElement/Element} The newly created wrapper element + */ + wrap : function(config, returnDom) { + var newEl = Ext.core.DomHelper.insertBefore(this.dom, config || {tag: "div"}, !returnDom), + d = newEl.dom || newEl; + + d.appendChild(this.dom); + return newEl; + }, + + /** + * Inserts an html fragment into this element + * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd. + * @param {String} html The HTML fragment + * @param {Boolean} returnEl (optional) True to return an Ext.core.Element (defaults to false) + * @return {HTMLElement/Ext.core.Element} The inserted node (or nearest related if more than 1 inserted) + */ + insertHtml : function(where, html, returnEl) { + var el = Ext.core.DomHelper.insertHtml(where, this.dom, html); + return returnEl ? Ext.get(el) : el; + } +}); + +/** + * @class Ext.core.Element + */ +(function(){ + Ext.core.Element.boxMarkup = '
+// change the height to 200px and animate with default configuration
+Ext.fly('elementId').setHeight(200, true);
+
+// change the height to 150px and animate with a custom configuration
+Ext.fly('elId').setHeight(150, {
+ duration : .5, // animation will have a duration of .5 seconds
+ // will change the content to "finished"
+ callback: function(){ this.{@link #update}("finished"); }
+});
+ *
+ * @param {Mixed} height The new height. This may be one of:Wraps the specified element with a special 9 element markup/CSS block that renders by default as + * a gray container with a gradient background, rounded corners and a 4-way shadow.
+ *This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button}, + * {@link Ext.panel.Panel} when {@link Ext.panel.Panel#frame frame=true}, {@link Ext.window.Window}). The markup + * is of this form:
+ *
+ Ext.core.Element.boxMarkup =
+ '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
+ <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
+ <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
+ *
+ * Example usage:
+ *
+ // Basic box wrap
+ Ext.get("foo").boxWrap();
+
+ // You can also add a custom class and use CSS inheritance rules to customize the box look.
+ // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
+ // for how to create a custom box wrap style.
+ Ext.get("foo").boxWrap().addCls("x-box-blue");
+ *
+ * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
+ * (defaults to 'x-box'). Note that there are a number of CSS rules that are dependent on
+ * this name to make the overall effect work, so if you supply an alternate base class, make sure you
+ * also supply all of the necessary rules.
+ * @return {Ext.core.Element} The outermost wrapping element of the created box structure.
+ */
+ boxWrap : function(cls){
+ cls = cls || Ext.baseCSSPrefix + 'box';
+ var el = Ext.get(this.insertHtml("beforeBegin", "{width: widthValue, height: heightValue}
.Returns the dimensions of the element available to lay content out in.
+ *
If the element (or any ancestor element) has CSS style display : none
, the dimensions will be zero.
+ var vpSize = Ext.getBody().getViewSize();
+
+ // all Windows created afterwards will have a default value of 90% height and 95% width
+ Ext.Window.override({
+ width: vpSize.width * 0.9,
+ height: vpSize.height * 0.95
+ });
+ // To handle window resizing you would have to hook onto onWindowResize.
+ *
+ *
+ * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
+ * To obtain the size including scrollbars, use getStyleSize
+ *
+ * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
+ */
+
+ getViewSize : function(){
+ var me = this,
+ dom = me.dom,
+ isDoc = (dom == Ext.getDoc().dom || dom == Ext.getBody().dom),
+ style, overflow, ret;
+
+ // If the body, use static methods
+ if (isDoc) {
+ ret = {
+ width : Ext.core.Element.getViewWidth(),
+ height : Ext.core.Element.getViewHeight()
+ };
+
+ // Else use clientHeight/clientWidth
+ }
+ else {
+ // IE 6 & IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
+ // We will put the overflow back to it's original value when we are done measuring.
+ if (Ext.isIE6 || Ext.isIEQuirks) {
+ style = dom.style;
+ overflow = style.overflow;
+ me.setStyle({ overflow: 'hidden'});
+ }
+ ret = {
+ width : dom.clientWidth,
+ height : dom.clientHeight
+ };
+ if (Ext.isIE6 || Ext.isIEQuirks) {
+ me.setStyle({ overflow: overflow });
+ }
+ }
+ return ret;
+ },
+
+ /**
+ * Returns the dimensions of the element available to lay content out in.
+ * + * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth. + * To obtain the size excluding scrollbars, use getViewSize + * + * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc. + */ + + getStyleSize : function(){ + var me = this, + doc = document, + d = this.dom, + isDoc = (d == doc || d == doc.body), + s = d.style, + w, h; + + // If the body, use static methods + if (isDoc) { + return { + width : Ext.core.Element.getViewWidth(), + height : Ext.core.Element.getViewHeight() + }; + } + // Use Styles if they are set + if(s.width && s.width != 'auto'){ + w = parseFloat(s.width); + if(me.isBorderBox()){ + w -= me.getFrameWidth('lr'); + } + } + // Use Styles if they are set + if(s.height && s.height != 'auto'){ + h = parseFloat(s.height); + if(me.isBorderBox()){ + h -= me.getFrameWidth('tb'); + } + } + // Use getWidth/getHeight if style not set. + return {width: w || me.getWidth(true), height: h || me.getHeight(true)}; + }, + + /** + * Returns the size of the element. + * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding + * @return {Object} An object containing the element's size {width: (element width), height: (element height)} + */ + getSize : function(contentSize){ + return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)}; + }, + + /** + * Forces the browser to repaint this element + * @return {Ext.core.Element} this + */ + repaint : function(){ + var dom = this.dom; + this.addCls(Ext.baseCSSPrefix + 'repaint'); + setTimeout(function(){ + Ext.fly(dom).removeCls(Ext.baseCSSPrefix + 'repaint'); + }, 1); + return this; + }, + + /** + * Disables text selection for this element (normalized across browsers) + * @return {Ext.core.Element} this + */ + unselectable : function(){ + var me = this; + me.dom.unselectable = "on"; + + me.swallowEvent("selectstart", true); + me.applyStyles("-moz-user-select:none;-khtml-user-select:none;"); + me.addCls(Ext.baseCSSPrefix + 'unselectable'); + + return me; + }, + + /** + * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed, + * then it returns the calculated width of the sides (see getPadding) + * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides + * @return {Object/Number} + */ + getMargin : function(side){ + var me = this, + hash = {t:"top", l:"left", r:"right", b: "bottom"}, + o = {}, + key; + + if (!side) { + for (key in me.margins){ + o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0; + } + return o; + } else { + return me.addStyles.call(me, side, me.margins); + } + } + }); +})(); +/** + * @class Ext.core.Element + */ +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element + * @static + * @type Number + */ +Ext.core.Element.VISIBILITY = 1; +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element + * @static + * @type Number + */ +Ext.core.Element.DISPLAY = 2; + +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen) + * to hide element. + * @static + * @type Number + */ +Ext.core.Element.OFFSETS = 3; + + +Ext.core.Element.ASCLASS = 4; + +/** + * Defaults to 'x-hide-nosize' + * @static + * @type String + */ +Ext.core.Element.visibilityCls = Ext.baseCSSPrefix + 'hide-nosize'; + +Ext.core.Element.addMethods(function(){ + var El = Ext.core.Element, + OPACITY = "opacity", + VISIBILITY = "visibility", + DISPLAY = "display", + HIDDEN = "hidden", + OFFSETS = "offsets", + ASCLASS = "asclass", + NONE = "none", + NOSIZE = 'nosize', + ORIGINALDISPLAY = 'originalDisplay', + VISMODE = 'visibilityMode', + ISVISIBLE = 'isVisible', + data = El.data, + getDisplay = function(dom){ + var d = data(dom, ORIGINALDISPLAY); + if(d === undefined){ + data(dom, ORIGINALDISPLAY, d = ''); + } + return d; + }, + getVisMode = function(dom){ + var m = data(dom, VISMODE); + if(m === undefined){ + data(dom, VISMODE, m = 1); + } + return m; + }; + + return { + /** + * The element's default display mode (defaults to "") + * @type String + */ + originalDisplay : "", + visibilityMode : 1, + + /** + * Sets the element's visibility mode. When setVisible() is called it + * will use this to determine whether to set the visibility or the display property. + * @param {Number} visMode Ext.core.Element.VISIBILITY or Ext.core.Element.DISPLAY + * @return {Ext.core.Element} this + */ + setVisibilityMode : function(visMode){ + data(this.dom, VISMODE, visMode); + return this; + }, + + /** + * Checks whether the element is currently visible using both visibility and display properties. + * @return {Boolean} True if the element is currently visible, else false + */ + isVisible : function() { + var me = this, + dom = me.dom, + visible = data(dom, ISVISIBLE); + + if(typeof visible == 'boolean'){ //return the cached value if registered + return visible; + } + //Determine the current state based on display states + visible = !me.isStyle(VISIBILITY, HIDDEN) && + !me.isStyle(DISPLAY, NONE) && + !((getVisMode(dom) == El.ASCLASS) && me.hasCls(me.visibilityCls || El.visibilityCls)); + + data(dom, ISVISIBLE, visible); + return visible; + }, + + /** + * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use + * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property. + * @param {Boolean} visible Whether the element is visible + * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object + * @return {Ext.core.Element} this + */ + setVisible : function(visible, animate){ + var me = this, isDisplay, isVisibility, isOffsets, isNosize, + dom = me.dom, + visMode = getVisMode(dom); + + + // hideMode string override + if (typeof animate == 'string'){ + switch (animate) { + case DISPLAY: + visMode = El.DISPLAY; + break; + case VISIBILITY: + visMode = El.VISIBILITY; + break; + case OFFSETS: + visMode = El.OFFSETS; + break; + case NOSIZE: + case ASCLASS: + visMode = El.ASCLASS; + break; + } + me.setVisibilityMode(visMode); + animate = false; + } + + if (!animate || !me.anim) { + if(visMode == El.ASCLASS ){ + + me[visible?'removeCls':'addCls'](me.visibilityCls || El.visibilityCls); + + } else if (visMode == El.DISPLAY){ + + return me.setDisplayed(visible); + + } else if (visMode == El.OFFSETS){ + + if (!visible){ + // Remember position for restoring, if we are not already hidden by offsets. + if (!me.hideModeStyles) { + me.hideModeStyles = { + position: me.getStyle('position'), + top: me.getStyle('top'), + left: me.getStyle('left') + }; + } + me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'}); + } + + // Only "restore" as position if we have actually been hidden using offsets. + // Calling setVisible(true) on a positioned element should not reposition it. + else if (me.hideModeStyles) { + me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''}); + delete me.hideModeStyles; + } + + }else{ + me.fixDisplay(); + // Show by clearing visibility style. Explicitly setting to "visible" overrides parent visibility setting. + dom.style.visibility = visible ? '' : HIDDEN; + } + }else{ + // closure for composites + if(visible){ + me.setOpacity(0.01); + me.setVisible(true); + } + if (!Ext.isObject(animate)) { + animate = { + duration: 350, + easing: 'ease-in' + }; + } + me.animate(Ext.applyIf({ + callback: function() { + visible || me.setVisible(false).setOpacity(1); + }, + to: { + opacity: (visible) ? 1 : 0 + } + }, animate)); + } + data(dom, ISVISIBLE, visible); //set logical visibility state + return me; + }, + + + /** + * @private + * Determine if the Element has a relevant height and width available based + * upon current logical visibility state + */ + hasMetrics : function(){ + var dom = this.dom; + return this.isVisible() || (getVisMode(dom) == El.OFFSETS) || (getVisMode(dom) == El.VISIBILITY); + }, + + /** + * Toggles the element's visibility or display, depending on visibility mode. + * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object + * @return {Ext.core.Element} this + */ + toggle : function(animate){ + var me = this; + me.setVisible(!me.isVisible(), me.anim(animate)); + return me; + }, + + /** + * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true. + * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly. + * @return {Ext.core.Element} this + */ + setDisplayed : function(value) { + if(typeof value == "boolean"){ + value = value ? getDisplay(this.dom) : NONE; + } + this.setStyle(DISPLAY, value); + return this; + }, + + // private + fixDisplay : function(){ + var me = this; + if (me.isStyle(DISPLAY, NONE)) { + me.setStyle(VISIBILITY, HIDDEN); + me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default + if (me.isStyle(DISPLAY, NONE)) { // if that fails, default to block + me.setStyle(DISPLAY, "block"); + } + } + }, + + /** + * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}. + * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object + * @return {Ext.core.Element} this + */ + hide : function(animate){ + // hideMode override + if (typeof animate == 'string'){ + this.setVisible(false, animate); + return this; + } + this.setVisible(false, this.anim(animate)); + return this; + }, + + /** + * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}. + * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object + * @return {Ext.core.Element} this + */ + show : function(animate){ + // hideMode override + if (typeof animate == 'string'){ + this.setVisible(true, animate); + return this; + } + this.setVisible(true, this.anim(animate)); + return this; + } + }; +}()); +/** + * @class Ext.core.Element + */ +Ext.applyIf(Ext.core.Element.prototype, { + // @private override base Ext.util.Animate mixin for animate for backwards compatibility + animate: function(config) { + var me = this; + if (!me.id) { + me = Ext.get(me.dom); + } + if (Ext.fx.Manager.hasFxBlock(me.id)) { + return me; + } + Ext.fx.Manager.queueFx(Ext.create('Ext.fx.Anim', me.anim(config))); + return this; + }, + + // @private override base Ext.util.Animate mixin for animate for backwards compatibility + anim: function(config) { + if (!Ext.isObject(config)) { + return (config) ? {} : false; + } + + var me = this, + duration = config.duration || Ext.fx.Anim.prototype.duration, + easing = config.easing || 'ease', + animConfig; + + if (config.stopAnimation) { + me.stopAnimation(); + } + + Ext.applyIf(config, Ext.fx.Manager.getFxDefaults(me.id)); + + // Clear any 'paused' defaults. + Ext.fx.Manager.setFxDefaults(me.id, { + delay: 0 + }); + + animConfig = { + target: me, + remove: config.remove, + alternate: config.alternate || false, + duration: duration, + easing: easing, + callback: config.callback, + listeners: config.listeners, + iterations: config.iterations || 1, + scope: config.scope, + block: config.block, + concurrent: config.concurrent, + delay: config.delay || 0, + paused: true, + keyframes: config.keyframes, + from: config.from || {}, + to: Ext.apply({}, config) + }; + Ext.apply(animConfig.to, config.to); + + // Anim API properties - backward compat + delete animConfig.to.to; + delete animConfig.to.from; + delete animConfig.to.remove; + delete animConfig.to.alternate; + delete animConfig.to.keyframes; + delete animConfig.to.iterations; + delete animConfig.to.listeners; + delete animConfig.to.target; + delete animConfig.to.paused; + delete animConfig.to.callback; + delete animConfig.to.scope; + delete animConfig.to.duration; + delete animConfig.to.easing; + delete animConfig.to.concurrent; + delete animConfig.to.block; + delete animConfig.to.stopAnimation; + delete animConfig.to.delay; + return animConfig; + }, + + /** + * Slides the element into view. An anchor point can be optionally passed to set the point of + * origin for the slide effect. This function automatically handles wrapping the element with + * a fixed-size container if needed. See the Fx class overview for valid anchor point options. + * Usage: + *
+// default: slide the element in from the top
+el.slideIn();
+
+// custom: slide the element in from the right with a 2-second duration
+el.slideIn('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideIn('t', {
+ easing: 'easeOut',
+ duration: 500
+});
+
+ * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.core.Element} The Element
+ */
+ slideIn: function(anchor, obj, slideOut) {
+ var me = this,
+ elStyle = me.dom.style,
+ beforeAnim, wrapAnim;
+
+ anchor = anchor || "t";
+ obj = obj || {};
+
+ beforeAnim = function() {
+ var animScope = this,
+ listeners = obj.listeners,
+ box, position, restoreSize, wrap, anim;
+
+ if (!slideOut) {
+ me.fixDisplay();
+ }
+
+ box = me.getBox();
+ if ((anchor == 't' || anchor == 'b') && box.height == 0) {
+ box.height = me.dom.scrollHeight;
+ }
+ else if ((anchor == 'l' || anchor == 'r') && box.width == 0) {
+ box.width = me.dom.scrollWidth;
+ }
+
+ position = me.getPositioning();
+ me.setSize(box.width, box.height);
+
+ wrap = me.wrap({
+ style: {
+ visibility: slideOut ? 'visible' : 'hidden'
+ }
+ });
+ wrap.setPositioning(position);
+ if (wrap.isStyle('position', 'static')) {
+ wrap.position('relative');
+ }
+ me.clearPositioning('auto');
+ wrap.clip();
+
+ // This element is temporarily positioned absolute within its wrapper.
+ // Restore to its default, CSS-inherited visibility setting.
+ // We cannot explicitly poke visibility:visible into its style because that overrides the visibility of the wrap.
+ me.setStyle({
+ visibility: '',
+ position: 'absolute'
+ });
+ if (slideOut) {
+ wrap.setSize(box.width, box.height);
+ }
+
+ switch (anchor) {
+ case 't':
+ anim = {
+ from: {
+ width: box.width + 'px',
+ height: '0px'
+ },
+ to: {
+ width: box.width + 'px',
+ height: box.height + 'px'
+ }
+ };
+ elStyle.bottom = '0px';
+ break;
+ case 'l':
+ anim = {
+ from: {
+ width: '0px',
+ height: box.height + 'px'
+ },
+ to: {
+ width: box.width + 'px',
+ height: box.height + 'px'
+ }
+ };
+ elStyle.right = '0px';
+ break;
+ case 'r':
+ anim = {
+ from: {
+ x: box.x + box.width,
+ width: '0px',
+ height: box.height + 'px'
+ },
+ to: {
+ x: box.x,
+ width: box.width + 'px',
+ height: box.height + 'px'
+ }
+ };
+ break;
+ case 'b':
+ anim = {
+ from: {
+ y: box.y + box.height,
+ width: box.width + 'px',
+ height: '0px'
+ },
+ to: {
+ y: box.y,
+ width: box.width + 'px',
+ height: box.height + 'px'
+ }
+ };
+ break;
+ case 'tl':
+ anim = {
+ from: {
+ x: box.x,
+ y: box.y,
+ width: '0px',
+ height: '0px'
+ },
+ to: {
+ width: box.width + 'px',
+ height: box.height + 'px'
+ }
+ };
+ elStyle.bottom = '0px';
+ elStyle.right = '0px';
+ break;
+ case 'bl':
+ anim = {
+ from: {
+ x: box.x + box.width,
+ width: '0px',
+ height: '0px'
+ },
+ to: {
+ x: box.x,
+ width: box.width + 'px',
+ height: box.height + 'px'
+ }
+ };
+ elStyle.right = '0px';
+ break;
+ case 'br':
+ anim = {
+ from: {
+ x: box.x + box.width,
+ y: box.y + box.height,
+ width: '0px',
+ height: '0px'
+ },
+ to: {
+ x: box.x,
+ y: box.y,
+ width: box.width + 'px',
+ height: box.height + 'px'
+ }
+ };
+ break;
+ case 'tr':
+ anim = {
+ from: {
+ y: box.y + box.height,
+ width: '0px',
+ height: '0px'
+ },
+ to: {
+ y: box.y,
+ width: box.width + 'px',
+ height: box.height + 'px'
+ }
+ };
+ elStyle.bottom = '0px';
+ break;
+ }
+
+ wrap.show();
+ wrapAnim = Ext.apply({}, obj);
+ delete wrapAnim.listeners;
+ wrapAnim = Ext.create('Ext.fx.Anim', Ext.applyIf(wrapAnim, {
+ target: wrap,
+ duration: 500,
+ easing: 'ease-out',
+ from: slideOut ? anim.to : anim.from,
+ to: slideOut ? anim.from : anim.to
+ }));
+
+ // In the absence of a callback, this listener MUST be added first
+ wrapAnim.on('afteranimate', function() {
+ if (slideOut) {
+ me.setPositioning(position);
+ if (obj.useDisplay) {
+ me.setDisplayed(false);
+ } else {
+ me.hide();
+ }
+ }
+ else {
+ me.clearPositioning();
+ me.setPositioning(position);
+ }
+ if (wrap.dom) {
+ wrap.dom.parentNode.insertBefore(me.dom, wrap.dom);
+ wrap.remove();
+ }
+ me.setSize(box.width, box.height);
+ animScope.end();
+ });
+ // Add configured listeners after
+ if (listeners) {
+ wrapAnim.on(listeners);
+ }
+ };
+
+ me.animate({
+ duration: obj.duration ? obj.duration * 2 : 1000,
+ listeners: {
+ beforeanimate: {
+ fn: beforeAnim
+ },
+ afteranimate: {
+ fn: function() {
+ if (wrapAnim && wrapAnim.running) {
+ wrapAnim.end();
+ }
+ }
+ }
+ }
+ });
+ return me;
+ },
+
+
+ /**
+ * Slides the element out of view. An anchor point can be optionally passed to set the end point
+ * for the slide effect. When the effect is completed, the element will be hidden (visibility =
+ * 'hidden') but block elements will still take up space in the document. The element must be removed
+ * from the DOM using the 'remove' config option if desired. This function automatically handles
+ * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
+ * Usage:
+ *
+// default: slide the element out to the top
+el.slideOut();
+
+// custom: slide the element out to the right with a 2-second duration
+el.slideOut('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideOut('t', {
+ easing: 'easeOut',
+ duration: 500,
+ remove: false,
+ useDisplay: false
+});
+
+ * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.core.Element} The Element
+ */
+ slideOut: function(anchor, o) {
+ return this.slideIn(anchor, o, true);
+ },
+
+ /**
+ * Fades the element out while slowly expanding it in all directions. When the effect is completed, the
+ * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
+ * Usage:
+ *
+// default
+el.puff();
+
+// common config options shown with default values
+el.puff({
+ easing: 'easeOut',
+ duration: 500,
+ useDisplay: false
+});
+
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.core.Element} The Element
+ */
+
+ puff: function(obj) {
+ var me = this,
+ beforeAnim;
+ obj = Ext.applyIf(obj || {}, {
+ easing: 'ease-out',
+ duration: 500,
+ useDisplay: false
+ });
+
+ beforeAnim = function() {
+ me.clearOpacity();
+ me.show();
+
+ var box = me.getBox(),
+ fontSize = me.getStyle('fontSize'),
+ position = me.getPositioning();
+ this.to = {
+ width: box.width * 2,
+ height: box.height * 2,
+ x: box.x - (box.width / 2),
+ y: box.y - (box.height /2),
+ opacity: 0,
+ fontSize: '200%'
+ };
+ this.on('afteranimate',function() {
+ if (me.dom) {
+ if (obj.useDisplay) {
+ me.setDisplayed(false);
+ } else {
+ me.hide();
+ }
+ me.clearOpacity();
+ me.setPositioning(position);
+ me.setStyle({fontSize: fontSize});
+ }
+ });
+ };
+
+ me.animate({
+ duration: obj.duration,
+ easing: obj.easing,
+ listeners: {
+ beforeanimate: {
+ fn: beforeAnim
+ }
+ }
+ });
+ return me;
+ },
+
+ /**
+ * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
+ * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
+ * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
+ * Usage:
+ *
+// default
+el.switchOff();
+
+// all config options shown with default values
+el.switchOff({
+ easing: 'easeIn',
+ duration: .3,
+ remove: false,
+ useDisplay: false
+});
+
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.core.Element} The Element
+ */
+ switchOff: function(obj) {
+ var me = this,
+ beforeAnim;
+
+ obj = Ext.applyIf(obj || {}, {
+ easing: 'ease-in',
+ duration: 500,
+ remove: false,
+ useDisplay: false
+ });
+
+ beforeAnim = function() {
+ var animScope = this,
+ size = me.getSize(),
+ xy = me.getXY(),
+ keyframe, position;
+ me.clearOpacity();
+ me.clip();
+ position = me.getPositioning();
+
+ keyframe = Ext.create('Ext.fx.Animator', {
+ target: me,
+ duration: obj.duration,
+ easing: obj.easing,
+ keyframes: {
+ 33: {
+ opacity: 0.3
+ },
+ 66: {
+ height: 1,
+ y: xy[1] + size.height / 2
+ },
+ 100: {
+ width: 1,
+ x: xy[0] + size.width / 2
+ }
+ }
+ });
+ keyframe.on('afteranimate', function() {
+ if (obj.useDisplay) {
+ me.setDisplayed(false);
+ } else {
+ me.hide();
+ }
+ me.clearOpacity();
+ me.setPositioning(position);
+ me.setSize(size);
+ animScope.end();
+ });
+ };
+ me.animate({
+ duration: (obj.duration * 2),
+ listeners: {
+ beforeanimate: {
+ fn: beforeAnim
+ }
+ }
+ });
+ return me;
+ },
+
+ /**
+ * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
+ * Usage:
+
+// default: a single light blue ripple
+el.frame();
+
+// custom: 3 red ripples lasting 3 seconds total
+el.frame("#ff0000", 3, { duration: 3 });
+
+// common config options shown with default values
+el.frame("#C3DAF9", 1, {
+ duration: 1 //duration of each individual ripple.
+ // Note: Easing is not configurable and will be ignored if included
+});
+
+ * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
+ * @param {Number} count (optional) The number of ripples to display (defaults to 1)
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.core.Element} The Element
+ */
+ frame : function(color, count, obj){
+ var me = this,
+ beforeAnim;
+
+ color = color || '#C3DAF9';
+ count = count || 1;
+ obj = obj || {};
+
+ beforeAnim = function() {
+ me.show();
+ var animScope = this,
+ box = me.getBox(),
+ proxy = Ext.getBody().createChild({
+ style: {
+ position : 'absolute',
+ 'pointer-events': 'none',
+ 'z-index': 35000,
+ border : '0px solid ' + color
+ }
+ }),
+ proxyAnim;
+ proxyAnim = Ext.create('Ext.fx.Anim', {
+ target: proxy,
+ duration: obj.duration || 1000,
+ iterations: count,
+ from: {
+ top: box.y,
+ left: box.x,
+ borderWidth: 0,
+ opacity: 1,
+ height: box.height,
+ width: box.width
+ },
+ to: {
+ top: box.y - 20,
+ left: box.x - 20,
+ borderWidth: 10,
+ opacity: 0,
+ height: box.height + 40,
+ width: box.width + 40
+ }
+ });
+ proxyAnim.on('afteranimate', function() {
+ proxy.remove();
+ animScope.end();
+ });
+ };
+
+ me.animate({
+ duration: (obj.duration * 2) || 2000,
+ listeners: {
+ beforeanimate: {
+ fn: beforeAnim
+ }
+ }
+ });
+ return me;
+ },
+
+ /**
+ * Slides the element while fading it out of view. An anchor point can be optionally passed to set the
+ * ending point of the effect.
+ * Usage:
+ *
+// default: slide the element downward while fading out
+el.ghost();
+
+// custom: slide the element out to the right with a 2-second duration
+el.ghost('r', { duration: 2 });
+
+// common config options shown with default values
+el.ghost('b', {
+ easing: 'easeOut',
+ duration: 500
+});
+
+ * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.core.Element} The Element
+ */
+ ghost: function(anchor, obj) {
+ var me = this,
+ beforeAnim;
+
+ anchor = anchor || "b";
+ beforeAnim = function() {
+ var width = me.getWidth(),
+ height = me.getHeight(),
+ xy = me.getXY(),
+ position = me.getPositioning(),
+ to = {
+ opacity: 0
+ };
+ switch (anchor) {
+ case 't':
+ to.y = xy[1] - height;
+ break;
+ case 'l':
+ to.x = xy[0] - width;
+ break;
+ case 'r':
+ to.x = xy[0] + width;
+ break;
+ case 'b':
+ to.y = xy[1] + height;
+ break;
+ case 'tl':
+ to.x = xy[0] - width;
+ to.y = xy[1] - height;
+ break;
+ case 'bl':
+ to.x = xy[0] - width;
+ to.y = xy[1] + height;
+ break;
+ case 'br':
+ to.x = xy[0] + width;
+ to.y = xy[1] + height;
+ break;
+ case 'tr':
+ to.x = xy[0] + width;
+ to.y = xy[1] - height;
+ break;
+ }
+ this.to = to;
+ this.on('afteranimate', function () {
+ if (me.dom) {
+ me.hide();
+ me.clearOpacity();
+ me.setPositioning(position);
+ }
+ });
+ };
+
+ me.animate(Ext.applyIf(obj || {}, {
+ duration: 500,
+ easing: 'ease-out',
+ listeners: {
+ beforeanimate: {
+ fn: beforeAnim
+ }
+ }
+ }));
+ return me;
+ },
+
+ /**
+ * Highlights the Element by setting a color (applies to the background-color by default, but can be
+ * changed using the "attr" config option) and then fading back to the original color. If no original
+ * color is available, you should provide the "endColor" config option which will be cleared after the animation.
+ * Usage:
+
+// default: highlight background to yellow
+el.highlight();
+
+// custom: highlight foreground text to blue for 2 seconds
+el.highlight("0000ff", { attr: 'color', duration: 2 });
+
+// common config options shown with default values
+el.highlight("ffff9c", {
+ attr: "backgroundColor", //can be any valid CSS property (attribute) that supports a color value
+ endColor: (current color) or "ffffff",
+ easing: 'easeIn',
+ duration: 1000
+});
+
+ * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.core.Element} The Element
+ */
+ highlight: function(color, o) {
+ var me = this,
+ dom = me.dom,
+ from = {},
+ restore, to, attr, lns, event, fn;
+
+ o = o || {};
+ lns = o.listeners || {};
+ attr = o.attr || 'backgroundColor';
+ from[attr] = color || 'ffff9c';
+
+ if (!o.to) {
+ to = {};
+ to[attr] = o.endColor || me.getColor(attr, 'ffffff', '');
+ }
+ else {
+ to = o.to;
+ }
+
+ // Don't apply directly on lns, since we reference it in our own callbacks below
+ o.listeners = Ext.apply(Ext.apply({}, lns), {
+ beforeanimate: function() {
+ restore = dom.style[attr];
+ me.clearOpacity();
+ me.show();
+
+ event = lns.beforeanimate;
+ if (event) {
+ fn = event.fn || event;
+ return fn.apply(event.scope || lns.scope || window, arguments);
+ }
+ },
+ afteranimate: function() {
+ if (dom) {
+ dom.style[attr] = restore;
+ }
+
+ event = lns.afteranimate;
+ if (event) {
+ fn = event.fn || event;
+ fn.apply(event.scope || lns.scope || window, arguments);
+ }
+ }
+ });
+
+ me.animate(Ext.apply({}, o, {
+ duration: 1000,
+ easing: 'ease-in',
+ from: from,
+ to: to
+ }));
+ return me;
+ },
+
+ /**
+ * @deprecated 4.0
+ * Creates a pause before any subsequent queued effects begin. If there are
+ * no effects queued after the pause it will have no effect.
+ * Usage:
+
+el.pause(1);
+
+ * @param {Number} seconds The length of time to pause (in seconds)
+ * @return {Ext.Element} The Element
+ */
+ pause: function(ms) {
+ var me = this;
+ Ext.fx.Manager.setFxDefaults(me.id, {
+ delay: ms
+ });
+ return me;
+ },
+
+ /**
+ * Fade an element in (from transparent to opaque). The ending opacity can be specified
+ * using the {@link #endOpacity} config option.
+ * Usage:
+
+// default: fade in from opacity 0 to 100%
+el.fadeIn();
+
+// custom: fade in from opacity 0 to 75% over 2 seconds
+el.fadeIn({ endOpacity: .75, duration: 2});
+
+// common config options shown with default values
+el.fadeIn({
+ endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
+ easing: 'easeOut',
+ duration: 500
+});
+
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ fadeIn: function(o) {
+ this.animate(Ext.apply({}, o, {
+ opacity: 1
+ }));
+ return this;
+ },
+
+ /**
+ * Fade an element out (from opaque to transparent). The ending opacity can be specified
+ * using the {@link #endOpacity} config option. Note that IE may require
+ * {@link #useDisplay}:true in order to redisplay correctly.
+ * Usage:
+
+// default: fade out from the element's current opacity to 0
+el.fadeOut();
+
+// custom: fade out from the element's current opacity to 25% over 2 seconds
+el.fadeOut({ endOpacity: .25, duration: 2});
+
+// common config options shown with default values
+el.fadeOut({
+ endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
+ easing: 'easeOut',
+ duration: 500,
+ remove: false,
+ useDisplay: false
+});
+
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ fadeOut: function(o) {
+ this.animate(Ext.apply({}, o, {
+ opacity: 0
+ }));
+ return this;
+ },
+
+ /**
+ * @deprecated 4.0
+ * Animates the transition of an element's dimensions from a starting height/width
+ * to an ending height/width. This method is a convenience implementation of {@link #shift}.
+ * Usage:
+
+// change height and width to 100x100 pixels
+el.scale(100, 100);
+
+// common config options shown with default values. The height and width will default to
+// the element's existing values if passed as null.
+el.scale(
+ [element's width],
+ [element's height], {
+ easing: 'easeOut',
+ duration: .35
+ }
+);
+
+ * @param {Number} width The new width (pass undefined to keep the original width)
+ * @param {Number} height The new height (pass undefined to keep the original height)
+ * @param {Object} options (optional) Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ scale: function(w, h, o) {
+ this.animate(Ext.apply({}, o, {
+ width: w,
+ height: h
+ }));
+ return this;
+ },
+
+ /**
+ * @deprecated 4.0
+ * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
+ * Any of these properties not specified in the config object will not be changed. This effect
+ * requires that at least one new dimension, position or opacity setting must be passed in on
+ * the config object in order for the function to have any effect.
+ * Usage:
+
+// slide the element horizontally to x position 200 while changing the height and opacity
+el.shift({ x: 200, height: 50, opacity: .8 });
+
+// common config options shown with default values.
+el.shift({
+ width: [element's width],
+ height: [element's height],
+ x: [element's x position],
+ y: [element's y position],
+ opacity: [element's opacity],
+ easing: 'easeOut',
+ duration: .35
+});
+
+ * @param {Object} options Object literal with any of the Fx config options
+ * @return {Ext.Element} The Element
+ */
+ shift: function(config) {
+ this.animate(config);
+ return this;
+ }
+});
+
+/**
+ * @class Ext.core.Element
+ */
+Ext.applyIf(Ext.core.Element, {
+ unitRe: /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
+ camelRe: /(-[a-z])/gi,
+ opacityRe: /alpha\(opacity=(.*)\)/i,
+ cssRe: /([a-z0-9-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi,
+ propertyCache: {},
+ defaultUnit : "px",
+ borders: {l: 'border-left-width', r: 'border-right-width', t: 'border-top-width', b: 'border-bottom-width'},
+ paddings: {l: 'padding-left', r: 'padding-right', t: 'padding-top', b: 'padding-bottom'},
+ margins: {l: 'margin-left', r: 'margin-right', t: 'margin-top', b: 'margin-bottom'},
+
+ // Reference the prototype's version of the method. Signatures are identical.
+ addUnits : Ext.core.Element.prototype.addUnits,
+
+ /**
+ * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
+ * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
+ * @static
+ * @param {Number|String} box The encoded margins
+ * @return {Object} An object with margin sizes for top, right, bottom and left
+ */
+ parseBox : function(box) {
+ if (Ext.isObject(box)) {
+ return {
+ top: box.top || 0,
+ right: box.right || 0,
+ bottom: box.bottom || 0,
+ left: box.left || 0
+ };
+ } else {
+ if (typeof box != 'string') {
+ box = box.toString();
+ }
+ var parts = box.split(' '),
+ ln = parts.length;
+
+ if (ln == 1) {
+ parts[1] = parts[2] = parts[3] = parts[0];
+ }
+ else if (ln == 2) {
+ parts[2] = parts[0];
+ parts[3] = parts[1];
+ }
+ else if (ln == 3) {
+ parts[3] = parts[1];
+ }
+
+ return {
+ top :parseFloat(parts[0]) || 0,
+ right :parseFloat(parts[1]) || 0,
+ bottom:parseFloat(parts[2]) || 0,
+ left :parseFloat(parts[3]) || 0
+ };
+ }
+
+ },
+
+ /**
+ * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
+ * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
+ * @static
+ * @param {Number|String} box The encoded margins
+ * @param {String} units The type of units to add
+ * @return {String} An string with unitized (px if units is not specified) metrics for top, right, bottom and left
+ */
+ unitizeBox : function(box, units) {
+ var A = this.addUnits,
+ B = this.parseBox(box);
+
+ return A(B.top, units) + ' ' +
+ A(B.right, units) + ' ' +
+ A(B.bottom, units) + ' ' +
+ A(B.left, units);
+
+ },
+
+ // private
+ camelReplaceFn : function(m, a) {
+ return a.charAt(1).toUpperCase();
+ },
+
+ /**
+ * Normalizes CSS property keys from dash delimited to camel case JavaScript Syntax.
+ * For example:
+ * + * The sample code below would return an object with 2 properties, one + * for background-color and one for color.
+ *
+var css = 'background-color: red;color: blue; ';
+console.log(Ext.core.Element.parseStyles(css));
+ *
+ * @static
+ * @param {String} styles A CSS string
+ * @return {Object} styles
+ */
+ parseStyles: function(styles){
+ var out = {},
+ cssRe = this.cssRe,
+ matches;
+
+ if (styles) {
+ // Since we're using the g flag on the regex, we need to set the lastIndex.
+ // This automatically happens on some implementations, but not others, see:
+ // http://stackoverflow.com/questions/2645273/javascript-regular-expression-literal-persists-between-function-calls
+ // http://blog.stevenlevithan.com/archives/fixing-javascript-regexp
+ cssRe.lastIndex = 0;
+ while ((matches = cssRe.exec(styles))) {
+ out[matches[1]] = matches[2];
+ }
+ }
+ return out;
+ }
+});
+
+/**
+ * @class Ext.CompositeElementLite
+ * This class encapsulates a collection of DOM elements, providing methods to filter + * members, or to perform collective actions upon the whole set.
+ *Although they are not listed, this class supports all of the methods of {@link Ext.core.Element} and + * {@link Ext.fx.Anim}. The methods from these classes will be performed on all the elements in this collection.
+ * Example:
+var els = Ext.select("#some-el div.some-class");
+// or select directly from an existing element
+var el = Ext.get('some-el');
+el.select('div.some-class');
+
+els.setWidth(100); // all elements become 100 width
+els.hide(true); // all elements fade out and hide
+// or
+els.setWidth(100).hide(true);
+
+ */
+Ext.CompositeElementLite = function(els, root){
+ /**
+ * The Array of DOM elements which this CompositeElement encapsulates. Read-only.
+ *This will not usually be accessed in developers' code, but developers wishing + * to augment the capabilities of the CompositeElementLite class may use it when adding + * methods to the class.
+ *For example to add the nextAll
method to the class to add all
+ * following siblings of selected elements, the code would be
+Ext.override(Ext.CompositeElementLite, {
+ nextAll: function() {
+ var els = this.elements, i, l = els.length, n, r = [], ri = -1;
+
+// Loop through all elements in this Composite, accumulating
+// an Array of all siblings.
+ for (i = 0; i < l; i++) {
+ for (n = els[i].nextSibling; n; n = n.nextSibling) {
+ r[++ri] = n;
+ }
+ }
+
+// Add all found siblings to this Composite
+ return this.add(r);
+ }
+});
+ * @type Array
+ * @property elements
+ */
+ this.elements = [];
+ this.add(els, root);
+ this.el = new Ext.core.Element.Flyweight();
+};
+
+Ext.CompositeElementLite.prototype = {
+ isComposite: true,
+
+ // private
+ getElement : function(el){
+ // Set the shared flyweight dom property to the current element
+ var e = this.el;
+ e.dom = el;
+ e.id = el.id;
+ return e;
+ },
+
+ // private
+ transformElement : function(el){
+ return Ext.getDom(el);
+ },
+
+ /**
+ * Returns the number of elements in this Composite.
+ * @return Number
+ */
+ getCount : function(){
+ return this.elements.length;
+ },
+ /**
+ * Adds elements to this Composite object.
+ * @param {Mixed} els Either an Array of DOM elements to add, or another Composite object who's elements should be added.
+ * @return {CompositeElement} This Composite object.
+ */
+ add : function(els, root){
+ var me = this,
+ elements = me.elements;
+ if(!els){
+ return this;
+ }
+ if(typeof els == "string"){
+ els = Ext.core.Element.selectorFunction(els, root);
+ }else if(els.isComposite){
+ els = els.elements;
+ }else if(!Ext.isIterable(els)){
+ els = [els];
+ }
+
+ for(var i = 0, len = els.length; i < len; ++i){
+ elements.push(me.transformElement(els[i]));
+ }
+ return me;
+ },
+
+ invoke : function(fn, args){
+ var me = this,
+ els = me.elements,
+ len = els.length,
+ e,
+ i;
+
+ for(i = 0; i < len; i++) {
+ e = els[i];
+ if(e){
+ Ext.core.Element.prototype[fn].apply(me.getElement(e), args);
+ }
+ }
+ return me;
+ },
+ /**
+ * Returns a flyweight Element of the dom element object at the specified index
+ * @param {Number} index
+ * @return {Ext.core.Element}
+ */
+ item : function(index){
+ var me = this,
+ el = me.elements[index],
+ out = null;
+
+ if(el){
+ out = me.getElement(el);
+ }
+ return out;
+ },
+
+ // fixes scope with flyweight
+ addListener : function(eventName, handler, scope, opt){
+ var els = this.elements,
+ len = els.length,
+ i, e;
+
+ for(i = 0; iel
: Ext.core.Elementindex
: Numberthis
reference) in which the
+ * function is called. If not specified, this
will refer to the browser window.
+ * @param {Array} args (optional) The default Array of arguments.
+ */
+Ext.util.DelayedTask = function(fn, scope, args) {
+ var me = this,
+ id,
+ call = function() {
+ clearInterval(id);
+ id = null;
+ fn.apply(scope, args || []);
+ };
+
+ /**
+ * Cancels any pending timeout and queues a new one
+ * @param {Number} delay The milliseconds to delay
+ * @param {Function} newFn (optional) Overrides function passed to constructor
+ * @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
+ * is specified, this
will refer to the browser window.
+ * @param {Array} newArgs (optional) Overrides args passed to constructor
+ */
+ this.delay = function(delay, newFn, newScope, newArgs) {
+ me.cancel();
+ fn = newFn || fn;
+ scope = newScope || scope;
+ args = newArgs || args;
+ id = setInterval(call, delay);
+ };
+
+ /**
+ * Cancel the last queued timeout
+ */
+ this.cancel = function(){
+ if (id) {
+ clearInterval(id);
+ id = null;
+ }
+ };
+};
+Ext.require('Ext.util.DelayedTask', function() {
+
+ Ext.util.Event = Ext.extend(Object, (function() {
+ function createBuffered(handler, listener, o, scope) {
+ listener.task = new Ext.util.DelayedTask();
+ return function() {
+ listener.task.delay(o.buffer, handler, scope, Ext.Array.toArray(arguments));
+ };
+ }
+
+ function createDelayed(handler, listener, o, scope) {
+ return function() {
+ var task = new Ext.util.DelayedTask();
+ if (!listener.tasks) {
+ listener.tasks = [];
+ }
+ listener.tasks.push(task);
+ task.delay(o.delay || 10, handler, scope, Ext.Array.toArray(arguments));
+ };
+ }
+
+ function createSingle(handler, listener, o, scope) {
+ return function() {
+ listener.ev.removeListener(listener.fn, scope);
+ return handler.apply(scope, arguments);
+ };
+ }
+
+ return {
+ isEvent: true,
+
+ constructor: function(observable, name) {
+ this.name = name;
+ this.observable = observable;
+ this.listeners = [];
+ },
+
+ addListener: function(fn, scope, options) {
+ var me = this,
+ listener;
+ scope = scope || me.observable;
+
+
+ if (!me.isListening(fn, scope)) {
+ listener = me.createListener(fn, scope, options);
+ if (me.firing) {
+ // if we are currently firing this event, don't disturb the listener loop
+ me.listeners = me.listeners.slice(0);
+ }
+ me.listeners.push(listener);
+ }
+ },
+
+ createListener: function(fn, scope, o) {
+ o = o || {};
+ scope = scope || this.observable;
+
+ var listener = {
+ fn: fn,
+ scope: scope,
+ o: o,
+ ev: this
+ },
+ handler = fn;
+
+ // The order is important. The 'single' wrapper must be wrapped by the 'buffer' and 'delayed' wrapper
+ // because the event removal that the single listener does destroys the listener's DelayedTask(s)
+ if (o.single) {
+ handler = createSingle(handler, listener, o, scope);
+ }
+ if (o.delay) {
+ handler = createDelayed(handler, listener, o, scope);
+ }
+ if (o.buffer) {
+ handler = createBuffered(handler, listener, o, scope);
+ }
+
+ listener.fireFn = handler;
+ return listener;
+ },
+
+ findListener: function(fn, scope) {
+ var listeners = this.listeners,
+ i = listeners.length,
+ listener,
+ s;
+
+ while (i--) {
+ listener = listeners[i];
+ if (listener) {
+ s = listener.scope;
+ if (listener.fn == fn && (s == scope || s == this.observable)) {
+ return i;
+ }
+ }
+ }
+
+ return - 1;
+ },
+
+ isListening: function(fn, scope) {
+ return this.findListener(fn, scope) !== -1;
+ },
+
+ removeListener: function(fn, scope) {
+ var me = this,
+ index,
+ listener,
+ k;
+ index = me.findListener(fn, scope);
+ if (index != -1) {
+ listener = me.listeners[index];
+
+ if (me.firing) {
+ me.listeners = me.listeners.slice(0);
+ }
+
+ // cancel and remove a buffered handler that hasn't fired yet
+ if (listener.task) {
+ listener.task.cancel();
+ delete listener.task;
+ }
+
+ // cancel and remove all delayed handlers that haven't fired yet
+ k = listener.tasks && listener.tasks.length;
+ if (k) {
+ while (k--) {
+ listener.tasks[k].cancel();
+ }
+ delete listener.tasks;
+ }
+
+ // remove this listener from the listeners array
+ Ext.Array.erase(me.listeners, index, 1);
+ return true;
+ }
+
+ return false;
+ },
+
+ // Iterate to stop any buffered/delayed events
+ clearListeners: function() {
+ var listeners = this.listeners,
+ i = listeners.length;
+
+ while (i--) {
+ this.removeListener(listeners[i].fn, listeners[i].scope);
+ }
+ },
+
+ fire: function() {
+ var me = this,
+ listeners = me.listeners,
+ count = listeners.length,
+ i,
+ args,
+ listener;
+
+ if (count > 0) {
+ me.firing = true;
+ for (i = 0; i < count; i++) {
+ listener = listeners[i];
+ args = arguments.length ? Array.prototype.slice.call(arguments, 0) : [];
+ if (listener.o) {
+ args.push(listener.o);
+ }
+ if (listener && listener.fireFn.apply(listener.scope || me.observable, args) === false) {
+ return (me.firing = false);
+ }
+ }
+ }
+ me.firing = false;
+ return true;
+ }
+ };
+ })());
+});
+
+/**
+ * @class Ext.EventManager
+ * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
+ * several useful events directly.
+ * See {@link Ext.EventObject} for more details on normalized event objects.
+ * @singleton
+ */
+Ext.EventManager = {
+
+ // --------------------- onReady ---------------------
+
+ /**
+ * Check if we have bound our global onReady listener
+ * @private
+ */
+ hasBoundOnReady: false,
+
+ /**
+ * Check if fireDocReady has been called
+ * @private
+ */
+ hasFiredReady: false,
+
+ /**
+ * Timer for the document ready event in old IE versions
+ * @private
+ */
+ readyTimeout: null,
+
+ /**
+ * Checks if we have bound an onreadystatechange event
+ * @private
+ */
+ hasOnReadyStateChange: false,
+
+ /**
+ * Holds references to any onReady functions
+ * @private
+ */
+ readyEvent: new Ext.util.Event(),
+
+ /**
+ * Check the ready state for old IE versions
+ * @private
+ * @return {Boolean} True if the document is ready
+ */
+ checkReadyState: function(){
+ var me = Ext.EventManager;
+
+ if(window.attachEvent){
+ // See here for reference: http://javascript.nwbox.com/IEContentLoaded/
+ if (window != top) {
+ return false;
+ }
+ try{
+ document.documentElement.doScroll('left');
+ }catch(e){
+ return false;
+ }
+ me.fireDocReady();
+ return true;
+ }
+ if (document.readyState == 'complete') {
+ me.fireDocReady();
+ return true;
+ }
+ me.readyTimeout = setTimeout(arguments.callee, 2);
+ return false;
+ },
+
+ /**
+ * Binds the appropriate browser event for checking if the DOM has loaded.
+ * @private
+ */
+ bindReadyEvent: function(){
+ var me = Ext.EventManager;
+ if (me.hasBoundOnReady) {
+ return;
+ }
+
+ if (document.addEventListener) {
+ document.addEventListener('DOMContentLoaded', me.fireDocReady, false);
+ // fallback, load will ~always~ fire
+ window.addEventListener('load', me.fireDocReady, false);
+ } else {
+ // check if the document is ready, this will also kick off the scroll checking timer
+ if (!me.checkReadyState()) {
+ document.attachEvent('onreadystatechange', me.checkReadyState);
+ me.hasOnReadyStateChange = true;
+ }
+ // fallback, onload will ~always~ fire
+ window.attachEvent('onload', me.fireDocReady, false);
+ }
+ me.hasBoundOnReady = true;
+ },
+
+ /**
+ * We know the document is loaded, so trigger any onReady events.
+ * @private
+ */
+ fireDocReady: function(){
+ var me = Ext.EventManager;
+
+ // only unbind these events once
+ if (!me.hasFiredReady) {
+ me.hasFiredReady = true;
+
+ if (document.addEventListener) {
+ document.removeEventListener('DOMContentLoaded', me.fireDocReady, false);
+ window.removeEventListener('load', me.fireDocReady, false);
+ } else {
+ if (me.readyTimeout !== null) {
+ clearTimeout(me.readyTimeout);
+ }
+ if (me.hasOnReadyStateChange) {
+ document.detachEvent('onreadystatechange', me.checkReadyState);
+ }
+ window.detachEvent('onload', me.fireDocReady);
+ }
+ Ext.supports.init();
+ }
+ if (!Ext.isReady) {
+ Ext.isReady = true;
+ me.onWindowUnload();
+ me.readyEvent.fire();
+ }
+ },
+
+ /**
+ * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be
+ * accessed shorthanded as Ext.onReady().
+ * @param {Function} fn The method the event invokes.
+ * @param {Object} scope (optional) The scope (this
reference) in which the handler function executes. Defaults to the browser window.
+ * @param {boolean} options (optional) Options object as passed to {@link Ext.core.Element#addListener}.
+ */
+ onDocumentReady: function(fn, scope, options){
+ options = options || {};
+ var me = Ext.EventManager,
+ readyEvent = me.readyEvent;
+
+ // force single to be true so our event is only ever fired once.
+ options.single = true;
+
+ // Document already loaded, let's just fire it
+ if (Ext.isReady) {
+ readyEvent.addListener(fn, scope, options);
+ readyEvent.fire();
+ } else {
+ options.delay = options.delay || 1;
+ readyEvent.addListener(fn, scope, options);
+ me.bindReadyEvent();
+ }
+ },
+
+
+ // --------------------- event binding ---------------------
+
+ /**
+ * Contains a list of all document mouse downs, so we can ensure they fire even when stopEvent is called.
+ * @private
+ */
+ stoppedMouseDownEvent: new Ext.util.Event(),
+
+ /**
+ * Options to parse for the 4th argument to addListener.
+ * @private
+ */
+ propRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|freezeEvent)$/,
+
+ /**
+ * Get the id of the element. If one has not been assigned, automatically assign it.
+ * @param {Mixed} element The element to get the id for.
+ * @return {String} id
+ */
+ getId : function(element) {
+ var skipGarbageCollection = false,
+ id;
+
+ element = Ext.getDom(element);
+
+ if (element === document || element === window) {
+ id = element === document ? Ext.documentId : Ext.windowId;
+ }
+ else {
+ id = Ext.id(element);
+ }
+ // skip garbage collection for special elements (window, document, iframes)
+ if (element && (element.getElementById || element.navigator)) {
+ skipGarbageCollection = true;
+ }
+
+ if (!Ext.cache[id]){
+ Ext.core.Element.addToCache(new Ext.core.Element(element), id);
+ if (skipGarbageCollection) {
+ Ext.cache[id].skipGarbageCollection = true;
+ }
+ }
+ return id;
+ },
+
+ /**
+ * Convert a "config style" listener into a set of flat arguments so they can be passed to addListener
+ * @private
+ * @param {Object} element The element the event is for
+ * @param {Object} event The event configuration
+ * @param {Object} isRemove True if a removal should be performed, otherwise an add will be done.
+ */
+ prepareListenerConfig: function(element, config, isRemove){
+ var me = this,
+ propRe = me.propRe,
+ key, value, args;
+
+ // loop over all the keys in the object
+ for (key in config) {
+ if (config.hasOwnProperty(key)) {
+ // if the key is something else then an event option
+ if (!propRe.test(key)) {
+ value = config[key];
+ // if the value is a function it must be something like click: function(){}, scope: this
+ // which means that there might be multiple event listeners with shared options
+ if (Ext.isFunction(value)) {
+ // shared options
+ args = [element, key, value, config.scope, config];
+ } else {
+ // if its not a function, it must be an object like click: {fn: function(){}, scope: this}
+ args = [element, key, value.fn, value.scope, value];
+ }
+
+ if (isRemove === true) {
+ me.removeListener.apply(this, args);
+ } else {
+ me.addListener.apply(me, args);
+ }
+ }
+ }
+ }
+ },
+
+ /**
+ * Normalize cross browser event differences
+ * @private
+ * @param {Object} eventName The event name
+ * @param {Object} fn The function to execute
+ * @return {Object} The new event name/function
+ */
+ normalizeEvent: function(eventName, fn){
+ if (/mouseenter|mouseleave/.test(eventName) && !Ext.supports.MouseEnterLeave) {
+ if (fn) {
+ fn = Ext.Function.createInterceptor(fn, this.contains, this);
+ }
+ eventName = eventName == 'mouseenter' ? 'mouseover' : 'mouseout';
+ } else if (eventName == 'mousewheel' && !Ext.supports.MouseWheel && !Ext.isOpera){
+ eventName = 'DOMMouseScroll';
+ }
+ return {
+ eventName: eventName,
+ fn: fn
+ };
+ },
+
+ /**
+ * Checks whether the event's relatedTarget is contained inside (or is) the element.
+ * @private
+ * @param {Object} event
+ */
+ contains: function(event){
+ var parent = event.browserEvent.currentTarget,
+ child = this.getRelatedTarget(event);
+
+ if (parent && parent.firstChild) {
+ while (child) {
+ if (child === parent) {
+ return false;
+ }
+ child = child.parentNode;
+ if (child && (child.nodeType != 1)) {
+ child = null;
+ }
+ }
+ }
+ return true;
+ },
+
+ /**
+ * Appends an event handler to an element. The shorthand version {@link #on} is equivalent. Typically you will
+ * use {@link Ext.core.Element#addListener} directly on an Element in favor of calling this version.
+ * @param {String/HTMLElement} el The html element or id to assign the event handler to.
+ * @param {String} eventName The name of the event to listen for.
+ * @param {Function} handler The handler function the event invokes. This function is passed
+ * the following parameters:this
reference) in which the handler function is executed. Defaults to the Element.
+ * @param {Object} options (optional) An object containing handler configuration properties.
+ * This may contain any of the following properties:this
reference) in which the handler function is executed. Defaults to the Element.See {@link Ext.core.Element#addListener} for examples of how to use these options.
+ */ + addListener: function(element, eventName, fn, scope, options){ + // Check if we've been passed a "config style" event. + if (typeof eventName !== 'string') { + this.prepareListenerConfig(element, eventName); + return; + } + + var dom = Ext.getDom(element), + bind, + wrap; + + + // create the wrapper function + options = options || {}; + + bind = this.normalizeEvent(eventName, fn); + wrap = this.createListenerWrap(dom, eventName, bind.fn, scope, options); + + + if (dom.attachEvent) { + dom.attachEvent('on' + bind.eventName, wrap); + } else { + dom.addEventListener(bind.eventName, wrap, options.capture || false); + } + + if (dom == document && eventName == 'mousedown') { + this.stoppedMouseDownEvent.addListener(wrap); + } + + // add all required data into the event cache + this.getEventListenerCache(dom, eventName).push({ + fn: fn, + wrap: wrap, + scope: scope + }); + }, + + /** + * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically + * you will use {@link Ext.core.Element#removeListener} directly on an Element in favor of calling this version. + * @param {String/HTMLElement} el The id or html element from which to remove the listener. + * @param {String} eventName The name of the event. + * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call. + * @param {Object} scope If a scope (this
reference) was specified when the listener was added,
+ * then this must refer to the same object.
+ */
+ removeListener : function(element, eventName, fn, scope) {
+ // handle our listener config object syntax
+ if (typeof eventName !== 'string') {
+ this.prepareListenerConfig(element, eventName, true);
+ return;
+ }
+
+ var dom = Ext.getDom(element),
+ cache = this.getEventListenerCache(dom, eventName),
+ bindName = this.normalizeEvent(eventName).eventName,
+ i = cache.length, j,
+ listener, wrap, tasks;
+
+
+ while (i--) {
+ listener = cache[i];
+
+ if (listener && (!fn || listener.fn == fn) && (!scope || listener.scope === scope)) {
+ wrap = listener.wrap;
+
+ // clear buffered calls
+ if (wrap.task) {
+ clearTimeout(wrap.task);
+ delete wrap.task;
+ }
+
+ // clear delayed calls
+ j = wrap.tasks && wrap.tasks.length;
+ if (j) {
+ while (j--) {
+ clearTimeout(wrap.tasks[j]);
+ }
+ delete wrap.tasks;
+ }
+
+ if (dom.detachEvent) {
+ dom.detachEvent('on' + bindName, wrap);
+ } else {
+ dom.removeEventListener(bindName, wrap, false);
+ }
+
+ if (wrap && dom == document && eventName == 'mousedown') {
+ this.stoppedMouseDownEvent.removeListener(wrap);
+ }
+
+ // remove listener from cache
+ Ext.Array.erase(cache, i, 1);
+ }
+ }
+ },
+
+ /**
+ * Removes all event handers from an element. Typically you will use {@link Ext.core.Element#removeAllListeners}
+ * directly on an Element in favor of calling this version.
+ * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
+ */
+ removeAll : function(element){
+ var dom = Ext.getDom(element),
+ cache, ev;
+ if (!dom) {
+ return;
+ }
+ cache = this.getElementEventCache(dom);
+
+ for (ev in cache) {
+ if (cache.hasOwnProperty(ev)) {
+ this.removeListener(dom, ev);
+ }
+ }
+ Ext.cache[dom.id].events = {};
+ },
+
+ /**
+ * Recursively removes all previous added listeners from an element and its children. Typically you will use {@link Ext.core.Element#purgeAllListeners}
+ * directly on an Element in favor of calling this version.
+ * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
+ * @param {String} eventName (optional) The name of the event.
+ */
+ purgeElement : function(element, eventName) {
+ var dom = Ext.getDom(element),
+ i = 0, len;
+
+ if(eventName) {
+ this.removeListener(dom, eventName);
+ }
+ else {
+ this.removeAll(dom);
+ }
+
+ if(dom && dom.childNodes) {
+ for(len = element.childNodes.length; i < len; i++) {
+ this.purgeElement(element.childNodes[i], eventName);
+ }
+ }
+ },
+
+ /**
+ * Create the wrapper function for the event
+ * @private
+ * @param {HTMLElement} dom The dom element
+ * @param {String} ename The event name
+ * @param {Function} fn The function to execute
+ * @param {Object} scope The scope to execute callback in
+ * @param {Object} options The options
+ * @return {Function} the wrapper function
+ */
+ createListenerWrap : function(dom, ename, fn, scope, options) {
+ options = options || {};
+
+ var f, gen;
+
+ return function wrap(e, args) {
+ // Compile the implementation upon first firing
+ if (!gen) {
+ f = ['if(!Ext) {return;}'];
+
+ if(options.buffer || options.delay || options.freezeEvent) {
+ f.push('e = new Ext.EventObjectImpl(e, ' + (options.freezeEvent ? 'true' : 'false' ) + ');');
+ } else {
+ f.push('e = Ext.EventObject.setEvent(e);');
+ }
+
+ if (options.delegate) {
+ f.push('var t = e.getTarget("' + options.delegate + '", this);');
+ f.push('if(!t) {return;}');
+ } else {
+ f.push('var t = e.target;');
+ }
+
+ if (options.target) {
+ f.push('if(e.target !== options.target) {return;}');
+ }
+
+ if(options.stopEvent) {
+ f.push('e.stopEvent();');
+ } else {
+ if(options.preventDefault) {
+ f.push('e.preventDefault();');
+ }
+ if(options.stopPropagation) {
+ f.push('e.stopPropagation();');
+ }
+ }
+
+ if(options.normalized === false) {
+ f.push('e = e.browserEvent;');
+ }
+
+ if(options.buffer) {
+ f.push('(wrap.task && clearTimeout(wrap.task));');
+ f.push('wrap.task = setTimeout(function(){');
+ }
+
+ if(options.delay) {
+ f.push('wrap.tasks = wrap.tasks || [];');
+ f.push('wrap.tasks.push(setTimeout(function(){');
+ }
+
+ // finally call the actual handler fn
+ f.push('fn.call(scope || dom, e, t, options);');
+
+ if(options.single) {
+ f.push('Ext.EventManager.removeListener(dom, ename, fn, scope);');
+ }
+
+ if(options.delay) {
+ f.push('}, ' + options.delay + '));');
+ }
+
+ if(options.buffer) {
+ f.push('}, ' + options.buffer + ');');
+ }
+
+ gen = Ext.functionFactory('e', 'options', 'fn', 'scope', 'ename', 'dom', 'wrap', 'args', f.join('\n'));
+ }
+
+ gen.call(dom, e, options, fn, scope, ename, dom, wrap, args);
+ };
+ },
+
+ /**
+ * Get the event cache for a particular element for a particular event
+ * @private
+ * @param {HTMLElement} element The element
+ * @param {Object} eventName The event name
+ * @return {Array} The events for the element
+ */
+ getEventListenerCache : function(element, eventName) {
+ if (!element) {
+ return [];
+ }
+
+ var eventCache = this.getElementEventCache(element);
+ return eventCache[eventName] || (eventCache[eventName] = []);
+ },
+
+ /**
+ * Gets the event cache for the object
+ * @private
+ * @param {HTMLElement} element The element
+ * @return {Object} The event cache for the object
+ */
+ getElementEventCache : function(element) {
+ if (!element) {
+ return {};
+ }
+ var elementCache = Ext.cache[this.getId(element)];
+ return elementCache.events || (elementCache.events = {});
+ },
+
+ // --------------------- utility methods ---------------------
+ mouseLeaveRe: /(mouseout|mouseleave)/,
+ mouseEnterRe: /(mouseover|mouseenter)/,
+
+ /**
+ * Stop the event (preventDefault and stopPropagation)
+ * @param {Event} The event to stop
+ */
+ stopEvent: function(event) {
+ this.stopPropagation(event);
+ this.preventDefault(event);
+ },
+
+ /**
+ * Cancels bubbling of the event.
+ * @param {Event} The event to stop bubbling.
+ */
+ stopPropagation: function(event) {
+ event = event.browserEvent || event;
+ if (event.stopPropagation) {
+ event.stopPropagation();
+ } else {
+ event.cancelBubble = true;
+ }
+ },
+
+ /**
+ * Prevents the browsers default handling of the event.
+ * @param {Event} The event to prevent the default
+ */
+ preventDefault: function(event) {
+ event = event.browserEvent || event;
+ if (event.preventDefault) {
+ event.preventDefault();
+ } else {
+ event.returnValue = false;
+ // Some keys events require setting the keyCode to -1 to be prevented
+ try {
+ // all ctrl + X and F1 -> F12
+ if (event.ctrlKey || event.keyCode > 111 && event.keyCode < 124) {
+ event.keyCode = -1;
+ }
+ } catch (e) {
+ // see this outdated document http://support.microsoft.com/kb/934364/en-us for more info
+ }
+ }
+ },
+
+ /**
+ * Gets the related target from the event.
+ * @param {Object} event The event
+ * @return {HTMLElement} The related target.
+ */
+ getRelatedTarget: function(event) {
+ event = event.browserEvent || event;
+ var target = event.relatedTarget;
+ if (!target) {
+ if (this.mouseLeaveRe.test(event.type)) {
+ target = event.toElement;
+ } else if (this.mouseEnterRe.test(event.type)) {
+ target = event.fromElement;
+ }
+ }
+ return this.resolveTextNode(target);
+ },
+
+ /**
+ * Gets the x coordinate from the event
+ * @param {Object} event The event
+ * @return {Number} The x coordinate
+ */
+ getPageX: function(event) {
+ return this.getXY(event)[0];
+ },
+
+ /**
+ * Gets the y coordinate from the event
+ * @param {Object} event The event
+ * @return {Number} The y coordinate
+ */
+ getPageY: function(event) {
+ return this.getXY(event)[1];
+ },
+
+ /**
+ * Gets the x & ycoordinate from the event
+ * @param {Object} event The event
+ * @return {Array} The x/y coordinate
+ */
+ getPageXY: function(event) {
+ event = event.browserEvent || event;
+ var x = event.pageX,
+ y = event.pageY,
+ doc = document.documentElement,
+ body = document.body;
+
+ // pageX/pageY not available (undefined, not null), use clientX/clientY instead
+ if (!x && x !== 0) {
+ x = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
+ y = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
+ }
+ return [x, y];
+ },
+
+ /**
+ * Gets the target of the event.
+ * @param {Object} event The event
+ * @return {HTMLElement} target
+ */
+ getTarget: function(event) {
+ event = event.browserEvent || event;
+ return this.resolveTextNode(event.target || event.srcElement);
+ },
+
+ /**
+ * Resolve any text nodes accounting for browser differences.
+ * @private
+ * @param {HTMLElement} node The node
+ * @return {HTMLElement} The resolved node
+ */
+ // technically no need to browser sniff this, however it makes no sense to check this every time, for every event, whether the string is equal.
+ resolveTextNode: Ext.isGecko ?
+ function(node) {
+ if (!node) {
+ return;
+ }
+ // work around firefox bug, https://bugzilla.mozilla.org/show_bug.cgi?id=101197
+ var s = HTMLElement.prototype.toString.call(node);
+ if (s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]') {
+ return;
+ }
+ return node.nodeType == 3 ? node.parentNode: node;
+ }: function(node) {
+ return node && node.nodeType == 3 ? node.parentNode: node;
+ },
+
+ // --------------------- custom event binding ---------------------
+
+ // Keep track of the current width/height
+ curWidth: 0,
+ curHeight: 0,
+
+ /**
+ * Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
+ * passes new viewport width and height to handlers.
+ * @param {Function} fn The handler function the window resize event invokes.
+ * @param {Object} scope The scope (this
reference) in which the handler function executes. Defaults to the browser window.
+ * @param {boolean} options Options object as passed to {@link Ext.core.Element#addListener}
+ */
+ onWindowResize: function(fn, scope, options){
+ var resize = this.resizeEvent;
+ if(!resize){
+ this.resizeEvent = resize = new Ext.util.Event();
+ this.on(window, 'resize', this.fireResize, this, {buffer: 100});
+ }
+ resize.addListener(fn, scope, options);
+ },
+
+ /**
+ * Fire the resize event.
+ * @private
+ */
+ fireResize: function(){
+ var me = this,
+ w = Ext.core.Element.getViewWidth(),
+ h = Ext.core.Element.getViewHeight();
+
+ //whacky problem in IE where the resize event will sometimes fire even though the w/h are the same.
+ if(me.curHeight != h || me.curWidth != w){
+ me.curHeight = h;
+ me.curWidth = w;
+ me.resizeEvent.fire(w, h);
+ }
+ },
+
+ /**
+ * Removes the passed window resize listener.
+ * @param {Function} fn The method the event invokes
+ * @param {Object} scope The scope of handler
+ */
+ removeResizeListener: function(fn, scope){
+ if (this.resizeEvent) {
+ this.resizeEvent.removeListener(fn, scope);
+ }
+ },
+
+ onWindowUnload: function() {
+ var unload = this.unloadEvent;
+ if (!unload) {
+ this.unloadEvent = unload = new Ext.util.Event();
+ this.addListener(window, 'unload', this.fireUnload, this);
+ }
+ },
+
+ /**
+ * Fires the unload event for items bound with onWindowUnload
+ * @private
+ */
+ fireUnload: function() {
+ // wrap in a try catch, could have some problems during unload
+ try {
+ this.removeUnloadListener();
+ // Work around FF3 remembering the last scroll position when refreshing the grid and then losing grid view
+ if (Ext.isGecko3) {
+ var gridviews = Ext.ComponentQuery.query('gridview'),
+ i = 0,
+ ln = gridviews.length;
+ for (; i < ln; i++) {
+ gridviews[i].scrollToTop();
+ }
+ }
+ // Purge all elements in the cache
+ var el,
+ cache = Ext.cache;
+ for (el in cache) {
+ if (cache.hasOwnProperty(el)) {
+ Ext.EventManager.removeAll(el);
+ }
+ }
+ } catch(e) {
+ }
+ },
+
+ /**
+ * Removes the passed window unload listener.
+ * @param {Function} fn The method the event invokes
+ * @param {Object} scope The scope of handler
+ */
+ removeUnloadListener: function(){
+ if (this.unloadEvent) {
+ this.removeListener(window, 'unload', this.fireUnload);
+ }
+ },
+
+ /**
+ * note 1: IE fires ONLY the keydown event on specialkey autorepeat
+ * note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
+ * (research done by @Jan Wolter at http://unixpapa.com/js/key.html)
+ * @private
+ */
+ useKeyDown: Ext.isWebKit ?
+ parseInt(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1], 10) >= 525 :
+ !((Ext.isGecko && !Ext.isWindows) || Ext.isOpera),
+
+ /**
+ * Indicates which event to use for getting key presses.
+ * @return {String} The appropriate event name.
+ */
+ getKeyEvent: function(){
+ return this.useKeyDown ? 'keydown' : 'keypress';
+ }
+};
+
+/**
+ * Alias for {@link Ext.Loader#onReady Ext.Loader.onReady} with withDomReady set to true
+ * @member Ext
+ * @method onReady
+ */
+Ext.onReady = function(fn, scope, options) {
+ Ext.Loader.onReady(fn, scope, true, options);
+};
+
+/**
+ * Alias for {@link Ext.EventManager#onDocumentReady Ext.EventManager.onDocumentReady}
+ * @member Ext
+ * @method onDocumentReady
+ */
+Ext.onDocumentReady = Ext.EventManager.onDocumentReady;
+
+/**
+ * Alias for {@link Ext.EventManager#addListener Ext.EventManager.addListener}
+ * @member Ext.EventManager
+ * @method on
+ */
+Ext.EventManager.on = Ext.EventManager.addListener;
+
+/**
+ * Alias for {@link Ext.EventManager#removeListener Ext.EventManager.removeListener}
+ * @member Ext.EventManager
+ * @method un
+ */
+Ext.EventManager.un = Ext.EventManager.removeListener;
+
+(function(){
+ var initExtCss = function() {
+ // find the body element
+ var bd = document.body || document.getElementsByTagName('body')[0],
+ baseCSSPrefix = Ext.baseCSSPrefix,
+ cls = [baseCSSPrefix + 'body'],
+ htmlCls = [],
+ html;
+
+ if (!bd) {
+ return false;
+ }
+
+ html = bd.parentNode;
+
+ //Let's keep this human readable!
+ if (Ext.isIE) {
+ cls.push(baseCSSPrefix + 'ie');
+ }
+ if (Ext.isIE6) {
+ cls.push(baseCSSPrefix + 'ie6');
+ }
+ if (Ext.isIE7) {
+ cls.push(baseCSSPrefix + 'ie7');
+ }
+ if (Ext.isIE8) {
+ cls.push(baseCSSPrefix + 'ie8');
+ }
+ if (Ext.isIE9) {
+ cls.push(baseCSSPrefix + 'ie9');
+ }
+ if (Ext.isGecko) {
+ cls.push(baseCSSPrefix + 'gecko');
+ }
+ if (Ext.isGecko3) {
+ cls.push(baseCSSPrefix + 'gecko3');
+ }
+ if (Ext.isGecko4) {
+ cls.push(baseCSSPrefix + 'gecko4');
+ }
+ if (Ext.isOpera) {
+ cls.push(baseCSSPrefix + 'opera');
+ }
+ if (Ext.isWebKit) {
+ cls.push(baseCSSPrefix + 'webkit');
+ }
+ if (Ext.isSafari) {
+ cls.push(baseCSSPrefix + 'safari');
+ }
+ if (Ext.isSafari2) {
+ cls.push(baseCSSPrefix + 'safari2');
+ }
+ if (Ext.isSafari3) {
+ cls.push(baseCSSPrefix + 'safari3');
+ }
+ if (Ext.isSafari4) {
+ cls.push(baseCSSPrefix + 'safari4');
+ }
+ if (Ext.isChrome) {
+ cls.push(baseCSSPrefix + 'chrome');
+ }
+ if (Ext.isMac) {
+ cls.push(baseCSSPrefix + 'mac');
+ }
+ if (Ext.isLinux) {
+ cls.push(baseCSSPrefix + 'linux');
+ }
+ if (!Ext.supports.CSS3BorderRadius) {
+ cls.push(baseCSSPrefix + 'nbr');
+ }
+ if (!Ext.supports.CSS3LinearGradient) {
+ cls.push(baseCSSPrefix + 'nlg');
+ }
+ if (!Ext.scopeResetCSS) {
+ cls.push(baseCSSPrefix + 'reset');
+ }
+
+ // add to the parent to allow for selectors x-strict x-border-box, also set the isBorderBox property correctly
+ if (html) {
+ if (Ext.isStrict && (Ext.isIE6 || Ext.isIE7)) {
+ Ext.isBorderBox = false;
+ }
+ else {
+ Ext.isBorderBox = true;
+ }
+
+ htmlCls.push(baseCSSPrefix + (Ext.isBorderBox ? 'border-box' : 'strict'));
+ if (!Ext.isStrict) {
+ htmlCls.push(baseCSSPrefix + 'quirks');
+ if (Ext.isIE && !Ext.isStrict) {
+ Ext.isIEQuirks = true;
+ }
+ }
+ Ext.fly(html, '_internal').addCls(htmlCls);
+ }
+
+ Ext.fly(bd, '_internal').addCls(cls);
+ return true;
+ };
+
+ Ext.onReady(initExtCss);
+})();
+
+/**
+ * @class Ext.EventObject
+
+Just as {@link Ext.core.Element} wraps around a native DOM node, Ext.EventObject
+wraps the browser's native event-object normalizing cross-browser differences,
+such as which mouse button is clicked, keys pressed, mechanisms to stop
+event-propagation along with a method to prevent default actions from taking place.
+
+For example:
+
+ function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
+ e.preventDefault();
+ var target = e.getTarget(); // same as t (the target HTMLElement)
+ ...
+ }
+
+ var myDiv = {@link Ext#get Ext.get}("myDiv"); // get reference to an {@link Ext.core.Element}
+ myDiv.on( // 'on' is shorthand for addListener
+ "click", // perform an action on click of myDiv
+ handleClick // reference to the action handler
+ );
+
+ // other methods to do the same:
+ Ext.EventManager.on("myDiv", 'click', handleClick);
+ Ext.EventManager.addListener("myDiv", 'click', handleClick);
+
+ * @singleton
+ * @markdown
+ */
+Ext.define('Ext.EventObjectImpl', {
+ uses: ['Ext.util.Point'],
+
+ /** Key constant @type Number */
+ BACKSPACE: 8,
+ /** Key constant @type Number */
+ TAB: 9,
+ /** Key constant @type Number */
+ NUM_CENTER: 12,
+ /** Key constant @type Number */
+ ENTER: 13,
+ /** Key constant @type Number */
+ RETURN: 13,
+ /** Key constant @type Number */
+ SHIFT: 16,
+ /** Key constant @type Number */
+ CTRL: 17,
+ /** Key constant @type Number */
+ ALT: 18,
+ /** Key constant @type Number */
+ PAUSE: 19,
+ /** Key constant @type Number */
+ CAPS_LOCK: 20,
+ /** Key constant @type Number */
+ ESC: 27,
+ /** Key constant @type Number */
+ SPACE: 32,
+ /** Key constant @type Number */
+ PAGE_UP: 33,
+ /** Key constant @type Number */
+ PAGE_DOWN: 34,
+ /** Key constant @type Number */
+ END: 35,
+ /** Key constant @type Number */
+ HOME: 36,
+ /** Key constant @type Number */
+ LEFT: 37,
+ /** Key constant @type Number */
+ UP: 38,
+ /** Key constant @type Number */
+ RIGHT: 39,
+ /** Key constant @type Number */
+ DOWN: 40,
+ /** Key constant @type Number */
+ PRINT_SCREEN: 44,
+ /** Key constant @type Number */
+ INSERT: 45,
+ /** Key constant @type Number */
+ DELETE: 46,
+ /** Key constant @type Number */
+ ZERO: 48,
+ /** Key constant @type Number */
+ ONE: 49,
+ /** Key constant @type Number */
+ TWO: 50,
+ /** Key constant @type Number */
+ THREE: 51,
+ /** Key constant @type Number */
+ FOUR: 52,
+ /** Key constant @type Number */
+ FIVE: 53,
+ /** Key constant @type Number */
+ SIX: 54,
+ /** Key constant @type Number */
+ SEVEN: 55,
+ /** Key constant @type Number */
+ EIGHT: 56,
+ /** Key constant @type Number */
+ NINE: 57,
+ /** Key constant @type Number */
+ A: 65,
+ /** Key constant @type Number */
+ B: 66,
+ /** Key constant @type Number */
+ C: 67,
+ /** Key constant @type Number */
+ D: 68,
+ /** Key constant @type Number */
+ E: 69,
+ /** Key constant @type Number */
+ F: 70,
+ /** Key constant @type Number */
+ G: 71,
+ /** Key constant @type Number */
+ H: 72,
+ /** Key constant @type Number */
+ I: 73,
+ /** Key constant @type Number */
+ J: 74,
+ /** Key constant @type Number */
+ K: 75,
+ /** Key constant @type Number */
+ L: 76,
+ /** Key constant @type Number */
+ M: 77,
+ /** Key constant @type Number */
+ N: 78,
+ /** Key constant @type Number */
+ O: 79,
+ /** Key constant @type Number */
+ P: 80,
+ /** Key constant @type Number */
+ Q: 81,
+ /** Key constant @type Number */
+ R: 82,
+ /** Key constant @type Number */
+ S: 83,
+ /** Key constant @type Number */
+ T: 84,
+ /** Key constant @type Number */
+ U: 85,
+ /** Key constant @type Number */
+ V: 86,
+ /** Key constant @type Number */
+ W: 87,
+ /** Key constant @type Number */
+ X: 88,
+ /** Key constant @type Number */
+ Y: 89,
+ /** Key constant @type Number */
+ Z: 90,
+ /** Key constant @type Number */
+ CONTEXT_MENU: 93,
+ /** Key constant @type Number */
+ NUM_ZERO: 96,
+ /** Key constant @type Number */
+ NUM_ONE: 97,
+ /** Key constant @type Number */
+ NUM_TWO: 98,
+ /** Key constant @type Number */
+ NUM_THREE: 99,
+ /** Key constant @type Number */
+ NUM_FOUR: 100,
+ /** Key constant @type Number */
+ NUM_FIVE: 101,
+ /** Key constant @type Number */
+ NUM_SIX: 102,
+ /** Key constant @type Number */
+ NUM_SEVEN: 103,
+ /** Key constant @type Number */
+ NUM_EIGHT: 104,
+ /** Key constant @type Number */
+ NUM_NINE: 105,
+ /** Key constant @type Number */
+ NUM_MULTIPLY: 106,
+ /** Key constant @type Number */
+ NUM_PLUS: 107,
+ /** Key constant @type Number */
+ NUM_MINUS: 109,
+ /** Key constant @type Number */
+ NUM_PERIOD: 110,
+ /** Key constant @type Number */
+ NUM_DIVISION: 111,
+ /** Key constant @type Number */
+ F1: 112,
+ /** Key constant @type Number */
+ F2: 113,
+ /** Key constant @type Number */
+ F3: 114,
+ /** Key constant @type Number */
+ F4: 115,
+ /** Key constant @type Number */
+ F5: 116,
+ /** Key constant @type Number */
+ F6: 117,
+ /** Key constant @type Number */
+ F7: 118,
+ /** Key constant @type Number */
+ F8: 119,
+ /** Key constant @type Number */
+ F9: 120,
+ /** Key constant @type Number */
+ F10: 121,
+ /** Key constant @type Number */
+ F11: 122,
+ /** Key constant @type Number */
+ F12: 123,
+ /**
+ * The mouse wheel delta scaling factor. This value depends on browser version and OS and
+ * attempts to produce a similar scrolling experience across all platforms and browsers.
+ *
+ * To change this value:
+ *
+ * Ext.EventObjectImpl.prototype.WHEEL_SCALE = 72;
+ *
+ * @type Number
+ * @markdown
+ */
+ WHEEL_SCALE: (function () {
+ var scale;
+
+ if (Ext.isGecko) {
+ // Firefox uses 3 on all platforms
+ scale = 3;
+ } else if (Ext.isMac) {
+ // Continuous scrolling devices have momentum and produce much more scroll than
+ // discrete devices on the same OS and browser. To make things exciting, Safari
+ // (and not Chrome) changed from small values to 120 (like IE).
+
+ if (Ext.isSafari && Ext.webKitVersion >= 532.0) {
+ // Safari changed the scrolling factor to match IE (for details see
+ // https://bugs.webkit.org/show_bug.cgi?id=24368). The WebKit version where this
+ // change was introduced was 532.0
+ // Detailed discussion:
+ // https://bugs.webkit.org/show_bug.cgi?id=29601
+ // http://trac.webkit.org/browser/trunk/WebKit/chromium/src/mac/WebInputEventFactory.mm#L1063
+ scale = 120;
+ } else {
+ // MS optical wheel mouse produces multiples of 12 which is close enough
+ // to help tame the speed of the continuous mice...
+ scale = 12;
+ }
+
+ // Momentum scrolling produces very fast scrolling, so increase the scale factor
+ // to help produce similar results cross platform. This could be even larger and
+ // it would help those mice, but other mice would become almost unusable as a
+ // result (since we cannot tell which device type is in use).
+ scale *= 3;
+ } else {
+ // IE, Opera and other Windows browsers use 120.
+ scale = 120;
+ }
+
+ return scale;
+ })(),
+
+ /**
+ * Simple click regex
+ * @private
+ */
+ clickRe: /(dbl)?click/,
+ // safari keypress events for special keys return bad keycodes
+ safariKeys: {
+ 3: 13, // enter
+ 63234: 37, // left
+ 63235: 39, // right
+ 63232: 38, // up
+ 63233: 40, // down
+ 63276: 33, // page up
+ 63277: 34, // page down
+ 63272: 46, // delete
+ 63273: 36, // home
+ 63275: 35 // end
+ },
+ // normalize button clicks, don't see any way to feature detect this.
+ btnMap: Ext.isIE ? {
+ 1: 0,
+ 4: 1,
+ 2: 2
+ } : {
+ 0: 0,
+ 1: 1,
+ 2: 2
+ },
+
+ constructor: function(event, freezeEvent){
+ if (event) {
+ this.setEvent(event.browserEvent || event, freezeEvent);
+ }
+ },
+
+ setEvent: function(event, freezeEvent){
+ var me = this, button, options;
+
+ if (event == me || (event && event.browserEvent)) { // already wrapped
+ return event;
+ }
+ me.browserEvent = event;
+ if (event) {
+ // normalize buttons
+ button = event.button ? me.btnMap[event.button] : (event.which ? event.which - 1 : -1);
+ if (me.clickRe.test(event.type) && button == -1) {
+ button = 0;
+ }
+ options = {
+ type: event.type,
+ button: button,
+ shiftKey: event.shiftKey,
+ // mac metaKey behaves like ctrlKey
+ ctrlKey: event.ctrlKey || event.metaKey || false,
+ altKey: event.altKey,
+ // in getKey these will be normalized for the mac
+ keyCode: event.keyCode,
+ charCode: event.charCode,
+ // cache the targets for the delayed and or buffered events
+ target: Ext.EventManager.getTarget(event),
+ relatedTarget: Ext.EventManager.getRelatedTarget(event),
+ currentTarget: event.currentTarget,
+ xy: (freezeEvent ? me.getXY() : null)
+ };
+ } else {
+ options = {
+ button: -1,
+ shiftKey: false,
+ ctrlKey: false,
+ altKey: false,
+ keyCode: 0,
+ charCode: 0,
+ target: null,
+ xy: [0, 0]
+ };
+ }
+ Ext.apply(me, options);
+ return me;
+ },
+
+ /**
+ * Stop the event (preventDefault and stopPropagation)
+ */
+ stopEvent: function(){
+ this.stopPropagation();
+ this.preventDefault();
+ },
+
+ /**
+ * Prevents the browsers default handling of the event.
+ */
+ preventDefault: function(){
+ if (this.browserEvent) {
+ Ext.EventManager.preventDefault(this.browserEvent);
+ }
+ },
+
+ /**
+ * Cancels bubbling of the event.
+ */
+ stopPropagation: function(){
+ var browserEvent = this.browserEvent;
+
+ if (browserEvent) {
+ if (browserEvent.type == 'mousedown') {
+ Ext.EventManager.stoppedMouseDownEvent.fire(this);
+ }
+ Ext.EventManager.stopPropagation(browserEvent);
+ }
+ },
+
+ /**
+ * Gets the character code for the event.
+ * @return {Number}
+ */
+ getCharCode: function(){
+ return this.charCode || this.keyCode;
+ },
+
+ /**
+ * Returns a normalized keyCode for the event.
+ * @return {Number} The key code
+ */
+ getKey: function(){
+ return this.normalizeKey(this.keyCode || this.charCode);
+ },
+
+ /**
+ * Normalize key codes across browsers
+ * @private
+ * @param {Number} key The key code
+ * @return {Number} The normalized code
+ */
+ normalizeKey: function(key){
+ // can't feature detect this
+ return Ext.isWebKit ? (this.safariKeys[key] || key) : key;
+ },
+
+ /**
+ * Gets the x coordinate of the event.
+ * @return {Number}
+ * @deprecated 4.0 Replaced by {@link #getX}
+ */
+ getPageX: function(){
+ return this.getX();
+ },
+
+ /**
+ * Gets the y coordinate of the event.
+ * @return {Number}
+ * @deprecated 4.0 Replaced by {@link #getY}
+ */
+ getPageY: function(){
+ return this.getY();
+ },
+
+ /**
+ * Gets the x coordinate of the event.
+ * @return {Number}
+ */
+ getX: function() {
+ return this.getXY()[0];
+ },
+
+ /**
+ * Gets the y coordinate of the event.
+ * @return {Number}
+ */
+ getY: function() {
+ return this.getXY()[1];
+ },
+
+ /**
+ * Gets the page coordinates of the event.
+ * @return {Array} The xy values like [x, y]
+ */
+ getXY: function() {
+ if (!this.xy) {
+ // same for XY
+ this.xy = Ext.EventManager.getPageXY(this.browserEvent);
+ }
+ return this.xy;
+ },
+
+ /**
+ * Gets the target for the event.
+ * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
+ * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body)
+ * @param {Boolean} returnEl (optional) True to return a Ext.core.Element object instead of DOM node
+ * @return {HTMLelement}
+ */
+ getTarget : function(selector, maxDepth, returnEl){
+ if (selector) {
+ return Ext.fly(this.target).findParent(selector, maxDepth, returnEl);
+ }
+ return returnEl ? Ext.get(this.target) : this.target;
+ },
+
+ /**
+ * Gets the related target.
+ * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
+ * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body)
+ * @param {Boolean} returnEl (optional) True to return a Ext.core.Element object instead of DOM node
+ * @return {HTMLElement}
+ */
+ getRelatedTarget : function(selector, maxDepth, returnEl){
+ if (selector) {
+ return Ext.fly(this.relatedTarget).findParent(selector, maxDepth, returnEl);
+ }
+ return returnEl ? Ext.get(this.relatedTarget) : this.relatedTarget;
+ },
+
+ /**
+ * Correctly scales a given wheel delta.
+ * @param {Number} delta The delta value.
+ */
+ correctWheelDelta : function (delta) {
+ var scale = this.WHEEL_SCALE,
+ ret = Math.round(delta / scale + 0.5);
+
+ if (!ret && delta) {
+ ret = (delta < 0) ? -1 : 1; // don't allow non-zero deltas to go to zero!
+ }
+
+ return ret;
+ },
+
+ /**
+ * Returns the mouse wheel deltas for this event.
+ * @return {Object} An object with "x" and "y" properties holding the mouse wheel deltas.
+ */
+ getWheelDeltas : function () {
+ var me = this,
+ event = me.browserEvent,
+ dx = 0, dy = 0; // the deltas
+
+ if (Ext.isDefined(event.wheelDeltaX)) { // WebKit has both dimensions
+ dx = event.wheelDeltaX;
+ dy = event.wheelDeltaY;
+ } else if (event.wheelDelta) { // old WebKit and IE
+ dy = event.wheelDelta;
+ } else if (event.detail) { // Gecko
+ dy = -event.detail; // gecko is backwards
+
+ // Gecko sometimes returns really big values if the user changes settings to
+ // scroll a whole page per scroll
+ if (dy > 100) {
+ dy = 3;
+ } else if (dy < -100) {
+ dy = -3;
+ }
+
+ // Firefox 3.1 adds an axis field to the event to indicate direction of
+ // scroll. See https://developer.mozilla.org/en/Gecko-Specific_DOM_Events
+ if (Ext.isDefined(event.axis) && event.axis === event.HORIZONTAL_AXIS) {
+ dx = dy;
+ dy = 0;
+ }
+ }
+
+ return {
+ x: me.correctWheelDelta(dx),
+ y: me.correctWheelDelta(dy)
+ };
+ },
+
+ /**
+ * Normalizes mouse wheel y-delta across browsers. To get x-delta information, use
+ * {@link #getWheelDeltas} instead.
+ * @return {Number} The mouse wheel y-delta
+ */
+ getWheelDelta : function(){
+ var deltas = this.getWheelDeltas();
+
+ return deltas.y;
+ },
+
+ /**
+ * Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
+ * Example usage:
+// Handle click on any child of an element
+Ext.getBody().on('click', function(e){
+ if(e.within('some-el')){
+ alert('Clicked on a child of some-el!');
+ }
+});
+
+// Handle click directly on an element, ignoring clicks on child nodes
+Ext.getBody().on('click', function(e,t){
+ if((t.id == 'some-el') && !e.within(t, true)){
+ alert('Clicked directly on some-el!');
+ }
+});
+
+ * @param {Mixed} el The id, DOM element or Ext.core.Element to check
+ * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
+ * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target
+ * @return {Boolean}
+ */
+ within : function(el, related, allowEl){
+ if(el){
+ var t = related ? this.getRelatedTarget() : this.getTarget(),
+ result;
+
+ if (t) {
+ result = Ext.fly(el).contains(t);
+ if (!result && allowEl) {
+ result = t == Ext.getDom(el);
+ }
+ return result;
+ }
+ }
+ return false;
+ },
+
+ /**
+ * Checks if the key pressed was a "navigation" key
+ * @return {Boolean} True if the press is a navigation keypress
+ */
+ isNavKeyPress : function(){
+ var me = this,
+ k = this.normalizeKey(me.keyCode);
+
+ return (k >= 33 && k <= 40) || // Page Up/Down, End, Home, Left, Up, Right, Down
+ k == me.RETURN ||
+ k == me.TAB ||
+ k == me.ESC;
+ },
+
+ /**
+ * Checks if the key pressed was a "special" key
+ * @return {Boolean} True if the press is a special keypress
+ */
+ isSpecialKey : function(){
+ var k = this.normalizeKey(this.keyCode);
+ return (this.type == 'keypress' && this.ctrlKey) ||
+ this.isNavKeyPress() ||
+ (k == this.BACKSPACE) || // Backspace
+ (k >= 16 && k <= 20) || // Shift, Ctrl, Alt, Pause, Caps Lock
+ (k >= 44 && k <= 46); // Print Screen, Insert, Delete
+ },
+
+ /**
+ * Returns a point object that consists of the object coordinates.
+ * @return {Ext.util.Point} point
+ */
+ getPoint : function(){
+ var xy = this.getXY();
+ return Ext.create('Ext.util.Point', xy[0], xy[1]);
+ },
+
+ /**
+ * Returns true if the control, meta, shift or alt key was pressed during this event.
+ * @return {Boolean}
+ */
+ hasModifier : function(){
+ return this.ctrlKey || this.altKey || this.shiftKey || this.metaKey;
+ },
+
+ /**
+ * Injects a DOM event using the data in this object and (optionally) a new target.
+ * This is a low-level technique and not likely to be used by application code. The
+ * currently supported event types are:
+ * HTMLEvents
+ *MouseEvents
+ *UIEvents
+ *this
reference) in which the handler function executes. Defaults to this Element.
+ * @return {Object} The listeners object which was added to this element so that monitoring can be stopped. Example usage:
+// Hide the menu if the mouse moves out for 250ms or more
+this.mouseLeaveMonitor = this.menuEl.monitorMouseLeave(250, this.hideMenu, this);
+
+...
+// Remove mouseleave monitor on menu destroy
+this.menuEl.un(this.mouseLeaveMonitor);
+
+ */
+ monitorMouseLeave: function(delay, handler, scope) {
+ var me = this,
+ timer,
+ listeners = {
+ mouseleave: function(e) {
+ timer = setTimeout(Ext.Function.bind(handler, scope||me, [e]), delay);
+ },
+ mouseenter: function() {
+ clearTimeout(timer);
+ },
+ freezeEvent: true
+ };
+
+ me.on(listeners);
+ return listeners;
+ },
+
+ /**
+ * Stops the specified event(s) from bubbling and optionally prevents the default action
+ * @param {String/Array} eventName an event / array of events to stop from bubbling
+ * @param {Boolean} preventDefault (optional) true to prevent the default action too
+ * @return {Ext.core.Element} this
+ */
+ swallowEvent : function(eventName, preventDefault) {
+ var me = this;
+ function fn(e) {
+ e.stopPropagation();
+ if (preventDefault) {
+ e.preventDefault();
+ }
+ }
+
+ if (Ext.isArray(eventName)) {
+ Ext.each(eventName, function(e) {
+ me.on(e, fn);
+ });
+ return me;
+ }
+ me.on(eventName, fn);
+ return me;
+ },
+
+ /**
+ * Create an event handler on this element such that when the event fires and is handled by this element,
+ * it will be relayed to another object (i.e., fired again as if it originated from that object instead).
+ * @param {String} eventName The type of event to relay
+ * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context
+ * for firing the relayed event
+ */
+ relayEvent : function(eventName, observable) {
+ this.on(eventName, function(e) {
+ observable.fireEvent(eventName, e);
+ });
+ },
+
+ /**
+ * Removes Empty, or whitespace filled text nodes. Combines adjacent text nodes.
+ * @param {Boolean} forceReclean (optional) By default the element
+ * keeps track if it has been cleaned already so
+ * you can call this over and over. However, if you update the element and
+ * need to force a reclean, you can pass true.
+ */
+ clean : function(forceReclean) {
+ var me = this,
+ dom = me.dom,
+ n = dom.firstChild,
+ nx,
+ ni = -1;
+
+ if (Ext.core.Element.data(dom, 'isCleaned') && forceReclean !== true) {
+ return me;
+ }
+
+ while (n) {
+ nx = n.nextSibling;
+ if (n.nodeType == 3) {
+ // Remove empty/whitespace text nodes
+ if (!(/\S/.test(n.nodeValue))) {
+ dom.removeChild(n);
+ // Combine adjacent text nodes
+ } else if (nx && nx.nodeType == 3) {
+ n.appendData(Ext.String.trim(nx.data));
+ dom.removeChild(nx);
+ nx = n.nextSibling;
+ n.nodeIndex = ++ni;
+ }
+ } else {
+ // Recursively clean
+ Ext.fly(n).clean();
+ n.nodeIndex = ++ni;
+ }
+ n = nx;
+ }
+
+ Ext.core.Element.data(dom, 'isCleaned', true);
+ return me;
+ },
+
+ /**
+ * Direct access to the Ext.ElementLoader {@link Ext.ElementLoader#load} method. The method takes the same object
+ * parameter as {@link Ext.ElementLoader#load}
+ * @return {Ext.core.Element} this
+ */
+ load : function(options) {
+ this.getLoader().load(options);
+ return this;
+ },
+
+ /**
+ * Gets this element's {@link Ext.ElementLoader ElementLoader}
+ * @return {Ext.ElementLoader} The loader
+ */
+ getLoader : function() {
+ var dom = this.dom,
+ data = Ext.core.Element.data,
+ loader = data(dom, 'loader');
+
+ if (!loader) {
+ loader = Ext.create('Ext.ElementLoader', {
+ target: this
+ });
+ data(dom, 'loader', loader);
+ }
+ return loader;
+ },
+
+ /**
+ * Update the innerHTML of this element, optionally searching for and processing scripts
+ * @param {String} html The new HTML
+ * @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false)
+ * @param {Function} callback (optional) For async script loading you can be notified when the update completes
+ * @return {Ext.core.Element} this
+ */
+ update : function(html, loadScripts, callback) {
+ var me = this,
+ id,
+ dom,
+ interval;
+
+ if (!me.dom) {
+ return me;
+ }
+ html = html || '';
+ dom = me.dom;
+
+ if (loadScripts !== true) {
+ dom.innerHTML = html;
+ Ext.callback(callback, me);
+ return me;
+ }
+
+ id = Ext.id();
+ html += '';
+
+ interval = setInterval(function(){
+ if (!document.getElementById(id)) {
+ return false;
+ }
+ clearInterval(interval);
+ var DOC = document,
+ hd = DOC.getElementsByTagName("head")[0],
+ re = /(?: