- * 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.

- * Code:


-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.Element} this - */ - addListener : function(eventName, fn, scope, options){ - Ext.EventManager.on(this.dom, eventName, fn, scope || this, options); - return this; - }, + for (i = 0, len = f.length; i < len; i++) { - /** - * 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.Element} this - */ - removeListener : function(eventName, fn, scope){ - Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this); - return this; - }, + /* 0 = Original Function, + 1 = Event Manager Wrapped Function, + 2 = Scope, + 3 = Adapter Wrapped Function, + 4 = Buffered Task + */ + if (Ext.isArray(fnc = f[i]) && fnc[0] == fn && (!scope || fnc[2] == scope)) { + if(fnc[4]) { + fnc[4].cancel(); + } + k = fn.tasks && fn.tasks.length; + if(k) { + while(k--) { + fn.tasks[k].cancel(); + } + delete fn.tasks; + } + wrap = fnc[1]; + E.un(el, eventName, E.extAdapter ? fnc[3] : wrap); - /** - * Removes all previous added listeners from this element - * @return {Ext.Element} this - */ - removeAllListeners : function(){ - Ext.EventManager.removeAll(this.dom); - return this; - }, + // jQuery workaround that should be removed from Ext Core + if(wrap && el.addEventListener && eventName == "mousewheel"){ + el.removeEventListener("DOMMouseScroll", wrap, false); + } - /** - * @private Test if size has a unit, otherwise appends the default - */ - addUnits : function(size){ - if(size === "" || size == "auto" || size === undefined){ - size = size || ''; - } else if(!isNaN(size) || !unitPattern.test(size)){ - size = size + (this.defaultUnit || 'px'); - } - return size; - }, + // fix stopped mousedowns on the document + if(wrap && el == DOC && eventName == "mousedown"){ + Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap); + } - /** - *

Updates the innerHTML of this Element - * from a specified URL. Note that this is subject to the Same Origin Policy

- *

Updating innerHTML of an element will not execute embedded <script> elements. This is a browser restriction.

- * @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying - * exactly how to request the HTML. - * @return {Ext.Element} this - */ - load : function(url, params, cb){ - Ext.Ajax.request(Ext.apply({ - params: params, - url: url.url || url, - callback: cb, - el: this.dom, - indicatorText: url.indicatorText || '' - }, Ext.isObject(url) ? url : {})); - return this; - }, + f.splice(i, 1); + if (f.length === 0) { + delete Ext.elCache[id].events[eventName]; + } + for (k in Ext.elCache[id].events) { + return false; + } + Ext.elCache[id].events = {}; + return false; + } + } + }, - /** - * Tests various css rules/browsers to determine if this element uses a border box - * @return {Boolean} - */ - isBorderBox : function(){ - return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox; - }, + /** + * Removes all event handers from an element. Typically you will use {@link Ext.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(el){ + el = Ext.getDom(el); + var id = getId(el), + ec = Ext.elCache[id] || {}, + es = ec.events || {}, + f, i, len, ename, fn, k, wrap; + + for(ename in es){ + if(es.hasOwnProperty(ename)){ + f = es[ename]; + /* 0 = Original Function, + 1 = Event Manager Wrapped Function, + 2 = Scope, + 3 = Adapter Wrapped Function, + 4 = Buffered Task + */ + for (i = 0, len = f.length; i < len; i++) { + fn = f[i]; + if(fn[4]) { + fn[4].cancel(); + } + if(fn[0].tasks && (k = fn[0].tasks.length)) { + while(k--) { + fn[0].tasks[k].cancel(); + } + delete fn.tasks; + } + wrap = fn[1]; + E.un(el, ename, E.extAdapter ? fn[3] : wrap); - /** - * Removes this element from the DOM and deletes it from the cache - */ - remove : function(){ - var me = this, - dom = me.dom; - - me.removeAllListeners(); - if (dom) { - delete me.dom; - delete El.cache[dom.id]; - delete El.dataCache[dom.id]; - Ext.removeNode(dom); - } - }, + // jQuery workaround that should be removed from Ext Core + if(el.addEventListener && wrap && ename == "mousewheel"){ + el.removeEventListener("DOMMouseScroll", wrap, false); + } - /** - * 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.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; - }, + // fix stopped mousedowns on the document + if(wrap && el == DOC && ename == "mousedown"){ + Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap); + } + } + } + } + if (Ext.elCache[id]) { + Ext.elCache[id].events = {}; + } + }, - /** - * 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.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el); - }, + getListeners : function(el, eventName) { + el = Ext.getDom(el); + var id = getId(el), + ec = Ext.elCache[id] || {}, + es = ec.events || {}, + results = []; + if (es && es[eventName]) { + return es[eventName]; + } else { + return null; + } + }, - /** - * 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 - */ - getAttribute : Ext.isIE ? function(name, ns){ - var d = this.dom, - type = typeof d[ns + ":" + name]; + purgeElement : function(el, recurse, eventName) { + el = Ext.getDom(el); + var id = getId(el), + ec = Ext.elCache[id] || {}, + es = ec.events || {}, + i, f, len; + if (eventName) { + if (es && es.hasOwnProperty(eventName)) { + f = es[eventName]; + for (i = 0, len = f.length; i < len; i++) { + Ext.EventManager.removeListener(el, eventName, f[i][0]); + } + } + } else { + Ext.EventManager.removeAll(el); + } + if (recurse && el && el.childNodes) { + for (i = 0, len = el.childNodes.length; i < len; i++) { + Ext.EventManager.purgeElement(el.childNodes[i], recurse, eventName); + } + } + }, - if(['undefined', 'unknown'].indexOf(type) == -1){ - return d[ns + ":" + name]; + _unload : function() { + var el; + for (el in Ext.elCache) { + Ext.EventManager.removeAll(el); + } + delete Ext.elCache; + delete Ext.Element._flyweights; + }, + /** + * 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.Element#addListener}. It is recommended that the options + * {single: true} be used so that the handler is removed on first invocation. + */ + onDocumentReady : function(fn, scope, options){ + if(docReadyState){ // if it already fired + docReadyEvent.addListener(fn, scope, options); + docReadyEvent.fire(); + docReadyEvent.listeners = []; // clearListeners no longer compatible. Force single: true? + } else { + if(!docReadyEvent) initDocReady(); + options = options || {}; + options.delay = options.delay || 1; + docReadyEvent.addListener(fn, scope, options); + } } - return d[name]; - } : function(name, ns){ - var d = this.dom; - return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name]; - }, - - /** - * Update the innerHTML of this element - * @param {String} html The new HTML - * @return {Ext.Element} this + }; + /** + * Appends an event handler to an element. Shorthand for {@link #addListener}. + * @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. + * @param {Object} scope (optional) (this reference) in which the handler function executes. Defaults to the Element. + * @param {Object} options (optional) An object containing standard {@link #addListener} options + * @member Ext.EventManager + * @method on + */ + pub.on = pub.addListener; + /** + * Removes an event handler from an element. Shorthand for {@link #removeListener}. + * @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 #on} call. + * @param {Object} scope If a scope (this reference) was specified when the listener was added, + * then this must refer to the same object. + * @member Ext.EventManager + * @method un */ - 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.Element - * @method on - */ -ep.on = ep.addListener; + pub.un = pub.removeListener; + pub.stoppedMouseDownEvent = new Ext.util.Event(); + return pub; +}(); /** - * 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.Element} this - * @member Ext.Element - * @method un + * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}. + * @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.Element#addListener}. It is recommended that the options + * {single: true} be used so that the handler is removed on first invocation. + * @member Ext + * @method onReady */ -ep.un = ep.removeListener; +Ext.onReady = Ext.EventManager.onDocumentReady; -/** - * 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; +//Initialize doc classes +(function(){ -/** - * @private - */ -El.cache = {}; -El.dataCache = {}; + var initExtCss = function(){ + // find the body element + var bd = document.body || document.getElementsByTagName('body')[0]; + if(!bd){ return false; } + var cls = [' ', + Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8')) + : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3') + : Ext.isOpera ? "ext-opera" + : Ext.isWebKit ? "ext-webkit" : ""]; -/** - * Retrieves Ext.Element objects. - *

This method does not retrieve {@link Ext.Component Component}s. This method - * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by - * its ID, use {@link Ext.ComponentMgr#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.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 (ex = El.cache[el]) { - ex.dom = elm; - } else { - ex = El.cache[el] = new El(elm); - } - return ex; - } else if (el.tagName) { // dom element - if(!(id = el.id)){ - id = Ext.id(el); + if(Ext.isSafari){ + cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4'))); + }else if(Ext.isChrome){ + cls.push("ext-chrome"); } - if(ex = El.cache[id]){ - ex.dom = el; - }else{ - ex = El.cache[id] = new El(el); + + if(Ext.isMac){ + cls.push("ext-mac"); } - return ex; - } else if (el instanceof El) { - if(el != docEl){ - el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid, - // catch case where it hasn't been appended - El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it + if(Ext.isLinux){ + cls.push("ext-linux"); } - 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; -}; -// private method for getting and setting element data -El.data = function(el, key, value){ - var c = El.dataCache[el.id]; - if(!c){ - c = El.dataCache[el.id] = {}; - } - 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.collectorThread); - } else { - var eid, - el, - d; - - for(eid in El.cache){ - el = El.cache[eid]; - 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))){ - delete El.cache[eid]; - if(d && Ext.enableListenerCollection){ - Ext.EventManager.removeAll(d); - } + if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie" + var p = bd.parentNode; + if(p){ + p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box'; } } + bd.className += cls.join(' '); + return true; } -} -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.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} - * will be more appropriate to take advantage of the caching provided by the Ext.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.Element - * @method fly - */ -El.fly = function(el, named){ - var ret = null; - named = named || '_global'; - - if (el = Ext.getDom(el)) { - (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; - ret = El._flyweights[named]; + if(!initExtCss()){ + Ext.onReady(initExtCss); } - return ret; -}; +})(); -/** - * Retrieves Ext.Element objects. - *

- *

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.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; /** - *

- *

- * @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.EventObject + * Just as {@link Ext.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)
+    ...
 }
-
-
-Ext.EventManager.on(window, 'unload', function(){
-    delete El.cache;
-    delete El.dataCache;
-    delete El._flyweights;
-});
-})();
-/**
- * @class Ext.Element
+var myDiv = {@link Ext#get Ext.get}("myDiv");  // get reference to an {@link Ext.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 */ -Ext.Element.addMethods({ - /** - * 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.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; +Ext.EventObject = function(){ + var E = Ext.lib.Event, + // 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 + btnMap = Ext.isIE ? {1:0,4:1,2:2} : + (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2}); + + Ext.EventObjectImpl = function(e){ + if(e){ + this.setEvent(e.browserEvent || e); } - 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 worthless 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, - ni = -1; - - if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){ - return me; - } - - while(n){ - var nx = n.nextSibling; - if(n.nodeType == 3 && !/\S/.test(n.nodeValue)){ - dom.removeChild(n); + }; + + Ext.EventObjectImpl.prototype = { + /** @private */ + setEvent : function(e){ + var me = this; + if(e == me || (e && e.browserEvent)){ // already wrapped + return e; + } + me.browserEvent = e; + if(e){ + // normalize buttons + me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1); + if(e.type == 'click' && me.button == -1){ + me.button = 0; + } + me.type = e.type; + me.shiftKey = e.shiftKey; + // mac metaKey behaves like ctrlKey + me.ctrlKey = e.ctrlKey || e.metaKey || false; + me.altKey = e.altKey; + // in getKey these will be normalized for the mac + me.keyCode = e.keyCode; + me.charCode = e.charCode; + // cache the target for the delayed and or buffered events + me.target = E.getTarget(e); + // same for XY + me.xy = E.getXY(e); }else{ - n.nodeIndex = ++ni; + me.button = -1; + me.shiftKey = false; + me.ctrlKey = false; + me.altKey = false; + me.keyCode = 0; + me.charCode = 0; + me.target = null; + me.xy = [0, 0]; } - n = nx; - } - Ext.Element.data(dom, 'isCleaned', true); - return me; - }, - - /** - * Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object - * parameter as {@link Ext.Updater#update} - * @return {Ext.Element} this - */ - load : function(){ - var um = this.getUpdater(); - um.update.apply(um, arguments); - return this; - }, + return me; + }, - /** - * Gets this element's {@link Ext.Updater Updater} - * @return {Ext.Updater} The Updater - */ - getUpdater : function(){ - return this.updateManager || (this.updateManager = new Ext.Updater(this)); - }, - - /** - * 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.Element} this - */ - update : function(html, loadScripts, callback){ - html = html || ""; - - if(loadScripts !== true){ - this.dom.innerHTML = html; - if(Ext.isFunction(callback)){ - callback(); - } - return this; - } - - var id = Ext.id(), - dom = this.dom; - - html += ''; - - Ext.lib.Event.onAvailable(id, function(){ - var DOC = document, - hd = DOC.getElementsByTagName("head")[0], - re = /(?:]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig, - srcRe = /\ssrc=([\'\"])(.*?)\1/i, - typeRe = /\stype=([\'\"])(.*?)\1/i, - match, - attrs, - srcMatch, - typeMatch, - el, - s; - - while((match = re.exec(html))){ - attrs = match[1]; - srcMatch = attrs ? attrs.match(srcRe) : false; - if(srcMatch && srcMatch[2]){ - s = DOC.createElement("script"); - s.src = srcMatch[2]; - typeMatch = attrs.match(typeRe); - if(typeMatch && typeMatch[2]){ - s.type = typeMatch[2]; - } - hd.appendChild(s); - }else if(match[2] && match[2].length > 0){ - if(window.execScript) { - window.execScript(match[2]); - } else { - window.eval(match[2]); - } + /** + * Stop the event (preventDefault and stopPropagation) + */ + stopEvent : function(){ + var me = this; + if(me.browserEvent){ + if(me.browserEvent.type == 'mousedown'){ + Ext.EventManager.stoppedMouseDownEvent.fire(me); } + E.stopEvent(me.browserEvent); } - el = DOC.getElementById(id); - if(el){Ext.removeNode(el);} - if(Ext.isFunction(callback)){ - callback(); - } - }); - dom.innerHTML = html.replace(/(?:)((\n|\r|.)*?)(?:<\/script>)/ig, ""); - return this; - }, - - /** - * Creates a proxy element of this element - * @param {String/Object} config The class name of the proxy element or a DomHelper config object - * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body) - * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false) - * @return {Ext.Element} The new proxy element - */ - createProxy : function(config, renderTo, matchBox){ - config = Ext.isObject(config) ? config : {tag : "div", cls: config}; - - var me = this, - proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) : - Ext.DomHelper.insertBefore(me.dom, config, true); - - if(matchBox && me.setBox && me.getBox){ // check to make sure Element.position.js is loaded - proxy.setBox(me.getBox()); - } - return proxy; - } -}); - -Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater; - -// private -Ext.Element.uncache = function(el){ - for(var i = 0, a = arguments, len = a.length; i < len; i++) { - if(a[i]){ - delete Ext.Element.cache[a[i].id || a[i]]; - } - } -};/** - * @class Ext.Element - */ -Ext.Element.addMethods({ - /** - * Gets the x,y coordinates specified by the anchor position on the element. - * @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo} - * for details on supported anchor positions. - * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead - * of page coordinates - * @param {Object} size (optional) An object containing the size to use for calculating anchor position - * {width: (target width), height: (target height)} (defaults to the element's current size) - * @return {Array} [x, y] An array containing the element's x and y coordinates - */ - getAnchorXY : function(anchor, local, s){ - //Passing a different size is useful for pre-calculating anchors, - //especially for anchored animations that change the el size. - anchor = (anchor || "tl").toLowerCase(); - s = s || {}; - - var me = this, - vp = me.dom == document.body || me.dom == document, - w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(), - h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(), - xy, - r = Math.round, - o = me.getXY(), - scroll = me.getScroll(), - extraX = vp ? scroll.left : !local ? o[0] : 0, - extraY = vp ? scroll.top : !local ? o[1] : 0, - hash = { - c : [r(w * 0.5), r(h * 0.5)], - t : [r(w * 0.5), 0], - l : [0, r(h * 0.5)], - r : [w, r(h * 0.5)], - b : [r(w * 0.5), h], - tl : [0, 0], - bl : [0, h], - br : [w, h], - tr : [w, 0] - }; - - xy = hash[anchor]; - return [xy[0] + extraX, xy[1] + extraY]; - }, - - /** - * Anchors an element to another element and realigns it when the window is resized. - * @param {Mixed} element The element to align to. - * @param {String} position The position to align to. - * @param {Array} offsets (optional) Offset the positioning by [x, y] - * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object - * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter - * is a number, it is used as the buffer delay (defaults to 50ms). - * @param {Function} callback The function to call after the animation finishes - * @return {Ext.Element} this - */ - anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){ - var me = this, - dom = me.dom; - - function action(){ - Ext.fly(dom).alignTo(el, alignment, offsets, animate); - Ext.callback(callback, Ext.fly(dom)); - } - - Ext.EventManager.onWindowResize(action, me); - - if(!Ext.isEmpty(monitorScroll)){ - Ext.EventManager.on(window, 'scroll', action, me, - {buffer: !isNaN(monitorScroll) ? monitorScroll : 50}); - } - action.call(me); // align immediately - return me; - }, + }, - /** - * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the - * supported position values. - * @param {Mixed} element The element to align to. - * @param {String} position The position to align to. - * @param {Array} offsets (optional) Offset the positioning by [x, y] - * @return {Array} [x, y] - */ - getAlignToXY : function(el, p, o){ - el = Ext.get(el); - - if(!el || !el.dom){ - throw "Element.alignToXY with an element that doesn't exist"; - } - - o = o || [0,0]; - p = (p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase(); - - var me = this, - d = me.dom, - a1, - a2, - x, - y, - //constrain the aligned el to viewport if necessary - w, - h, - r, - dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie - dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie - p1y, - p1x, - p2y, - p2x, - swapY, - swapX, - doc = document, - docElement = doc.documentElement, - docBody = doc.body, - scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5, - scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5, - c = false, //constrain to viewport - p1 = "", - p2 = "", - m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/); - - if(!m){ - throw "Element.alignTo with an invalid alignment " + p; - } - - p1 = m[1]; - p2 = m[2]; - c = !!m[3]; - - //Subtract the aligned el's internal xy from the target's offset xy - //plus custom offset to get the aligned el's new offset xy - a1 = me.getAnchorXY(p1, true); - a2 = el.getAnchorXY(p2, false); - - x = a2[0] - a1[0] + o[0]; - y = a2[1] - a1[1] + o[1]; - - if(c){ - w = me.getWidth(); - h = me.getHeight(); - r = el.getRegion(); - //If we are at a viewport boundary and the aligned el is anchored on a target border that is - //perpendicular to the vp border, allow the aligned el to slide on that border, - //otherwise swap the aligned el to the opposite border of the target. - p1y = p1.charAt(0); - p1x = p1.charAt(p1.length-1); - p2y = p2.charAt(0); - p2x = p2.charAt(p2.length-1); - swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t")); - swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r")); - - - if (x + w > dw + scrollX) { - x = swapX ? r.left-w : dw+scrollX-w; - } - if (x < scrollX) { - x = swapX ? r.right : scrollX; - } - if (y + h > dh + scrollY) { - y = swapY ? r.top-h : dh+scrollY-h; + /** + * Prevents the browsers default handling of the event. + */ + preventDefault : function(){ + if(this.browserEvent){ + E.preventDefault(this.browserEvent); } - if (y < scrollY){ - y = swapY ? r.bottom : scrollY; - } - } - return [x,y]; - }, - - /** - * Aligns this element with another element relative to the specified anchor points. If the other element is the - * document it aligns it to the viewport. - * The position parameter is optional, and can be specified in any one of the following formats: - *

Blank: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").
One anchor (deprecated): The passed anchor position is used as the target element's anchor point. - * The element being aligned will position its top-left corner (tl) to that point. This method has been - * deprecated in favor of the newer two anchor syntax below.
Two anchors: If two values from the table below are passed separated by a dash, the first value is used as the - * element's anchor point, and the second value is used as the target's anchor point.

- * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of - * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to - * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than - * that specified in order to enforce the viewport constraints. - * Following are all of the supported anchor positions: -

-Value  Description
------  -----------------------------
-tl     The top left corner (default)
-t      The center of the top edge
-tr     The top right corner
-l      The center of the left edge
-c      In the center of the element
-r      The center of the right edge
-bl     The bottom left corner
-b      The center of the bottom edge
-br     The bottom right corner
-

-Example Usage: -


-// align el to other-el using the default positioning ("tl-bl", non-constrained)
-el.alignTo("other-el");
-
-// align the top left corner of el with the top right corner of other-el (constrained to viewport)
-el.alignTo("other-el", "tr?");
-
-// align the bottom right corner of el with the center left edge of other-el
-el.alignTo("other-el", "br-l?");
+        },
 
-// align the center of el with the bottom left corner of other-el and
-// adjust the x position by -6 pixels (and the y position by 0)
-el.alignTo("other-el", "c-bl", [-6, 0]);
-

- * @param {Mixed} element The element to align to. - * @param {String} position The position to align to. - * @param {Array} offsets (optional) Offset the positioning by [x, y] - * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object - * @return {Ext.Element} this - */ - alignTo : function(element, position, offsets, animate){ - var me = this; - return me.setXY(me.getAlignToXY(element, position, offsets), - me.preanim && !!animate ? me.preanim(arguments, 3) : false); - }, - - // private ==> used outside of core - adjustForConstraints : function(xy, parent, offsets){ - return this.getConstrainToXY(parent || document, false, offsets, xy) || xy; - }, + /** + * Cancels bubbling of the event. + */ + stopPropagation : function(){ + var me = this; + if(me.browserEvent){ + if(me.browserEvent.type == 'mousedown'){ + Ext.EventManager.stoppedMouseDownEvent.fire(me); + } + E.stopPropagation(me.browserEvent); + } + }, - // private ==> used outside of core - getConstrainToXY : function(el, local, offsets, proposedXY){ - var os = {top:0, left:0, bottom:0, right: 0}; + /** + * Gets the character code for the event. + * @return {Number} + */ + getCharCode : function(){ + return this.charCode || this.keyCode; + }, - return function(el, local, offsets, proposedXY){ - el = Ext.get(el); - offsets = offsets ? Ext.applyIf(offsets, os) : os; + /** + * Returns a normalized keyCode for the event. + * @return {Number} The key code + */ + getKey : function(){ + return this.normalizeKey(this.keyCode || this.charCode) + }, - var vw, vh, vx = 0, vy = 0; - if(el.dom == document.body || el.dom == document){ - vw =Ext.lib.Dom.getViewWidth(); - vh = Ext.lib.Dom.getViewHeight(); - }else{ - vw = el.dom.clientWidth; - vh = el.dom.clientHeight; - if(!local){ - var vxy = el.getXY(); - vx = vxy[0]; - vy = vxy[1]; - } - } + // private + normalizeKey: function(k){ + return Ext.isSafari ? (safariKeys[k] || k) : k; + }, - var s = el.getScroll(); + /** + * Gets the x coordinate of the event. + * @return {Number} + */ + getPageX : function(){ + return this.xy[0]; + }, - vx += offsets.left + s.left; - vy += offsets.top + s.top; + /** + * Gets the y coordinate of the event. + * @return {Number} + */ + getPageY : function(){ + return this.xy[1]; + }, - vw -= offsets.right; - vh -= offsets.bottom; + /** + * Gets the page coordinates of the event. + * @return {Array} The xy values like [x, y] + */ + getXY : function(){ + return this.xy; + }, - var vr = vx+vw; - var vb = vy+vh; + /** + * 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.Element object instead of DOM node + * @return {HTMLelement} + */ + getTarget : function(selector, maxDepth, returnEl){ + return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target); + }, - var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]); - var x = xy[0], y = xy[1]; - var w = this.dom.offsetWidth, h = this.dom.offsetHeight; + /** + * Gets the related target. + * @return {HTMLElement} + */ + getRelatedTarget : function(){ + return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null; + }, - // only move it if it needs it - var moved = false; + /** + * Normalizes mouse wheel delta across browsers + * @return {Number} The delta + */ + getWheelDelta : function(){ + var e = this.browserEvent; + var delta = 0; + if(e.wheelDelta){ /* IE/Opera. */ + delta = e.wheelDelta/120; + }else if(e.detail){ /* Mozilla case. */ + delta = -e.detail/3; + } + return delta; + }, - // first validate right/bottom - if((x + w) > vr){ - x = vr - w; - moved = true; + /** + * 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!');
             }
-            if((y + h) > vb){
-                y = vb - h;
-                moved = true;
+        });
+
+        // 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!');
             }
-            // then make sure top/left isn't negative
-            if(x < vx){
-                x = vx;
-                moved = true;
+        });
+

+ * @param {Mixed} el The id, DOM element or Ext.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 = this[related ? "getRelatedTarget" : "getTarget"](); + return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t)); } - if(y < vy){ - y = vy; - moved = true; - } - return moved ? [x, y] : false; - }; - }(), - - - -// el = Ext.get(el); -// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0}); - -// var me = this, -// doc = document, -// s = el.getScroll(), -// vxy = el.getXY(), -// vx = offsets.left + s.left, -// vy = offsets.top + s.top, -// vw = -offsets.right, -// vh = -offsets.bottom, -// vr, -// vb, -// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]), -// x = xy[0], -// y = xy[1], -// w = me.dom.offsetWidth, h = me.dom.offsetHeight, -// moved = false; // only move it if it needs it -// -// -// if(el.dom == doc.body || el.dom == doc){ -// vw += Ext.lib.Dom.getViewWidth(); -// vh += Ext.lib.Dom.getViewHeight(); -// }else{ -// vw += el.dom.clientWidth; -// vh += el.dom.clientHeight; -// if(!local){ -// vx += vxy[0]; -// vy += vxy[1]; -// } -// } - -// // first validate right/bottom -// if(x + w > vx + vw){ -// x = vx + vw - w; -// moved = true; -// } -// if(y + h > vy + vh){ -// y = vy + vh - h; -// moved = true; -// } -// // then make sure top/left isn't negative -// if(x < vx){ -// x = vx; -// moved = true; -// } -// if(y < vy){ -// y = vy; -// moved = true; -// } -// return moved ? [x, y] : false; -// }, - - /** - * Calculates the x, y to center this element on the screen - * @return {Array} The x, y values [x, y] - */ - getCenterXY : function(){ - return this.getAlignToXY(document, 'c-c'); - }, + return false; + } + }; - /** - * Centers the Element in either the viewport, or another Element. - * @param {Mixed} centerIn (optional) The element in which to center the element. - */ - center : function(centerIn){ - return this.alignTo(centerIn || document, 'c-c'); - } -}); -/** - * @class Ext.Element - */ -Ext.Element.addMethods(function(){ - var PARENTNODE = 'parentNode', - NEXTSIBLING = 'nextSibling', - PREVIOUSSIBLING = 'previousSibling', - DQ = Ext.DomQuery, - GET = Ext.get; - - return { - /** - * 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.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; - if(Ext.isGecko && Object.prototype.toString.call(p) == '[object XULElement]') { - return null; - } - 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(DQ.is(p, simpleSelector)){ - return returnEl ? 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.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.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.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 - * @param {Boolean} unique (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object) - * @return {CompositeElement/CompositeElementLite} The composite element - */ - select : function(selector, unique){ - return Ext.Element.select(selector, unique, 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, unique){ - return DQ.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.Element (defaults to false) - * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true) - */ - child : function(selector, returnDom){ - var n = DQ.selectNode(selector, this.dom); - return returnDom ? n : 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.Element (defaults to false) - * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true) - */ - down : function(selector, returnDom){ - var n = DQ.selectNode(" > " + selector, this.dom); - return returnDom ? n : GET(n); - }, - - /** - * 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.Element - * @return {Ext.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.Element - * @return {Ext.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.Element - * @return {Ext.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.Element - * @return {Ext.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.Element - * @return {Ext.Element/HTMLElement} The last child or null - */ - last : function(selector, returnDom){ - return this.matchNode(PREVIOUSSIBLING, 'lastChild', selector, returnDom); - }, - - matchNode : function(dir, start, selector, returnDom){ - var n = this.dom[start]; - while(n){ - if(n.nodeType == 1 && (!selector || DQ.is(n, selector))){ - return !returnDom ? GET(n) : n; - } - n = n[dir]; - } - return null; - } - } -}());/** - * @class Ext.Element - */ -Ext.Element.addMethods( -function() { - var GETDOM = Ext.getDom, - GET = Ext.get, - DH = Ext.DomHelper; - - return { - /** - * Appends the passed element(s) to this element - * @param {String/HTMLElement/Array/Element/CompositeElement} el - * @return {Ext.Element} this - */ - appendChild: function(el){ - return GET(el).appendTo(this); - }, - - /** - * Appends this element to the passed element - * @param {Mixed} el The new parent element - * @return {Ext.Element} this - */ - appendTo: function(el){ - 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.Element} this - */ - insertBefore: function(el){ - (el = GETDOM(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.Element} this - */ - insertAfter: function(el){ - (el = GETDOM(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.Element} The new child - */ - insertFirst: function(el, returnDom){ - el = el || {}; - if(el.nodeType || el.dom || typeof el == 'string'){ // element - el = GETDOM(el); - this.dom.insertBefore(el, this.dom.firstChild); - return !returnDom ? GET(el) : el; - }else{ // dh config - return this.createChild(el, this.dom.firstChild, returnDom); - } - }, - - /** - * Replaces the passed element with this element - * @param {Mixed} el The element to replace - * @return {Ext.Element} this - */ - replace: function(el){ - el = 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.Element} this - */ - replaceWith: function(el){ - var me = this, - Element = Ext.Element; - if(el.nodeType || el.dom || typeof el == 'string'){ - el = GETDOM(el); - me.dom.parentNode.insertBefore(el, me.dom); - }else{ - el = DH.insertBefore(me.dom, el); - } - - delete Element.cache[me.id]; - Ext.removeNode(me.dom); - me.id = Ext.id(me.dom = el); - return Element.cache[me.id] = 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.Element} The new child element - */ - createChild: function(config, insertBefore, returnDom){ - config = config || {tag:'div'}; - return insertBefore ? - DH.insertBefore(insertBefore, config, returnDom !== true) : - DH[!this.dom.firstChild ? 'overwrite' : '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.Element - * @return {HTMLElement/Element} The newly created wrapper element - */ - wrap: function(config, returnDom){ - var newEl = DH.insertBefore(this.dom, config || {tag: "div"}, !returnDom); - newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.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.Element (defaults to false) - * @return {HTMLElement/Ext.Element} The inserted node (or nearest related if more than 1 inserted) - */ - insertHtml : function(where, html, returnEl){ - var el = DH.insertHtml(where, this.dom, html); - return returnEl ? Ext.get(el) : el; - } - } -}());/** - * @class Ext.Element - */ -Ext.apply(Ext.Element.prototype, function() { - var GETDOM = Ext.getDom, - GET = Ext.get, - DH = Ext.DomHelper; - - return { - /** - * 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 raw DOM element instead of Ext.Element - * @return {Ext.Element} the inserted Element - */ - insertSibling: function(el, where, returnDom){ - var me = this, - rt; - - if(Ext.isArray(el)){ - Ext.each(el, function(e) { - rt = me.insertSibling(e, where, returnDom); - }); - return rt; - } - - where = (where || 'before').toLowerCase(); - el = el || {}; - - if(el.nodeType || el.dom){ - rt = me.dom.parentNode.insertBefore(GETDOM(el), where == 'before' ? me.dom : me.dom.nextSibling); - if (!returnDom) { - rt = GET(rt); - } - }else{ - if (where == 'after' && !me.dom.nextSibling) { - rt = DH.append(me.dom.parentNode, el, !returnDom); - } else { - rt = DH[where == 'after' ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom); - } - } - return rt; - } - }; -}());/** + return new Ext.EventObjectImpl(); +}(); +/** +* @class Ext.EventManager +*/ +Ext.apply(Ext.EventManager, function(){ + var resizeEvent, + resizeTask, + textEvent, + textSize, + D = Ext.lib.Dom, + propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/, + curWidth = 0, + curHeight = 0, + // 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) + useKeydown = Ext.isWebKit ? + Ext.num(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1]) >= 525 : + !((Ext.isGecko && !Ext.isWindows) || Ext.isOpera); + + return { + // private + doResizeEvent: function(){ + var h = D.getViewHeight(), + w = D.getViewWidth(); + + //whacky problem in IE where the resize event will fire even though the w/h are the same. + if(curHeight != h || curWidth != w){ + resizeEvent.fire(curWidth = w, curHeight = h); + } + }, + + /** + * 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.Element#addListener} + */ + onWindowResize : function(fn, scope, options){ + if(!resizeEvent){ + resizeEvent = new Ext.util.Event(); + resizeTask = new Ext.util.DelayedTask(this.doResizeEvent); + Ext.EventManager.on(window, "resize", this.fireWindowResize, this); + } + resizeEvent.addListener(fn, scope, options); + }, + + // exposed only to allow manual firing + fireWindowResize : function(){ + if(resizeEvent){ + resizeTask.delay(100); + } + }, + + /** + * Adds a listener to be notified when the user changes the active text size. Handler gets called with 2 params, the old size and the new size. + * @param {Function} fn The function the 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.Element#addListener} + */ + onTextResize : function(fn, scope, options){ + if(!textEvent){ + textEvent = new Ext.util.Event(); + var textEl = new Ext.Element(document.createElement('div')); + textEl.dom.className = 'x-text-resize'; + textEl.dom.innerHTML = 'X'; + textEl.appendTo(document.body); + textSize = textEl.dom.offsetHeight; + setInterval(function(){ + if(textEl.dom.offsetHeight != textSize){ + textEvent.fire(textSize, textSize = textEl.dom.offsetHeight); + } + }, this.textResizeInterval); + } + textEvent.addListener(fn, scope, options); + }, + + /** + * 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(resizeEvent){ + resizeEvent.removeListener(fn, scope); + } + }, + + // private + fireResize : function(){ + if(resizeEvent){ + resizeEvent.fire(D.getViewWidth(), D.getViewHeight()); + } + }, + + /** + * The frequency, in milliseconds, to check for text resize events (defaults to 50) + */ + textResizeInterval : 50, + + /** + * Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL) + */ + ieDeferSrc : false, + + // protected for use inside the framework + // detects whether we should use keydown or keypress based on the browser. + useKeydown: useKeydown + }; +}()); + +Ext.EventManager.on = Ext.EventManager.addListener; + + +Ext.apply(Ext.EventObjectImpl.prototype, { + /** 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, + CONTROL : 17, // legacy + /** 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, + PAGEUP : 33, // legacy + /** Key constant @type Number */ + PAGE_DOWN: 34, + PAGEDOWN : 34, // legacy + /** 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, + + /** @private */ + 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; + }, + + 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 <= 45); // Print Screen, Insert + }, + + getPoint : function(){ + return new Ext.lib.Point(this.xy[0], this.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); + } +});/** * @class Ext.Element + *

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} 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);
+

+ * Animations
+ *

When 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} animation options specific to Fx effects. The supported + * Element animation configuration options are:

+Option    Default   Description
+--------- --------  ---------------------------------------------
+{@link Ext.Fx#duration duration}  .35       The duration of the animation in seconds
+{@link Ext.Fx#easing easing}    easeOut   The easing method
+{@link Ext.Fx#callback callback}  none      A function to execute when the anim completes
+{@link Ext.Fx#scope scope}     this      The scope (this) of the callback function
+

+ * + *


+// Element animation options object
+var opt = {
+    {@link Ext.Fx#duration duration}: 1,
+    {@link Ext.Fx#easing easing}: 'elasticIn',
+    {@link Ext.Fx#callback callback}: this.foo,
+    {@link Ext.Fx#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). */ -Ext.Element.addMethods(function(){ - // local style camelizing for speed - var propCache = {}, - camelRe = /(-[a-z])/gi, - classReCache = {}, - view = document.defaultView, - propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat', - opacityRe = /alpha$opacity=(.*)$/i, - trimRe = /^\s+|\s+$/g, - EL = Ext.Element, - PADDING = "padding", - MARGIN = "margin", - BORDER = "border", - LEFT = "-left", - RIGHT = "-right", - TOP = "-top", - BOTTOM = "-bottom", - WIDTH = "-width", - MATH = Math, - HIDDEN = 'hidden', - ISCLIPPED = 'isClipped', - OVERFLOW = 'overflow', - OVERFLOWX = 'overflow-x', - OVERFLOWY = 'overflow-y', - ORIGINALCLIP = 'originalClip', - // special markup used throughout Ext when box wrapping elements - 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}, - data = Ext.Element.data; - - - // private - function camelFn(m, a) { - return a.charAt(1).toUpperCase(); - } - - function chkCache(prop) { - return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn)); +(function(){ +var DOC = document; + +Ext.Element = function(element, forceNew){ + var dom = typeof element == "string" ? + DOC.getElementById(element) : element, + id; + + if(!dom) return null; + + id = dom.id; + + if(!forceNew && id && Ext.elCache[id]){ // element object already exists + return Ext.elCache[id].el; } - - return { - // private ==> used by Fx - adjustWidth : function(width) { - var me = this; - var isNum = Ext.isNumber(width); - if(isNum && me.autoBoxAdjust && !me.isBorderBox()){ - width -= (me.getBorderWidth("lr") + me.getPadding("lr")); - } - return (isNum && width < 0) ? 0 : width; - }, - - // private ==> used by Fx - adjustHeight : function(height) { - var me = this; - var isNum = Ext.isNumber(height); - if(isNum && me.autoBoxAdjust && !me.isBorderBox()){ - height -= (me.getBorderWidth("tb") + me.getPadding("tb")); - } - return (isNum && height < 0) ? 0 : height; - }, - - - /** - * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. - * @param {String/Array} className The CSS class to add, or an array of classes - * @return {Ext.Element} this - */ - addClass : function(className){ - var me = this; - Ext.each(className, function(v) { - me.dom.className += (!me.hasClass(v) && v ? " " + v : ""); - }); - return me; - }, - - /** - * Adds one or more CSS classes to this element and removes the same class(es) from all siblings. - * @param {String/Array} className The CSS class to add, or an array of classes - * @return {Ext.Element} this - */ - radioClass : function(className){ - Ext.each(this.dom.parentNode.childNodes, function(v) { - if(v.nodeType == 1) { - Ext.fly(v, '_internal').removeClass(className); + + /** + * The DOM element + * @type HTMLElement + */ + this.dom = dom; + + /** + * The DOM element ID + * @type String + */ + this.id = id || Ext.id(dom); +}; + +var D = Ext.lib.Dom, + DH = Ext.DomHelper, + E = Ext.lib.Event, + A = Ext.lib.Anim, + El = Ext.Element, + EC = Ext.elCache; + +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.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.addClass(className); - }, - - /** - * Removes one or more CSS classes from the element. - * @param {String/Array} className The CSS class to remove, or an array of classes - * @return {Ext.Element} this - */ - removeClass : function(className){ - var me = this; - if (me.dom && me.dom.className) { - Ext.each(className, function(v) { - me.dom.className = me.dom.className.replace( - classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), - " "); - }); } - return me; - }, - - /** - * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it). - * @param {String} className The CSS class to toggle - * @return {Ext.Element} this - */ - toggleClass : function(className){ - return this.hasClass(className) ? this.removeClass(className) : this.addClass(className); - }, - - /** - * Checks if the specified CSS class exists on this element's DOM node. - * @param {String} className The CSS class to check for - * @return {Boolean} True if the class exists, else false - */ - hasClass : function(className){ - return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1; - }, - - /** - * Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added. - * @param {String} oldClassName The CSS class to replace - * @param {String} newClassName The replacement CSS class - * @return {Ext.Element} this - */ - replaceClass : function(oldClassName, newClassName){ - return this.removeClass(oldClassName).addClass(newClassName); - }, - - isStyle : function(style, val) { - return this.getStyle(style) == val; - }, - - /** - * Normalizes currentStyle and computedStyle. - * @param {String} property The style property whose value is returned. - * @return {String} The current value of the style property for this element. - */ - getStyle : function(){ - return view && view.getComputedStyle ? - function(prop){ - var el = this.dom, - v, - cs, - out; - if(el == document) return null; - prop = chkCache(prop); - out = (v = el.style[prop]) ? v : - (cs = view.getComputedStyle(el, "")) ? cs[prop] : null; - - // Webkit returns rgb values for transparent. - if(Ext.isWebKit && out == 'rgba(0, 0, 0, 0)'){ - out = 'transparent'; - } - return out; - } : - function(prop){ - var el = this.dom, - m, - cs; - - if(el == document) return null; - if (prop == 'opacity') { - if (el.style.filter.match) { - if(m = el.style.filter.match(opacityRe)){ - var fv = parseFloat(m[1]); - if(!isNaN(fv)){ - return fv ? fv / 100 : 0; - } - } - } - return 1; - } - prop = chkCache(prop); - return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null); - }; - }(), + } + return this; + }, - /** - * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values - * are convert to standard 6 digit hex color. - * @param {String} attr The css attribute - * @param {String} defaultValue The default value to use when a valid color isn't found - * @param {String} prefix (optional) defaults to #. Use an empty string when working with - * color anims. - */ - getColor : function(attr, defaultValue, prefix){ - var v = this.getStyle(attr), - color = Ext.isDefined(prefix) ? prefix : '#', - h; - - if(!v || /transparent|inherit/.test(v)){ - return defaultValue; - } - if(/^r/.test(v)){ - Ext.each(v.slice(4, v.length -1).split(','), function(s){ - h = parseInt(s, 10); - color += (h < 16 ? '0' : '') + h.toString(16); - }); +// 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.Element} this + */ + focus : function(defer, /* private */ dom) { + var me = this, + dom = dom || me.dom; + try{ + if(Number(defer)){ + me.focus.defer(defer, null, [null, dom]); }else{ - v = v.replace('#', ''); - color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v; + dom.focus(); } - return(color.length > 5 ? color.toLowerCase() : defaultValue); - }, - - /** - * Wrapper for setting style properties, also takes single object parameter of multiple styles. - * @param {String/Object} property The style property to be set, or an object of multiple styles. - * @param {String} value (optional) The value to apply to the given property, or null if an object was passed. - * @return {Ext.Element} this - */ - setStyle : function(prop, value){ - var tmp, - style, - camel; - if (!Ext.isObject(prop)) { - tmp = {}; - tmp[prop] = value; - prop = tmp; + }catch(e){} + return me; + }, + + /** + * Tries to blur the element. Any exceptions are caught and ignored. + * @return {Ext.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:

evt : EventObject
The {@link Ext.EventObject EventObject} describing the event.
el : HtmlElement
The DOM element which was the target of the event. + * Note that this may be filtered by using the delegate option.
o : Object
The options object from the addListener call.

+ * @param {Object} scope (optional) The scope (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:

scope Object :
The scope (this reference) in which the handler function is executed. + * If omitted, defaults to this Element.
delegate String:
A simple selector to filter the target or look for a descendant of the target. See below for additional details.
stopEvent Boolean:
True to stop the event. That is stop propagation, and prevent the default action.
preventDefault Boolean:
True to prevent the default action
stopPropagation Boolean:
True to prevent event propagation
normalized Boolean:
False to pass a browser event to the handler function instead of an Ext.EventObject
target Ext.Element:
Only call the handler if the event was fired on the target Element, not if the event was bubbled up from a child node.
delay Number:
The number of milliseconds to delay the invocation of the handler after the event fires.
single Boolean:
True to add a handler to handle just the next firing of the event, and then remove itself.
buffer Number:
Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed + * by the specified number of milliseconds. If the event fires again within that time, the original + * handler is not invoked, but the new handler is scheduled in its place.

+ *

+ * 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.

+ * Code:


+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.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.Element} this + */ + removeListener : function(eventName, fn, scope){ + Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this); + return this; + }, + + /** + * Removes all previous added listeners from this element + * @return {Ext.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.Element} this + */ + purgeAllListeners : function() { + Ext.EventManager.purgeElement(this, true); + return this; + }, + /** + * @private Test if size has a unit, otherwise appends the default + */ + addUnits : function(size){ + if(size === "" || size == "auto" || size === undefined){ + size = size || ''; + } else if(!isNaN(size) || !unitPattern.test(size)){ + size = size + (this.defaultUnit || 'px'); + } + return size; + }, + + /** + *

Updates the innerHTML of this Element + * from a specified URL. Note that this is subject to the Same Origin Policy

+ *

Updating innerHTML of an element will not execute embedded <script> elements. This is a browser restriction.

+ * @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying + * exactly how to request the HTML. + * @return {Ext.Element} this + */ + load : function(url, params, cb){ + Ext.Ajax.request(Ext.apply({ + params: params, + url: url.url || url, + callback: cb, + el: this.dom, + indicatorText: url.indicatorText || '' + }, Ext.isObject(url) ? url : {})); + return this; + }, + + /** + * Tests various css rules/browsers to determine if this element uses a border box + * @return {Boolean} + */ + isBorderBox : function(){ + return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox; + }, + + /** + *

Removes this element's dom reference. Note that event and cache removal is handled at {@link 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.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.lib.Dom.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 + */ + getAttribute : Ext.isIE ? function(name, ns){ + var d = this.dom, + type = typeof d[ns + ":" + name]; + + if(['undefined', 'unknown'].indexOf(type) == -1){ + return d[ns + ":" + name]; + } + return d[name]; + } : function(name, ns){ + var d = this.dom; + return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name]; + }, + + /** + * Update the innerHTML of this element + * @param {String} html The new HTML + * @return {Ext.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.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.Element} this + * @member Ext.Element + * @method un + */ +ep.un = ep.removeListener; + +/** + * 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; + +/** + * @private + */ + +/** + * Retrieves Ext.Element objects. + *

This method does not retrieve {@link Ext.Component Component}s. This method + * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by + * its ID, use {@link Ext.ComponentMgr#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.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){ + el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid, + // catch case where it hasn't been appended + } + 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){ + 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){ + o = EC[eid]; + if(o.skipGC){ + continue; } - for (style in prop) { - value = prop[style]; - style == 'opacity' ? - this.setOpacity(value) : - this.dom.style[chkCache(style)] = value; + 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(Ext.enableListenerCollection){ + Ext.EventManager.removeAll(d); + } + delete EC[eid]; } - return this; - }, - - /** - * Set the opacity of the element - * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc - * @param {Boolean/Object} animate (optional) a standard Element animation config object or true for - * the default animation ({duration: .35, easing: 'easeIn'}) - * @return {Ext.Element} this - */ - setOpacity : function(opacity, animate){ - var me = this, - s = me.dom.style; - - if(!animate || !me.anim){ - if(Ext.isIE){ - var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', - val = s.filter.replace(opacityRe, '').replace(trimRe, ''); + } + // Cleanup IE Object leaks + if (Ext.isIE) { + var t = {}; + for (eid in EC) { + t[eid] = EC[eid]; + } + EC = Ext.elCache = t; + } + } +} +El.collectorThreadId = setInterval(garbageCollect, 30000); - s.zoom = 1; - s.filter = val + (val.length > 0 ? ' ' : '') + opac; - }else{ - s.opacity = opacity; - } - }else{ - me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn'); +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.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} + * will be more appropriate to take advantage of the caching provided by the Ext.Element class.

+ *

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.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; + +/** + *

+ *

+ * @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.Element + */ +Ext.Element.addMethods({ + /** + * 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.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; - }, - - /** - * Clears any opacity settings from this element. Required in some cases for IE. - * @return {Ext.Element} this - */ - clearOpacity : function(){ - var style = this.dom.style; - if(Ext.isIE){ - if(!Ext.isEmpty(style.filter)){ - style.filter = style.filter.replace(opacityRe, '').replace(trimRe, ''); - } + } + 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 worthless 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, + ni = -1; + + if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){ + return me; + } + + while(n){ + var nx = n.nextSibling; + if(n.nodeType == 3 && !/\S/.test(n.nodeValue)){ + dom.removeChild(n); }else{ - style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = ''; + n.nodeIndex = ++ni; + } + n = nx; + } + Ext.Element.data(dom, 'isCleaned', true); + return me; + }, + + /** + * Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object + * parameter as {@link Ext.Updater#update} + * @return {Ext.Element} this + */ + load : function(){ + var um = this.getUpdater(); + um.update.apply(um, arguments); + return this; + }, + + /** + * Gets this element's {@link Ext.Updater Updater} + * @return {Ext.Updater} The Updater + */ + getUpdater : function(){ + return this.updateManager || (this.updateManager = new Ext.Updater(this)); + }, + + /** + * 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.Element} this + */ + update : function(html, loadScripts, callback){ + if (!this.dom) { + return this; + } + html = html || ""; + + if(loadScripts !== true){ + this.dom.innerHTML = html; + if(Ext.isFunction(callback)){ + callback(); } return this; - }, + } + + var id = Ext.id(), + dom = this.dom; + + html += ''; + + Ext.lib.Event.onAvailable(id, function(){ + var DOC = document, + hd = DOC.getElementsByTagName("head")[0], + re = /(?:]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig, + srcRe = /\ssrc=([\'\"])(.*?)\1/i, + typeRe = /\stype=([\'\"])(.*?)\1/i, + match, + attrs, + srcMatch, + typeMatch, + el, + s; + + while((match = re.exec(html))){ + attrs = match[1]; + srcMatch = attrs ? attrs.match(srcRe) : false; + if(srcMatch && srcMatch[2]){ + s = DOC.createElement("script"); + s.src = srcMatch[2]; + typeMatch = attrs.match(typeRe); + if(typeMatch && typeMatch[2]){ + s.type = typeMatch[2]; + } + hd.appendChild(s); + }else if(match[2] && match[2].length > 0){ + if(window.execScript) { + window.execScript(match[2]); + } else { + window.eval(match[2]); + } + } + } + el = DOC.getElementById(id); + if(el){Ext.removeNode(el);} + if(Ext.isFunction(callback)){ + callback(); + } + }); + dom.innerHTML = html.replace(/(?:)((\n|\r|.)*?)(?:<\/script>)/ig, ""); + return this; + }, + + // inherit docs, overridden so we can add removeAnchor + removeAllListeners : function(){ + this.removeAnchor(); + Ext.EventManager.removeAll(this.dom); + return this; + }, + + /** + * Creates a proxy element of this element + * @param {String/Object} config The class name of the proxy element or a DomHelper config object + * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body) + * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false) + * @return {Ext.Element} The new proxy element + */ + createProxy : function(config, renderTo, matchBox){ + config = Ext.isObject(config) ? config : {tag : "div", cls: config}; + + var me = this, + proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) : + Ext.DomHelper.insertBefore(me.dom, config, true); + + if(matchBox && me.setBox && me.getBox){ // check to make sure Element.position.js is loaded + proxy.setBox(me.getBox()); + } + return proxy; + } +}); + +Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater; +/** + * @class Ext.Element + */ +Ext.Element.addMethods({ + /** + * Gets the x,y coordinates specified by the anchor position on the element. + * @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo} + * for details on supported anchor positions. + * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead + * of page coordinates + * @param {Object} size (optional) An object containing the size to use for calculating anchor position + * {width: (target width), height: (target height)} (defaults to the element's current size) + * @return {Array} [x, y] An array containing the element's x and y coordinates + */ + getAnchorXY : function(anchor, local, s){ + //Passing a different size is useful for pre-calculating anchors, + //especially for anchored animations that change the el size. + anchor = (anchor || "tl").toLowerCase(); + s = s || {}; + + var me = this, + vp = me.dom == document.body || me.dom == document, + w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(), + h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(), + xy, + r = Math.round, + o = me.getXY(), + scroll = me.getScroll(), + extraX = vp ? scroll.left : !local ? o[0] : 0, + extraY = vp ? scroll.top : !local ? o[1] : 0, + hash = { + c : [r(w * 0.5), r(h * 0.5)], + t : [r(w * 0.5), 0], + l : [0, r(h * 0.5)], + r : [w, r(h * 0.5)], + b : [r(w * 0.5), h], + tl : [0, 0], + bl : [0, h], + br : [w, h], + tr : [w, 0] + }; + + xy = hash[anchor]; + return [xy[0] + extraX, xy[1] + extraY]; + }, + + /** + * Anchors an element to another element and realigns it when the window is resized. + * @param {Mixed} element The element to align to. + * @param {String} position The position to align to. + * @param {Array} offsets (optional) Offset the positioning by [x, y] + * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object + * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter + * is a number, it is used as the buffer delay (defaults to 50ms). + * @param {Function} callback The function to call after the animation finishes + * @return {Ext.Element} this + */ + anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){ + var me = this, + dom = me.dom, + scroll = !Ext.isEmpty(monitorScroll), + action = function(){ + Ext.fly(dom).alignTo(el, alignment, offsets, animate); + Ext.callback(callback, Ext.fly(dom)); + }, + anchor = this.getAnchor(); + + // previous listener anchor, remove it + this.removeAnchor(); + Ext.apply(anchor, { + fn: action, + scroll: scroll + }); + + Ext.EventManager.onWindowResize(action, null); + + if(scroll){ + Ext.EventManager.on(window, 'scroll', action, null, + {buffer: !isNaN(monitorScroll) ? monitorScroll : 50}); + } + action.call(me); // align immediately + return me; + }, - /** - * Returns the offset height of the element - * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding - * @return {Number} The element's height - */ - getHeight : function(contentHeight){ - var me = this, - dom = me.dom, - hidden = Ext.isIE && me.isStyle('display', 'none'), - h = MATH.max(dom.offsetHeight, hidden ? 0 : dom.clientHeight) || 0; - - h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb"); - return h < 0 ? 0 : h; - }, - - /** - * Returns the offset width of the element - * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding - * @return {Number} The element's width - */ - getWidth : function(contentWidth){ - var me = this, - dom = me.dom, - hidden = Ext.isIE && me.isStyle('display', 'none'), - w = MATH.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0; - w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr"); - return w < 0 ? 0 : w; - }, - - /** - * Set the width of this Element. - * @param {Mixed} width The new width. This may be one of:

A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
A String used to set the CSS width style. Animation may not be used. - *

- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object - * @return {Ext.Element} this - */ - setWidth : function(width, animate){ - var me = this; - width = me.adjustWidth(width); - !animate || !me.anim ? - me.dom.style.width = me.addUnits(width) : - me.anim({width : {to : width}}, me.preanim(arguments, 1)); - return me; - }, + /** + * Remove any anchor to this element. See {@link #anchorTo}. + * @return {Ext.Element} this + */ + removeAnchor : function(){ + var me = this, + anchor = this.getAnchor(); + + if(anchor && anchor.fn){ + Ext.EventManager.removeResizeListener(anchor.fn); + if(anchor.scroll){ + Ext.EventManager.un(window, 'scroll', anchor.fn); + } + delete anchor.fn; + } + return me; + }, - /** - * Set the height of this Element. - *


-// change the height to 200px and animate with default configuration
-Ext.fly('elementId').setHeight(200, true);
+    // private
+    getAnchor : function(){
+        var data = Ext.Element.data,
+            dom = this.dom;
+            if (!dom) {
+                return;
+            }
+            var anchor = data(dom, '_anchor');
+            
+        if(!anchor){
+            anchor = data(dom, '_anchor', {});
+        }
+        return anchor;
+    },
 
-// 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:

A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)
A String used to set the CSS height style. Animation may not be used.

- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object - * @return {Ext.Element} this - */ - setHeight : function(height, animate){ - var me = this; - height = me.adjustHeight(height); - !animate || !me.anim ? - me.dom.style.height = me.addUnits(height) : - me.anim({height : {to : height}}, me.preanim(arguments, 1)); - return me; - }, + /** + * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the + * supported position values. + * @param {Mixed} element The element to align to. + * @param {String} position (optional, defaults to "tl-bl?") The position to align to. + * @param {Array} offsets (optional) Offset the positioning by [x, y] + * @return {Array} [x, y] + */ + getAlignToXY : function(el, p, o){ + el = Ext.get(el); - /** - * Gets the width of the border(s) for the specified side(s) - * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example, - * passing 'lr' would get the border left width + the border right width. - * @return {Number} The width of the sides passed added together - */ - getBorderWidth : function(side){ - return this.addStyles(side, borders); - }, - - /** - * Gets the width of the padding(s) for the specified side(s) - * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example, - * passing 'lr' would get the padding left + the padding right. - * @return {Number} The padding of the sides passed added together - */ - getPadding : function(side){ - return this.addStyles(side, paddings); - }, - - /** - * Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove - * @return {Ext.Element} this - */ - clip : function(){ - var me = this, - dom = me.dom; + if(!el || !el.dom){ + throw "Element.alignToXY with an element that doesn't exist"; + } + + o = o || [0,0]; + p = (!p || p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase(); - if(!data(dom, ISCLIPPED)){ - data(dom, ISCLIPPED, true); - data(dom, ORIGINALCLIP, { - o: me.getStyle(OVERFLOW), - x: me.getStyle(OVERFLOWX), - y: me.getStyle(OVERFLOWY) - }); - me.setStyle(OVERFLOW, HIDDEN); - me.setStyle(OVERFLOWX, HIDDEN); - me.setStyle(OVERFLOWY, HIDDEN); + var me = this, + d = me.dom, + a1, + a2, + x, + y, + //constrain the aligned el to viewport if necessary + w, + h, + r, + dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie + dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie + p1y, + p1x, + p2y, + p2x, + swapY, + swapX, + doc = document, + docElement = doc.documentElement, + docBody = doc.body, + scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5, + scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5, + c = false, //constrain to viewport + p1 = "", + p2 = "", + m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/); + + if(!m){ + throw "Element.alignTo with an invalid alignment " + p; + } + + p1 = m[1]; + p2 = m[2]; + c = !!m[3]; + + //Subtract the aligned el's internal xy from the target's offset xy + //plus custom offset to get the aligned el's new offset xy + a1 = me.getAnchorXY(p1, true); + a2 = el.getAnchorXY(p2, false); + + x = a2[0] - a1[0] + o[0]; + y = a2[1] - a1[1] + o[1]; + + if(c){ + w = me.getWidth(); + h = me.getHeight(); + r = el.getRegion(); + //If we are at a viewport boundary and the aligned el is anchored on a target border that is + //perpendicular to the vp border, allow the aligned el to slide on that border, + //otherwise swap the aligned el to the opposite border of the target. + p1y = p1.charAt(0); + p1x = p1.charAt(p1.length-1); + p2y = p2.charAt(0); + p2x = p2.charAt(p2.length-1); + swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t")); + swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r")); + + + if (x + w > dw + scrollX) { + x = swapX ? r.left-w : dw+scrollX-w; + } + if (x < scrollX) { + x = swapX ? r.right : scrollX; + } + if (y + h > dh + scrollY) { + y = swapY ? r.top-h : dh+scrollY-h; } - return me; - }, + if (y < scrollY){ + y = swapY ? r.bottom : scrollY; + } + } + return [x,y]; + }, + + /** + * Aligns this element with another element relative to the specified anchor points. If the other element is the + * document it aligns it to the viewport. + * The position parameter is optional, and can be specified in any one of the following formats: + *

Blank: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").
One anchor (deprecated): The passed anchor position is used as the target element's anchor point. + * The element being aligned will position its top-left corner (tl) to that point. This method has been + * deprecated in favor of the newer two anchor syntax below.
Two anchors: If two values from the table below are passed separated by a dash, the first value is used as the + * element's anchor point, and the second value is used as the target's anchor point.

+ * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of + * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to + * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than + * that specified in order to enforce the viewport constraints. + * Following are all of the supported anchor positions: +

+Value  Description
+-----  -----------------------------
+tl     The top left corner (default)
+t      The center of the top edge
+tr     The top right corner
+l      The center of the left edge
+c      In the center of the element
+r      The center of the right edge
+bl     The bottom left corner
+b      The center of the bottom edge
+br     The bottom right corner
+

+Example Usage: +


+// align el to other-el using the default positioning ("tl-bl", non-constrained)
+el.alignTo("other-el");
+
+// align the top left corner of el with the top right corner of other-el (constrained to viewport)
+el.alignTo("other-el", "tr?");
+
+// align the bottom right corner of el with the center left edge of other-el
+el.alignTo("other-el", "br-l?");
+
+// align the center of el with the bottom left corner of other-el and
+// adjust the x position by -6 pixels (and the y position by 0)
+el.alignTo("other-el", "c-bl", [-6, 0]);
+

+ * @param {Mixed} element The element to align to. + * @param {String} position (optional, defaults to "tl-bl?") The position to align to. + * @param {Array} offsets (optional) Offset the positioning by [x, y] + * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object + * @return {Ext.Element} this + */ + alignTo : function(element, position, offsets, animate){ + var me = this; + return me.setXY(me.getAlignToXY(element, position, offsets), + me.preanim && !!animate ? me.preanim(arguments, 3) : false); + }, - /** - * Return clipping (overflow) to original clipping before {@link #clip} was called - * @return {Ext.Element} this - */ - unclip : function(){ - var me = this, - dom = me.dom; - - if(data(dom, ISCLIPPED)){ - data(dom, ISCLIPPED, false); - var o = data(dom, ORIGINALCLIP); - if(o.o){ - me.setStyle(OVERFLOW, o.o); - } - if(o.x){ - me.setStyle(OVERFLOWX, o.x); - } - if(o.y){ - me.setStyle(OVERFLOWY, o.y); + // private ==> used outside of core + adjustForConstraints : function(xy, parent, offsets){ + return this.getConstrainToXY(parent || document, false, offsets, xy) || xy; + }, + + // private ==> used outside of core + getConstrainToXY : function(el, local, offsets, proposedXY){ + var os = {top:0, left:0, bottom:0, right: 0}; + + return function(el, local, offsets, proposedXY){ + el = Ext.get(el); + offsets = offsets ? Ext.applyIf(offsets, os) : os; + + var vw, vh, vx = 0, vy = 0; + if(el.dom == document.body || el.dom == document){ + vw =Ext.lib.Dom.getViewWidth(); + vh = Ext.lib.Dom.getViewHeight(); + }else{ + vw = el.dom.clientWidth; + vh = el.dom.clientHeight; + if(!local){ + var vxy = el.getXY(); + vx = vxy[0]; + vy = vxy[1]; } } - return me; - }, - // private - addStyles : function(sides, styles){ - var val = 0; + var s = el.getScroll(); - Ext.each(sides.match(/\w/g), function(s) { - if (s = parseInt(this.getStyle(styles[s]), 10)) { - val += MATH.abs(s); - } - }, - this); - return val; - }, + vx += offsets.left + s.left; + vy += offsets.top + s.top; - margins : margins - } -}() -); + vw -= offsets.right; + vh -= offsets.bottom; + + var vr = vx+vw; + var vb = vy+vh; + + var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]); + var x = xy[0], y = xy[1]; + var w = this.dom.offsetWidth, h = this.dom.offsetHeight; + + // only move it if it needs it + var moved = false; + + // first validate right/bottom + if((x + w) > vr){ + x = vr - w; + moved = true; + } + if((y + h) > vb){ + y = vb - h; + moved = true; + } + // then make sure top/left isn't negative + if(x < vx){ + x = vx; + moved = true; + } + if(y < vy){ + y = vy; + moved = true; + } + return moved ? [x, y] : false; + }; + }(), + + + +// el = Ext.get(el); +// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0}); + +// var me = this, +// doc = document, +// s = el.getScroll(), +// vxy = el.getXY(), +// vx = offsets.left + s.left, +// vy = offsets.top + s.top, +// vw = -offsets.right, +// vh = -offsets.bottom, +// vr, +// vb, +// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]), +// x = xy[0], +// y = xy[1], +// w = me.dom.offsetWidth, h = me.dom.offsetHeight, +// moved = false; // only move it if it needs it +// +// +// if(el.dom == doc.body || el.dom == doc){ +// vw += Ext.lib.Dom.getViewWidth(); +// vh += Ext.lib.Dom.getViewHeight(); +// }else{ +// vw += el.dom.clientWidth; +// vh += el.dom.clientHeight; +// if(!local){ +// vx += vxy[0]; +// vy += vxy[1]; +// } +// } + +// // first validate right/bottom +// if(x + w > vx + vw){ +// x = vx + vw - w; +// moved = true; +// } +// if(y + h > vy + vh){ +// y = vy + vh - h; +// moved = true; +// } +// // then make sure top/left isn't negative +// if(x < vx){ +// x = vx; +// moved = true; +// } +// if(y < vy){ +// y = vy; +// moved = true; +// } +// return moved ? [x, y] : false; +// }, + + /** + * Calculates the x, y to center this element on the screen + * @return {Array} The x, y values [x, y] + */ + getCenterXY : function(){ + return this.getAlignToXY(document, 'c-c'); + }, + + /** + * Centers the Element in either the viewport, or another Element. + * @param {Mixed} centerIn (optional) The element in which to center the element. + */ + center : function(centerIn){ + return this.alignTo(centerIn || document, 'c-c'); + } +}); /** * @class Ext.Element */ - -// special markup used throughout Ext when box wrapping elements -Ext.Element.boxMarkup = '

'; - Ext.Element.addMethods(function(){ - var INTERNAL = "_internal"; + var PARENTNODE = 'parentNode', + NEXTSIBLING = 'nextSibling', + PREVIOUSSIBLING = 'previousSibling', + DQ = Ext.DomQuery, + GET = Ext.get; + return { - /** - * More flexible version of {@link #setStyle} for setting style properties. - * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or - * a function which returns such a specification. - * @return {Ext.Element} this - */ - applyStyles : function(style){ - Ext.DomHelper.applyStyles(this.dom, style); - return this; - }, - /** - * Returns an object with properties matching the styles requested. - * For example, el.getStyles('color', 'font-size', 'width') might return - * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}. - * @param {String} style1 A style name - * @param {String} style2 A style name - * @param {String} etc. - * @return {Object} The style object + * 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.Element object instead of DOM node + * @return {HTMLElement} The matching DOM node (or null if no match was found) */ - getStyles : function(){ - var ret = {}; - Ext.each(arguments, function(v) { - ret[v] = this.getStyle(v); - }, - this); - return ret; - }, - - getStyleSize : function(){ - var me = this, - w, - h, - d = this.dom, - s = d.style; - if(s.width && s.width != 'auto'){ - w = parseInt(s.width, 10); - if(me.isBorderBox()){ - w -= me.getFrameWidth('lr'); - } + findParent : function(simpleSelector, maxDepth, returnEl){ + var p = this.dom, + b = document.body, + depth = 0, + stopEl; + if(Ext.isGecko && Object.prototype.toString.call(p) == '[object XULElement]') { + return null; + } + maxDepth = maxDepth || 50; + if (isNaN(maxDepth)) { + stopEl = Ext.getDom(maxDepth); + maxDepth = Number.MAX_VALUE; } - if(s.height && s.height != 'auto'){ - h = parseInt(s.height, 10); - if(me.isBorderBox()){ - h -= me.getFrameWidth('tb'); + while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){ + if(DQ.is(p, simpleSelector)){ + return returnEl ? GET(p) : p; } + depth++; + p = p.parentNode; } - return {width: w || me.getWidth(true), height: h || me.getHeight(true)}; + return null; }, - - // private ==> used by ext full - setOverflow : function(v){ - var dom = this.dom; - if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug - dom.style.overflow = 'hidden'; - (function(){dom.style.overflow = 'auto';}).defer(1); - }else{ - dom.style.overflow = v; - } - }, - - /** - *

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}, - * {@link Ext.Panel} when {@link Ext.Panel#frame frame=true}, {@link Ext.Window}). The markup - * is of this form:

- *


-Ext.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().addClass("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.Element} this - */ - boxWrap : function(cls){ - cls = cls || 'x-box'; - var el = Ext.get(this.insertHtml("beforeBegin", "

" + String.format(Ext.Element.boxMarkup, cls) + "

")); //String.format('

'+Ext.Element.boxMarkup+'

', cls))); - Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom); - return el; + + /** + * 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.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; }, - - /** - * Set the size of this Element. If animation is true, both width and height will be animated concurrently. - * @param {Mixed} width The new width. This may be one of:

A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
A String used to set the CSS width style. Animation may not be used. - *
A size object in the format {width: widthValue, height: heightValue}.

- * @param {Mixed} height The new height. This may be one of:

A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).
A String used to set the CSS height style. Animation may not be used.

- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object - * @return {Ext.Element} this - */ - setSize : function(width, height, animate){ - var me = this; - if(Ext.isObject(width)){ // in case of object from getSize() - height = width.height; - width = width.width; - } - width = me.adjustWidth(width); - height = me.adjustHeight(height); - if(!animate || !me.anim){ - me.dom.style.width = me.addUnits(width); - me.dom.style.height = me.addUnits(height); - }else{ - me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2)); - } - return me; + + /** + * 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.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.Element} The matching DOM node (or null if no match was found) + */ + up : function(simpleSelector, maxDepth){ + return this.findParentNode(simpleSelector, maxDepth, true); }, - + /** - * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders - * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements - * if a height has not been set using CSS. - * @return {Number} + * 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/CompositeElementLite} The composite element */ - getComputedHeight : function(){ - var me = this, - h = Math.max(me.dom.offsetHeight, me.dom.clientHeight); - if(!h){ - h = parseInt(me.getStyle('height'), 10) || 0; - if(!me.isBorderBox()){ - h += me.getFrameWidth('tb'); - } - } - return h; + select : function(selector){ + return Ext.Element.select(selector, this.dom); }, - + /** - * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders - * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements - * if a width has not been set using CSS. - * @return {Number} + * 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 */ - getComputedWidth : function(){ - var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth); - if(!w){ - w = parseInt(this.getStyle('width'), 10) || 0; - if(!this.isBorderBox()){ - w += this.getFrameWidth('lr'); - } - } - return w; + query : function(selector){ + return DQ.select(selector, this.dom); }, - + /** - * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth() - for more information about the sides. - * @param {String} sides - * @return {Number} + * 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.Element (defaults to false) + * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true) */ - getFrameWidth : function(sides, onlyContentBox){ - return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides)); + child : function(selector, returnDom){ + var n = DQ.selectNode(selector, this.dom); + return returnDom ? n : GET(n); }, - + /** - * Sets up event handlers to add and remove a css class when the mouse is over this element - * @param {String} className - * @return {Ext.Element} this + * 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.Element (defaults to false) + * @return {HTMLElement/Ext.Element} The child Ext.Element (or DOM node if returnDom = true) */ - addClassOnOver : function(className){ - this.hover( - function(){ - Ext.fly(this, INTERNAL).addClass(className); - }, - function(){ - Ext.fly(this, INTERNAL).removeClass(className); - } - ); - return this; + down : function(selector, returnDom){ + var n = DQ.selectNode(" > " + selector, this.dom); + return returnDom ? n : GET(n); }, - + + /** + * 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.Element + * @return {Ext.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.Element + * @return {Ext.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.Element + * @return {Ext.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.Element + * @return {Ext.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.Element + * @return {Ext.Element/HTMLElement} The last child or null + */ + last : function(selector, returnDom){ + return this.matchNode(PREVIOUSSIBLING, 'lastChild', selector, returnDom); + }, + + matchNode : function(dir, start, selector, returnDom){ + var n = this.dom[start]; + while(n){ + if(n.nodeType == 1 && (!selector || DQ.is(n, selector))){ + return !returnDom ? GET(n) : n; + } + n = n[dir]; + } + return null; + } + } +}());/** + * @class Ext.Element + */ +Ext.Element.addMethods({ + /** + * 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 + * @param {Boolean} unique (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object) + * @return {CompositeElement/CompositeElementLite} The composite element + */ + select : function(selector, unique){ + return Ext.Element.select(selector, unique, this.dom); + } +});/** + * @class Ext.Element + */ +Ext.Element.addMethods( +function() { + var GETDOM = Ext.getDom, + GET = Ext.get, + DH = Ext.DomHelper; + + return { /** - * Sets up event handlers to add and remove a css class when this element has the focus - * @param {String} className + * Appends the passed element(s) to this element + * @param {String/HTMLElement/Array/Element/CompositeElement} el * @return {Ext.Element} this */ - addClassOnFocus : function(className){ - this.on("focus", function(){ - Ext.fly(this, INTERNAL).addClass(className); - }, this.dom); - this.on("blur", function(){ - Ext.fly(this, INTERNAL).removeClass(className); - }, this.dom); - return this; + appendChild: function(el){ + return GET(el).appendTo(this); }, - + /** - * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect) - * @param {String} className + * Appends this element to the passed element + * @param {Mixed} el The new parent element * @return {Ext.Element} this */ - addClassOnClick : function(className){ - var dom = this.dom; - this.on("mousedown", function(){ - Ext.fly(dom, INTERNAL).addClass(className); - var d = Ext.getDoc(), - fn = function(){ - Ext.fly(dom, INTERNAL).removeClass(className); - d.removeListener("mouseup", fn); - }; - d.on("mouseup", fn); - }); + appendTo: function(el){ + GETDOM(el).appendChild(this.dom); return this; }, - + /** - * Returns the width and height of the viewport. - *


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

- * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)} + * Inserts this element before the passed element in the DOM + * @param {Mixed} el The element before which this element will be inserted + * @return {Ext.Element} this */ - getViewSize : function(){ - var doc = document, - d = this.dom, - extdom = Ext.lib.Dom, - isDoc = (d == doc || d == doc.body); - return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth), - height : (isDoc ? extdom.getViewHeight() : d.clientHeight) }; + insertBefore: function(el){ + (el = GETDOM(el)).parentNode.insertBefore(this.dom, el); + return this; }, - + /** - * 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)} + * Inserts this element after the passed element in the DOM + * @param {Mixed} el The element to insert after + * @return {Ext.Element} this */ - getSize : function(contentSize){ - return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)}; + insertAfter: function(el){ + (el = GETDOM(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.Element} The new child + */ + insertFirst: function(el, returnDom){ + el = el || {}; + if(el.nodeType || el.dom || typeof el == 'string'){ // element + el = GETDOM(el); + this.dom.insertBefore(el, this.dom.firstChild); + return !returnDom ? GET(el) : el; + }else{ // dh config + return this.createChild(el, this.dom.firstChild, returnDom); + } + }, + /** - * Forces the browser to repaint this element + * Replaces the passed element with this element + * @param {Mixed} el The element to replace * @return {Ext.Element} this */ - repaint : function(){ - var dom = this.dom; - this.addClass("x-repaint"); - setTimeout(function(){ - Ext.fly(dom).removeClass("x-repaint"); - }, 1); + replace: function(el){ + el = GET(el); + this.insertBefore(el); + el.remove(); return this; }, - + /** - * Disables text selection for this element (normalized across browsers) + * 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.Element} this */ - unselectable : function(){ - this.dom.unselectable = "on"; - return this.swallowEvent("selectstart", true). - applyStyles("-moz-user-select:none;-khtml-user-select:none;"). - addClass("x-unselectable"); + replaceWith: function(el){ + var me = this; + + if(el.nodeType || el.dom || typeof el == 'string'){ + el = GETDOM(el); + me.dom.parentNode.insertBefore(el, me.dom); + }else{ + el = DH.insertBefore(me.dom, el); + } + + delete Ext.elCache[me.id]; + Ext.removeNode(me.dom); + me.id = Ext.id(me.dom = el); + Ext.Element.addToCache(me.isFlyweight ? new Ext.Element(me.dom) : me); + 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} - */ - getMargins : function(side){ - var me = this, - key, - hash = {t:"top", l:"left", r:"right", b: "bottom"}, - o = {}; - - if (!side) { - for (key in me.margins){ - o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0; - } - return o; - } else { - return me.addStyles.call(me, side, me.margins); + + /** + * 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.Element} The new child element + */ + createChild: function(config, insertBefore, returnDom){ + config = config || {tag:'div'}; + return insertBefore ? + DH.insertBefore(insertBefore, config, returnDom !== true) : + DH[!this.dom.firstChild ? 'overwrite' : '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.Element + * @return {HTMLElement/Element} The newly created wrapper element + */ + wrap: function(config, returnDom){ + var newEl = DH.insertBefore(this.dom, config || {tag: "div"}, !returnDom); + newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.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.Element (defaults to false) + * @return {HTMLElement/Ext.Element} The inserted node (or nearest related if more than 1 inserted) + */ + insertHtml : function(where, html, returnEl){ + var el = DH.insertHtml(where, this.dom, html); + return returnEl ? Ext.get(el) : el; + } + } +}());/** + * @class Ext.Element + */ +Ext.apply(Ext.Element.prototype, function() { + var GETDOM = Ext.getDom, + GET = Ext.get, + DH = Ext.DomHelper; + + return { + /** + * 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 raw DOM element instead of Ext.Element + * @return {Ext.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(GETDOM(el), isAfter ? me.dom.nextSibling : me.dom); + if (!returnDom) { + rt = GET(rt); + } + }else{ + if (isAfter && !me.dom.nextSibling) { + rt = DH.append(me.dom.parentNode, el, !returnDom); + } else { + rt = DH[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom); + } + } + return rt; } }; -}());/** +}());/** + * @class Ext.Element + */ +Ext.Element.addMethods(function(){ + // local style camelizing for speed + var propCache = {}, + camelRe = /(-[a-z])/gi, + classReCache = {}, + view = document.defaultView, + propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat', + opacityRe = /alpha$opacity=(.*)$/i, + trimRe = /^\s+|\s+$/g, + EL = Ext.Element, + PADDING = "padding", + MARGIN = "margin", + BORDER = "border", + LEFT = "-left", + RIGHT = "-right", + TOP = "-top", + BOTTOM = "-bottom", + WIDTH = "-width", + MATH = Math, + HIDDEN = 'hidden', + ISCLIPPED = 'isClipped', + OVERFLOW = 'overflow', + OVERFLOWX = 'overflow-x', + OVERFLOWY = 'overflow-y', + ORIGINALCLIP = 'originalClip', + // special markup used throughout Ext when box wrapping elements + 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}, + data = Ext.Element.data; + + + // private + function camelFn(m, a) { + return a.charAt(1).toUpperCase(); + } + + function chkCache(prop) { + return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn)); + } + + return { + // private ==> used by Fx + adjustWidth : function(width) { + var me = this; + var isNum = Ext.isNumber(width); + if(isNum && me.autoBoxAdjust && !me.isBorderBox()){ + width -= (me.getBorderWidth("lr") + me.getPadding("lr")); + } + return (isNum && width < 0) ? 0 : width; + }, + + // private ==> used by Fx + adjustHeight : function(height) { + var me = this; + var isNum = Ext.isNumber(height); + if(isNum && me.autoBoxAdjust && !me.isBorderBox()){ + height -= (me.getBorderWidth("tb") + me.getPadding("tb")); + } + return (isNum && height < 0) ? 0 : height; + }, + + + /** + * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. + * @param {String/Array} className The CSS class to add, or an array of classes + * @return {Ext.Element} this + */ + addClass : function(className){ + var me = this, i, len, v; + className = Ext.isArray(className) ? className : [className]; + for (i=0, len = className.length; i < len; i++) { + v = className[i]; + if (v) { + me.dom.className += (!me.hasClass(v) && v ? " " + v : ""); + }; + }; + return me; + }, + + /** + * Adds one or more CSS classes to this element and removes the same class(es) from all siblings. + * @param {String/Array} className The CSS class to add, or an array of classes + * @return {Ext.Element} this + */ + radioClass : function(className){ + var cn = this.dom.parentNode.childNodes, v; + className = Ext.isArray(className) ? className : [className]; + for (var i=0, len = cn.length; i < len; i++) { + v = cn[i]; + if(v && v.nodeType == 1) { + Ext.fly(v, '_internal').removeClass(className); + } + }; + return this.addClass(className); + }, + + /** + * Removes one or more CSS classes from the element. + * @param {String/Array} className The CSS class to remove, or an array of classes + * @return {Ext.Element} this + */ + removeClass : function(className){ + var me = this, v; + className = Ext.isArray(className) ? className : [className]; + if (me.dom && me.dom.className) { + for (var i=0, len=className.length; i < len; i++) { + v = className[i]; + if(v) { + me.dom.className = me.dom.className.replace( + classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), " " + ); + } + }; + } + return me; + }, + + /** + * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it). + * @param {String} className The CSS class to toggle + * @return {Ext.Element} this + */ + toggleClass : function(className){ + return this.hasClass(className) ? this.removeClass(className) : this.addClass(className); + }, + + /** + * Checks if the specified CSS class exists on this element's DOM node. + * @param {String} className The CSS class to check for + * @return {Boolean} True if the class exists, else false + */ + hasClass : function(className){ + return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1; + }, + + /** + * Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added. + * @param {String} oldClassName The CSS class to replace + * @param {String} newClassName The replacement CSS class + * @return {Ext.Element} this + */ + replaceClass : function(oldClassName, newClassName){ + return this.removeClass(oldClassName).addClass(newClassName); + }, + + isStyle : function(style, val) { + return this.getStyle(style) == val; + }, + + /** + * Normalizes currentStyle and computedStyle. + * @param {String} property The style property whose value is returned. + * @return {String} The current value of the style property for this element. + */ + getStyle : function(){ + return view && view.getComputedStyle ? + function(prop){ + var el = this.dom, + v, + cs, + out, + display, + wk = Ext.isWebKit, + display; + + if(el == document){ + return null; + } + prop = chkCache(prop); + // Fix bug caused by this: https://bugs.webkit.org/show_bug.cgi?id=13343 + if(wk && /marginRight/.test(prop)){ + display = this.getStyle('display'); + el.style.display = 'inline-block'; + } + out = (v = el.style[prop]) ? v : + (cs = view.getComputedStyle(el, "")) ? cs[prop] : null; + + // Webkit returns rgb values for transparent. + if(wk){ + if(out == 'rgba(0, 0, 0, 0)'){ + out = 'transparent'; + }else if(display){ + el.style.display = display; + } + } + return out; + } : + function(prop){ + var el = this.dom, + m, + cs; + + if(el == document) return null; + if (prop == 'opacity') { + if (el.style.filter.match) { + if(m = el.style.filter.match(opacityRe)){ + var fv = parseFloat(m[1]); + if(!isNaN(fv)){ + return fv ? fv / 100 : 0; + } + } + } + return 1; + } + prop = chkCache(prop); + return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null); + }; + }(), + + /** + * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values + * are convert to standard 6 digit hex color. + * @param {String} attr The css attribute + * @param {String} defaultValue The default value to use when a valid color isn't found + * @param {String} prefix (optional) defaults to #. Use an empty string when working with + * color anims. + */ + getColor : function(attr, defaultValue, prefix){ + var v = this.getStyle(attr), + color = Ext.isDefined(prefix) ? prefix : '#', + h; + + if(!v || /transparent|inherit/.test(v)){ + return defaultValue; + } + if(/^r/.test(v)){ + Ext.each(v.slice(4, v.length -1).split(','), function(s){ + h = parseInt(s, 10); + color += (h < 16 ? '0' : '') + h.toString(16); + }); + }else{ + v = v.replace('#', ''); + color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v; + } + return(color.length > 5 ? color.toLowerCase() : defaultValue); + }, + + /** + * Wrapper for setting style properties, also takes single object parameter of multiple styles. + * @param {String/Object} property The style property to be set, or an object of multiple styles. + * @param {String} value (optional) The value to apply to the given property, or null if an object was passed. + * @return {Ext.Element} this + */ + setStyle : function(prop, value){ + var tmp, + style, + camel; + if (!Ext.isObject(prop)) { + tmp = {}; + tmp[prop] = value; + prop = tmp; + } + for (style in prop) { + value = prop[style]; + style == 'opacity' ? + this.setOpacity(value) : + this.dom.style[chkCache(style)] = value; + } + return this; + }, + + /** + * Set the opacity of the element + * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc + * @param {Boolean/Object} animate (optional) a standard Element animation config object or true for + * the default animation ({duration: .35, easing: 'easeIn'}) + * @return {Ext.Element} this + */ + setOpacity : function(opacity, animate){ + var me = this, + s = me.dom.style; + + if(!animate || !me.anim){ + if(Ext.isIE){ + var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', + val = s.filter.replace(opacityRe, '').replace(trimRe, ''); + + s.zoom = 1; + s.filter = val + (val.length > 0 ? ' ' : '') + opac; + }else{ + s.opacity = opacity; + } + }else{ + me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn'); + } + return me; + }, + + /** + * Clears any opacity settings from this element. Required in some cases for IE. + * @return {Ext.Element} this + */ + clearOpacity : function(){ + var style = this.dom.style; + if(Ext.isIE){ + if(!Ext.isEmpty(style.filter)){ + style.filter = style.filter.replace(opacityRe, '').replace(trimRe, ''); + } + }else{ + style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = ''; + } + return this; + }, + + /** + * Returns the offset height of the element + * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding + * @return {Number} The element's height + */ + getHeight : function(contentHeight){ + var me = this, + dom = me.dom, + hidden = Ext.isIE && me.isStyle('display', 'none'), + h = MATH.max(dom.offsetHeight, hidden ? 0 : dom.clientHeight) || 0; + + h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb"); + return h < 0 ? 0 : h; + }, + + /** + * Returns the offset width of the element + * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding + * @return {Number} The element's width + */ + getWidth : function(contentWidth){ + var me = this, + dom = me.dom, + hidden = Ext.isIE && me.isStyle('display', 'none'), + w = MATH.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0; + w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr"); + return w < 0 ? 0 : w; + }, + + /** + * Set the width of this Element. + * @param {Mixed} width The new width. This may be one of:

A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
A String used to set the CSS width style. Animation may not be used. + *

+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object + * @return {Ext.Element} this + */ + setWidth : function(width, animate){ + var me = this; + width = me.adjustWidth(width); + !animate || !me.anim ? + me.dom.style.width = me.addUnits(width) : + me.anim({width : {to : width}}, me.preanim(arguments, 1)); + return me; + }, + + /** + * Set the height of this Element. + *


+// 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:

A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)
A String used to set the CSS height style. Animation may not be used.

+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object + * @return {Ext.Element} this + */ + setHeight : function(height, animate){ + var me = this; + height = me.adjustHeight(height); + !animate || !me.anim ? + me.dom.style.height = me.addUnits(height) : + me.anim({height : {to : height}}, me.preanim(arguments, 1)); + return me; + }, + + /** + * Gets the width of the border(s) for the specified side(s) + * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example, + * passing 'lr' would get the border left width + the border right width. + * @return {Number} The width of the sides passed added together + */ + getBorderWidth : function(side){ + return this.addStyles(side, borders); + }, + + /** + * Gets the width of the padding(s) for the specified side(s) + * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example, + * passing 'lr' would get the padding left + the padding right. + * @return {Number} The padding of the sides passed added together + */ + getPadding : function(side){ + return this.addStyles(side, paddings); + }, + + /** + * Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove + * @return {Ext.Element} this + */ + clip : function(){ + var me = this, + dom = me.dom; + + if(!data(dom, ISCLIPPED)){ + data(dom, ISCLIPPED, true); + data(dom, ORIGINALCLIP, { + o: me.getStyle(OVERFLOW), + x: me.getStyle(OVERFLOWX), + y: me.getStyle(OVERFLOWY) + }); + me.setStyle(OVERFLOW, HIDDEN); + me.setStyle(OVERFLOWX, HIDDEN); + me.setStyle(OVERFLOWY, HIDDEN); + } + return me; + }, + + /** + * Return clipping (overflow) to original clipping before {@link #clip} was called + * @return {Ext.Element} this + */ + unclip : function(){ + var me = this, + dom = me.dom; + + if(data(dom, ISCLIPPED)){ + data(dom, ISCLIPPED, false); + var o = data(dom, ORIGINALCLIP); + if(o.o){ + me.setStyle(OVERFLOW, o.o); + } + if(o.x){ + me.setStyle(OVERFLOWX, o.x); + } + if(o.y){ + me.setStyle(OVERFLOWY, o.y); + } + } + return me; + }, + + // private + addStyles : function(sides, styles){ + var val = 0, + m = sides.match(/\w/g), + s; + for (var i=0, len=m.length; i used by ext full + setOverflow : function(v){ + var dom = this.dom; + if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug + dom.style.overflow = 'hidden'; + (function(){dom.style.overflow = 'auto';}).defer(1); + }else{ + dom.style.overflow = v; + } + }, + + /** + *

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}, + * {@link Ext.Panel} when {@link Ext.Panel#frame frame=true}, {@link Ext.Window}). The markup + * is of this form:

+ *


+    Ext.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().addClass("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.Element} The outermost wrapping element of the created box structure. + */ + boxWrap : function(cls){ + cls = cls || 'x-box'; + var el = Ext.get(this.insertHtml("beforeBegin", "

" + String.format(Ext.Element.boxMarkup, cls) + "

")); //String.format('

'+Ext.Element.boxMarkup+'

', cls))); + Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom); + return el; + }, + + /** + * Set the size of this Element. If animation is true, both width and height will be animated concurrently. + * @param {Mixed} width The new width. This may be one of:

A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
A String used to set the CSS width style. Animation may not be used. + *
A size object in the format {width: widthValue, height: heightValue}.

+ * @param {Mixed} height The new height. This may be one of:

A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).
A String used to set the CSS height style. Animation may not be used.

+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object + * @return {Ext.Element} this + */ + setSize : function(width, height, animate){ + var me = this; + if(Ext.isObject(width)){ // in case of object from getSize() + height = width.height; + width = width.width; + } + width = me.adjustWidth(width); + height = me.adjustHeight(height); + if(!animate || !me.anim){ + me.dom.style.width = me.addUnits(width); + me.dom.style.height = me.addUnits(height); + }else{ + me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2)); + } + return me; + }, + + /** + * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders + * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements + * if a height has not been set using CSS. + * @return {Number} + */ + getComputedHeight : function(){ + var me = this, + h = Math.max(me.dom.offsetHeight, me.dom.clientHeight); + if(!h){ + h = parseFloat(me.getStyle('height')) || 0; + if(!me.isBorderBox()){ + h += me.getFrameWidth('tb'); + } + } + return h; + }, + + /** + * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders + * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements + * if a width has not been set using CSS. + * @return {Number} + */ + getComputedWidth : function(){ + var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth); + if(!w){ + w = parseFloat(this.getStyle('width')) || 0; + if(!this.isBorderBox()){ + w += this.getFrameWidth('lr'); + } + } + return w; + }, + + /** + * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth() + for more information about the sides. + * @param {String} sides + * @return {Number} + */ + getFrameWidth : function(sides, onlyContentBox){ + return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides)); + }, + + /** + * Sets up event handlers to add and remove a css class when the mouse is over this element + * @param {String} className + * @return {Ext.Element} this + */ + addClassOnOver : function(className){ + this.hover( + function(){ + Ext.fly(this, INTERNAL).addClass(className); + }, + function(){ + Ext.fly(this, INTERNAL).removeClass(className); + } + ); + return this; + }, + + /** + * Sets up event handlers to add and remove a css class when this element has the focus + * @param {String} className + * @return {Ext.Element} this + */ + addClassOnFocus : function(className){ + this.on("focus", function(){ + Ext.fly(this, INTERNAL).addClass(className); + }, this.dom); + this.on("blur", function(){ + Ext.fly(this, INTERNAL).removeClass(className); + }, this.dom); + return this; + }, + + /** + * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect) + * @param {String} className + * @return {Ext.Element} this + */ + addClassOnClick : function(className){ + var dom = this.dom; + this.on("mousedown", function(){ + Ext.fly(dom, INTERNAL).addClass(className); + var d = Ext.getDoc(), + fn = function(){ + Ext.fly(dom, INTERNAL).removeClass(className); + d.removeListener("mouseup", fn); + }; + d.on("mouseup", fn); + }); + return this; + }, + + /** + *

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.

+ * example:


+        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 doc = document, + d = this.dom, + isDoc = (d == doc || d == doc.body); + + // If the body, use Ext.lib.Dom + if (isDoc) { + var extdom = Ext.lib.Dom; + return { + width : extdom.getViewWidth(), + height : extdom.getViewHeight() + } + + // Else use clientHeight/clientWidth + } else { + return { + width : d.clientWidth, + height : d.clientHeight + } + } + }, + + /** + *

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, + w, h, + doc = document, + d = this.dom, + isDoc = (d == doc || d == doc.body), + s = d.style; + + // If the body, use Ext.lib.Dom + if (isDoc) { + var extdom = Ext.lib.Dom; + return { + width : extdom.getViewWidth(), + height : extdom.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.Element} this + */ + repaint : function(){ + var dom = this.dom; + this.addClass("x-repaint"); + setTimeout(function(){ + Ext.fly(dom).removeClass("x-repaint"); + }, 1); + return this; + }, + + /** + * Disables text selection for this element (normalized across browsers) + * @return {Ext.Element} this + */ + unselectable : function(){ + this.dom.unselectable = "on"; + return this.swallowEvent("selectstart", true). + applyStyles("-moz-user-select:none;-khtml-user-select:none;"). + addClass("x-unselectable"); + }, + + /** + * 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} + */ + getMargins : function(side){ + var me = this, + key, + hash = {t:"top", l:"left", r:"right", b: "bottom"}, + o = {}; + + 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.Element + */ +(function(){ +var D = Ext.lib.Dom, + LEFT = "left", + RIGHT = "right", + TOP = "top", + BOTTOM = "bottom", + POSITION = "position", + STATIC = "static", + RELATIVE = "relative", + AUTO = "auto", + ZINDEX = "z-index"; + +Ext.Element.addMethods({ + /** + * Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). + * @return {Number} The X position of the element + */ + getX : function(){ + return D.getX(this.dom); + }, + + /** + * Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). + * @return {Number} The Y position of the element + */ + getY : function(){ + return D.getY(this.dom); + }, + + /** + * Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). + * @return {Array} The XY position of the element + */ getXY : function(){ return D.getXY(this.dom); }, @@ -6315,13 +6811,24 @@ Ext.Element.addMethods({ me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2)); return me; }, - + /** - * Return a box {x, y, width, height} that can be used to set another elements - * size/location to match this element. + * Return an object defining the area of this Element which can be passed to {@link #setBox} to + * set another Element's size/location to match this element. * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned. * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y. - * @return {Object} box An object in the format {x, y, width, height} + * @return {Object} box An object in the format


+{
+    x: <Element's X position>,
+    y: <Element's Y position>,
+    width: <Element's width>,
+    height: <Element's height>,
+    bottom: <Element's lower bound>,
+    right: <Element's rightmost bound>
+}
+

+ * The returned object may also be addressed as an Array where index 0 contains the X position + * and index 1 contains the Y position. So the result may also be used for {@link #setXY} */ getBox : function(contentBox, local) { var me = this, @@ -6515,14 +7022,16 @@ Ext.Element.addMethods({ */ scrollTo : function(side, value, animate){ var top = /top/i.test(side), //check if we're scrolling top or left - prop = 'scroll' + (top ? 'Left' : 'Top'), // if scrolling top, we need to grab scrollLeft, if left, scrollTop - me = this, - dom = me.dom; + me = this, + dom = me.dom, + prop; if (!animate || !me.anim) { + prop = 'scroll' + (top ? 'Top' : 'Left'), // just setting the value, so grab the direction dom[prop] = value; - } else { + }else{ + prop = 'scroll' + (top ? 'Left' : 'Top'), // if scrolling top, we need to grab scrollLeft, if left, scrollTop me.anim({scroll: {to: top ? [dom[prop], value] : [value, dom[prop]]}}, - me.preanim(arguments, 2), 'scroll'); + me.preanim(arguments, 2), 'scroll'); } return me; }, @@ -6934,7 +7443,7 @@ function(){ XMASKED = "x-masked", XMASKEDRELATIVE = "x-masked-relative", data = Ext.Element.data; - + return { /** * Checks whether the element is currently visible using both visibility and display properties. @@ -6946,8 +7455,8 @@ function(){ p = this.dom.parentNode; if(deep !== true || !vis){ return vis; - } - while(p && !/body/i.test(p.tagName)){ + } + while(p && !/^body/i.test(p.tagName)){ if(!Ext.fly(p, '_isVisible').isVisible()){ return false; } @@ -6955,7 +7464,7 @@ function(){ } return true; }, - + /** * Returns true if display is not "none" * @return {Boolean} @@ -6963,20 +7472,20 @@ function(){ isDisplayed : function() { return !this.isStyle(DISPLAY, NONE); }, - + /** * Convenience method for setVisibilityMode(Element.DISPLAY) * @param {String} display (optional) What to set display to when visible * @return {Ext.Element} this */ - enableDisplayMode : function(display){ + enableDisplayMode : function(display){ this.setVisibilityMode(Ext.Element.DISPLAY); if(!Ext.isEmpty(display)){ data(this.dom, 'originalDisplay', display); } return this; }, - + /** * Puts a mask over this element to disable user interaction. Requires core.css. * This method can only be applied to elements which accept child nodes. @@ -6989,9 +7498,9 @@ function(){ dom = me.dom, dh = Ext.DomHelper, EXTELMASKMSG = "ext-el-mask-msg", - el, + el, mask; - + if(me.getStyle("position") == "static"){ me.addClass(XMASKEDRELATIVE); } @@ -7001,10 +7510,10 @@ function(){ if((el = data(dom, 'mask'))){ el.remove(); } - + mask = dh.append(dom, {cls : "ext-el-mask"}, true); data(dom, 'mask', mask); - + me.addClass(XMASKED); mask.setDisplayed(true); if(typeof msg == 'string'){ @@ -7020,7 +7529,7 @@ function(){ } return mask; }, - + /** * Removes a previously applied mask. */ @@ -7039,7 +7548,7 @@ function(){ } me.removeClass([XMASKED, XMASKEDRELATIVE]); }, - + /** * Returns true if this element is masked * @return {Boolean} @@ -7048,14 +7557,14 @@ function(){ var m = data(this.dom, 'mask'); return m && m.isVisible(); }, - + /** * Creates an iframe shim for this element to keep selects and other windowed objects from * showing through. * @return {Ext.Element} The new shim element */ createShim : function(){ - var el = document.createElement('iframe'), + var el = document.createElement('iframe'), shim; el.frameBorder = '0'; el.className = 'ext-shim'; @@ -7072,9 +7581,9 @@ Ext.Element.addMethods({ /** * Convenience method for constructing a KeyMap * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options: - * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)} + * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)} * @param {Function} fn The function to call - * @param {Object} scope (optional) The scope of the function + * @param {Object} scope (optional) The scope (this reference) in which the specified function is executed. Defaults to this Element. * @return {Ext.KeyMap} The KeyMap created */ addKeyListener : function(key, fn, scope){ @@ -7672,7 +8181,7 @@ el.frame("C3DAF9", 1, { active; me.queueFx(o, function(){ - color = color || '#C3DAF9' + color = color || '#C3DAF9'; if(color.length == 6){ color = '#' + color; } @@ -8264,6 +8773,21 @@ Ext.override(Ext.CompositeElementLite, { 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 @@ -8276,27 +8800,40 @@ Ext.CompositeElementLite.prototype = { * @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){ - if(els){ - if (Ext.isArray(els)) { - this.elements = this.elements.concat(els); - } else { - var yels = this.elements; - Ext.each(els, function(e) { - yels.push(e); - }); - } + add : function(els, root){ + var me = this, + elements = me.elements; + if(!els){ + return this; } - return this; + if(Ext.isString(els)){ + els = Ext.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 els = this.elements, - el = this.el; - Ext.each(els, function(e) { - el.dom = e; - Ext.Element.prototype[fn].apply(el, args); - }); - return this; + var me = this, + els = me.elements, + len = els.length, + e, + i; + + for(i = 0; i < len; i++) { + e = els[i]; + if(e){ + Ext.Element.prototype[fn].apply(me.getElement(e), args); + } + } + return me; }, /** * Returns a flyweight Element of the dom element object at the specified index @@ -8304,19 +8841,28 @@ Ext.CompositeElementLite.prototype = { * @return {Ext.Element} */ item : function(index){ - var me = this; - if(!me.elements[index]){ - return null; + var me = this, + el = me.elements[index], + out = null; + + if(el){ + out = me.getElement(el); } - me.el.dom = me.elements[index]; - return me.el; + return out; }, // fixes scope with flyweight addListener : function(eventName, handler, scope, opt){ - Ext.each(this.elements, function(e) { - Ext.EventManager.on(e, eventName, handler, scope || e, opt); - }); + var els = this.elements, + len = els.length, + i, e; + + for(i = 0; iNot supported in core * @param {HTMLElement/String} root (optional) The root element of the query or id of the root * @return {CompositeElementLite/CompositeElement} * @member Ext.Element * @method select */ -Ext.Element.select = function(selector, unique, root){ +Ext.Element.select = function(selector, root){ var els; if(typeof selector == "string"){ els = Ext.Element.selectorFunction(selector, root); @@ -8469,7 +9024,6 @@ Ext.Element.select = function(selector, unique, root){ * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or * {@link Ext.CompositeElementLite CompositeElementLite} object. * @param {String/Array} selector The CSS selector or an array of elements - * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) * @param {HTMLElement/String} root (optional) The root element of the query or id of the root * @return {CompositeElementLite/CompositeElement} * @member Ext @@ -8547,23 +9101,23 @@ Ext.apply(Ext.CompositeElementLite.prototype, { /** * @class Ext.CompositeElement * @extends Ext.CompositeElementLite - * Standard composite class. Creates a Ext.Element for every element in the collection. - *

- * NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element - * actions will be performed on all the elements in this collection. - *

- * All methods return this and can be chained. -


- var els = Ext.select("#some-el div.some-class", true);
- // or select directly from an existing element
- var el = Ext.get('some-el');
- el.select('div.some-class', true);
-
- els.setWidth(100); // all elements become 100 width
- els.hide(true); // all elements fade out and hide
- // or
- els.setWidth(100).hide(true);
-

+ *

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.Element} and + * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.

+ *

All methods return this and can be chained.

+ * Usage: +


+var els = Ext.select("#some-el div.some-class", true);
+// or select directly from an existing element
+var el = Ext.get('some-el');
+el.select('div.some-class', true);
+
+els.setWidth(100); // all elements become 100 width
+els.hide(true); // all elements fade out and hide
+// or
+els.setWidth(100).hide(true);
+

*/ Ext.CompositeElement = function(els, root){ this.elements = []; @@ -8571,58 +9125,29 @@ Ext.CompositeElement = function(els, root){ }; Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, { - invoke : function(fn, args){ - Ext.each(this.elements, function(e) { - Ext.Element.prototype[fn].apply(e, args); - }); - return this; + + // private + getElement : function(el){ + // In this case just return it, since we already have a reference to it + return el; }, + + // private + transformElement : function(el){ + return Ext.get(el); + } /** * Adds elements to this composite. * @param {String/Array} els A string CSS selector, an array of elements or an element * @return {CompositeElement} this */ - add : function(els, root){ - if(!els){ - return this; - } - if(typeof els == "string"){ - els = Ext.Element.selectorFunction(els, root); - } - var yels = this.elements; - Ext.each(els, function(e) { - yels.push(Ext.get(e)); - }); - return this; - }, /** * Returns the Element object at the specified index * @param {Number} index * @return {Ext.Element} */ - item : function(index){ - return this.elements[index] || null; - }, - - - indexOf : function(el){ - return this.elements.indexOf(Ext.get(el)); - }, - - filter : function(selector){ - var me = this, - out = []; - - Ext.each(me.elements, function(el) { - if(el.is(selector)){ - out.push(Ext.get(el)); - } - }); - me.elements = out; - return me; - }, /** * Iterates each element in this composite @@ -8631,26 +9156,16 @@ Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, { * element. If the supplied function returns false, * iteration stops. This function is called with the following arguments: *

element : Object - *
The element at the current index + *
element : Ext.Element
The element at the current index * in the composite
composite : Object - *
This composite.
index : Number - *
The current index within the composite - *
composite : Object
This composite.
index : Number
The current index within the composite

- * @param {Object} scope (optional) The scope to call the specified function. + * @param {Object} scope (optional) The scope (

 reference) in which the specified function is executed.
      * Defaults to the element at the current index
      * within the composite.
      * @return {CompositeElement} this
      */
-    each : function(fn, scope){
-        Ext.each(this.elements, function(e, i){
-            return fn.call(scope || e, e, this, i);
-        }, this);
-        return this;
-    }
 });
 
 /**
@@ -8697,7 +9212,7 @@ Ext.select = Ext.Element.select;(function(){
         POST = 'POST',
         GET = 'GET',
         WINDOW = window;
-    
+
     /**
      * @class Ext.data.Connection
      * @extends Ext.util.Observable
@@ -8730,7 +9245,7 @@ Ext.select = Ext.Element.select;(function(){
      * @constructor
      * @param {Object} config a configuration object.
      */
-    Ext.data.Connection = function(config){    
+    Ext.data.Connection = function(config){
         Ext.apply(this, config);
         this.addEvents(
             /**
@@ -8794,20 +9309,20 @@ Ext.select = Ext.Element.select;(function(){
          * @type Boolean
          */
         autoAbort:false,
-    
+
         /**
          * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
          * @type Boolean
          */
         disableCaching: true,
-        
+
         /**
          * @cfg {String} disableCachingParam (Optional) Change the parameter which is sent went disabling caching
          * through a cache buster. Defaults to '_dc'
          * @type String
          */
         disableCachingParam: '_dc',
-        
+
         /**
          * Sends an HTTP request to a remote server.
          * Important: Ajax server requests are asynchronous, and this call will
@@ -8845,8 +9360,8 @@ Ext.Ajax.request({
          * parameters:

          * options : ObjectThe parameter to the request call.
          * success : BooleanTrue if the request succeeded.
-         * response : ObjectThe XMLHttpRequest object containing the response data. 
-         * See http://www.w3.org/TR/XMLHttpRequest/ for details about 
+         * 
response : ObjectThe XMLHttpRequest object containing the response data.
+         * See http://www.w3.org/TR/XMLHttpRequest/ for details about
          * accessing elements of the response.
          *


          * success : Function (Optional)The function
@@ -8868,7 +9383,7 @@ Ext.Ajax.request({
          * 
timeout : Number (Optional)The timeout in milliseconds to be used for this request. Defaults to 30 seconds.
          * form : Element/HTMLElement/String (Optional)The <form>
          * Element or the id of the <form> to pull parameters from.
-         * isUpload : Boolean (Optional)Only meaningful when used 
+         *

isUpload : Boolean (Optional)Only meaningful when used * with the form option. * True if the form object is a file upload (will be set automatically if the form was * configured with enctype "multipart/form-data"). @@ -8913,15 +9428,15 @@ Ext.Ajax.request({ me.indicatorText = ''+o.indicatorText+""; } if(me.indicatorText) { - Ext.getDom(o.el).innerHTML = me.indicatorText; + Ext.getDom(o.el).innerHTML = me.indicatorText; } o.success = (Ext.isFunction(o.success) ? o.success : function(){}).createInterceptor(function(response) { Ext.getDom(o.el).innerHTML = response.responseText; }); } - + var p = o.params, - url = o.url || me.url, + url = o.url || me.url, method, cb = {success: me.handleResponse, failure: me.handleFailure, @@ -8929,61 +9444,61 @@ Ext.Ajax.request({ argument: {options: o}, timeout : o.timeout || me.timeout }, - form, - serForm; - - + form, + serForm; + + if (Ext.isFunction(p)) { p = p.call(o.scope||WINDOW, o); } - - p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p); - + + p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p); + if (Ext.isFunction(url)) { url = url.call(o.scope || WINDOW, o); } - + if((form = Ext.getDom(o.form))){ url = url || form.action; - if(o.isUpload || /multipart\/form-data/i.test(form.getAttribute("enctype"))) { + if(o.isUpload || /multipart\/form-data/i.test(form.getAttribute("enctype"))) { return me.doFormUpload.call(me, o, p, url); } - serForm = Ext.lib.Ajax.serializeForm(form); + serForm = Ext.lib.Ajax.serializeForm(form); p = p ? (p + '&' + serForm) : serForm; } - + method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? POST : GET); - + if(method === GET && (me.disableCaching && o.disableCaching !== false) || o.disableCaching === true){ var dcp = o.disableCachingParam || me.disableCachingParam; url = Ext.urlAppend(url, dcp + '=' + (new Date().getTime())); } - + o.headers = Ext.apply(o.headers || {}, me.defaultHeaders || {}); - + if(o.autoAbort === true || me.autoAbort) { me.abort(); } - + if((method == GET || o.xmlData || o.jsonData) && p){ - url = Ext.urlAppend(url, p); + url = Ext.urlAppend(url, p); p = ''; } return (me.transId = Ext.lib.Ajax.request(method, url, cb, p, o)); - }else{ + }else{ return o.callback ? o.callback.apply(o.scope, [o,UNDEFINED,UNDEFINED]) : null; } }, - + /** * Determine whether this object has a request outstanding. * @param {Number} transactionId (Optional) defaults to the last transaction * @return {Boolean} True if there is an outstanding request. */ isLoading : function(transId){ - return transId ? Ext.lib.Ajax.isCallInProgress(transId) : !! this.transId; + return transId ? Ext.lib.Ajax.isCallInProgress(transId) : !! this.transId; }, - + /** * Aborts any outstanding request. * @param {Number} transactionId (Optional) defaults to the last transaction @@ -9042,16 +9557,23 @@ Ext.Ajax.request({ Ext.fly(frame).set({ id: id, name: id, - cls: 'x-hidden', - src: Ext.SSL_SECURE_URL // for IE + cls: 'x-hidden' + }); + doc.body.appendChild(frame); + //Reset the Frame to neutral domain + Ext.fly(frame).set({ + src : Ext.SSL_SECURE_URL + }); + // This is required so that IE doesn't pop the response up in a new window. if(Ext.isIE){ document.frames[id].name = id; } + Ext.fly(form).set({ target: id, method: POST, @@ -9143,7 +9665,7 @@ Ext.Ajax.request({ Ext.Ajax.defaultHeaders = { 'Powered-By': 'Ext' }; - * + * *
*
Common Events you may want to set are:
*
{@link Ext.data.Connection#beforerequest beforerequest}
@@ -9155,7 +9677,7 @@ Ext.Ajax.defaultHeaders = { Ext.Ajax.on('beforerequest', this.showSpinner, this); Ext.Ajax.on('requestcomplete', this.hideSpinner, this); Ext.Ajax.on('requestexception', this.hideSpinner, this); - * + * *
*
An example request:
*
@@ -9175,7 +9697,7 @@ Ext.Ajax.{@link Ext.data.Connection#request request}({ form: 'some-form', params: 'foo=bar' }); - *
+ * *
* @singleton */ @@ -9482,17 +10004,17 @@ function() { * If params are specified it uses POST, otherwise it uses GET.

* Note: Due to the asynchronous nature of remote server requests, the Element * will not have been fully updated when the function returns. To post-process the returned - * data, use the callback option, or an update event handler. + * data, use the callback option, or an update event handler. * @param {Object} options A config object containing any of the following options:
*
url : String/Function
The URL to request or a function which * returns the URL (defaults to the value of {@link Ext.Ajax#url} if not specified).
*
method : String
The HTTP method to - * use. Defaults to POST if the params argument is present, otherwise GET.
+ * use. Defaults to POST if the params argument is present, otherwise GET.
*
params : String/Object/Function
The * parameters to pass to the server (defaults to none). These may be specified as a url-encoded * string, or as an object containing properties which represent parameters, * or as a function, which returns such an object.
- *
scripts : Boolean
If true + *
scripts : Boolean
If true * any <script> tags embedded in the response text will be extracted * and executed (defaults to {@link Ext.Updater.defaults#loadScripts}). If this option is specified, * the callback will be called after the execution of the scripts.
@@ -9505,11 +10027,11 @@ function() { *
options : Object
The config object passed to the update call.
*
*
scope : Object
The scope in which - * to execute the callback (The callback's this reference.) If the - * params argument is a function, this scope is used for that function also.
+ * to execute the callback (The callback's this reference.) If the + * params argument is a function, this scope is used for that function also.
*
discardUrl : Boolean
By default, the URL of this request becomes * the default URL for this Updater object, and will be subsequently used in {@link #refresh} - * calls. To bypass this behavior, pass discardUrl:true (defaults to false).
+ * calls. To bypass this behavior, pass discardUrl:true (defaults to false).
*
timeout : Number
The number of seconds to wait for a response before * timing out (defaults to {@link Ext.Updater.defaults#timeout}).
*
text : String
The text to use as the innerHTML of the @@ -9585,14 +10107,14 @@ function() { }, /** - *
Performs an async form post, updating this element with the response. If the form has the attribute + *
Performs an asynchronous form post, updating this element with the response. If the form has the attribute * enctype="multipart/form-data", it assumes it's a file upload. * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
*
File uploads are not performed using normal "Ajax" techniques, that is they are not * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the - * DOM <form> element temporarily modified to have its + * DOM <form> element temporarily modified to have its * target set to refer - * to a dynamically generated, hidden <iframe> which is inserted into the document + * to a dynamically generated, hidden <iframe> which is inserted into the document * but removed after the return data has been gathered.
*
Be aware that file upload packets, sent with the content type multipart/form-data * and some server technologies (notably JEE) may require some custom processing in order to @@ -9769,17 +10291,17 @@ Ext.Updater.updateElement = function(el, url, params, options){ /** * @class Ext.Updater.BasicRenderer - * Default Content renderer. Updates the elements innerHTML with the responseText. + *
This class is a base class implementing a simple render method which updates an element using results from an Ajax request.
+ *
The BasicRenderer updates the element's innerHTML with the responseText. To perform a custom render (i.e. XML or JSON processing), + * create an object with a conforming {@link #render} method and pass it to setRenderer on the Updater.
*/ Ext.Updater.BasicRenderer = function(){}; Ext.Updater.BasicRenderer.prototype = { /** - * This is called when the transaction is completed and it's time to update the element - The BasicRenderer - * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing), - * create an object with a "render(el, response)" method and pass it to setRenderer on the Updater. + * This method is called when an Ajax response is received, and an Element needs updating. * @param {Ext.Element} el The element being rendered - * @param {Object} response The XMLHttpRequest object + * @param {Object} xhr The XMLHttpRequest object * @param {Updater} updateManager The calling update manager * @param {Function} callback A callback that will need to be called if loadScripts is true on the Updater */ @@ -10396,15 +10918,15 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null "dt = (new Date()).clearTime();", // date calculations (note: these calculations create a dependency on Ext.num()) - "y = y >= 0? y : Ext.num(def.y, dt.getFullYear());", - "m = m >= 0? m : Ext.num(def.m - 1, dt.getMonth());", - "d = d >= 0? d : Ext.num(def.d, dt.getDate());", + "y = Ext.num(y, Ext.num(def.y, dt.getFullYear()));", + "m = Ext.num(m, Ext.num(def.m - 1, dt.getMonth()));", + "d = Ext.num(d, Ext.num(def.d, dt.getDate()));", // time calculations (note: these calculations create a dependency on Ext.num()) - "h = h || Ext.num(def.h, dt.getHours());", - "i = i || Ext.num(def.i, dt.getMinutes());", - "s = s || Ext.num(def.s, dt.getSeconds());", - "ms = ms || Ext.num(def.ms, dt.getMilliseconds());", + "h = Ext.num(h, Ext.num(def.h, dt.getHours()));", + "i = Ext.num(i, Ext.num(def.i, dt.getMinutes()));", + "s = Ext.num(s, Ext.num(def.s, dt.getSeconds()));", + "ms = Ext.num(ms, Ext.num(def.ms, dt.getMilliseconds()));", "if(z >= 0 && y >= 0){", // both the year and zero-based day of year are defined and >= 0. @@ -11097,748 +11619,694 @@ console.group('ISO-8601 Granularity Test (see http://www.w3.org/TR/NOTE-datetime console.groupEnd(); //*//** - * @class Ext.util.DelayedTask - *
The DelayedTask class provides a convenient way to "buffer" the execution of a method, - * performing setTimeout where a new timeout cancels the old timeout. When called, the - * task will wait the specified time period before executing. If durng that time period, - * the task is called again, the original call will be cancelled. This continues so that - * the function is only called a single time for each iteration.
- *
This method is especially useful for things like detecting whether a user has finished - * typing in a text field. An example would be performing validation on a keypress. You can - * use this class to buffer the keypress events for a certain number of milliseconds, and - * perform only if they stop for that amount of time. Usage:
-var task = new Ext.util.DelayedTask(function(){ - alert(Ext.getDom('myInputField').value.length); -}); -// Wait 500ms before calling our function. If the user presses another key -// during that 500ms, it will be cancelled and we'll wait another 500ms. -Ext.get('myInputField').on('keypress', function(){ - task.{@link #delay}(500); -}); - *
- *
Note that we are using a DelayedTask here to illustrate a point. The configuration - * option buffer for {@link Ext.util.Observable#addListener addListener/on} will - * also setup a delayed task for you to buffer events.
- * @constructor The parameters to this constructor serve as defaults and are not required. - * @param {Function} fn (optional) The default function to call. - * @param {Object} scope The default scope (The this 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. + * @class Ext.util.MixedCollection + * @extends Ext.util.Observable + * A Collection class that maintains both numeric indexes and keys and exposes events. + * @constructor + * @param {Boolean} allowFunctions Specify true if the {@link #addAll} + * function should add function references to the collection. Defaults to + * false. + * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection + * and return the key value for that item. This is used when available to look up the key on items that + * were passed without an explicit key parameter to a MixedCollection method. Passing this parameter is + * equivalent to providing an implementation for the {@link #getKey} method. */ -Ext.util.DelayedTask = function(fn, scope, args){ - var me = this, - id, - call = function(){ - clearInterval(id); - id = null; - fn.apply(scope, args || []); - }; - +Ext.util.MixedCollection = function(allowFunctions, keyFn){ + this.items = []; + this.map = {}; + this.keys = []; + this.length = 0; + this.addEvents( + /** + * @event clear + * Fires when the collection is cleared. + */ + 'clear', + /** + * @event add + * Fires when an item is added to the collection. + * @param {Number} index The index at which the item was added. + * @param {Object} o The item added. + * @param {String} key The key associated with the added item. + */ + 'add', + /** + * @event replace + * Fires when an item is replaced in the collection. + * @param {String} key he key associated with the new added. + * @param {Object} old The item being replaced. + * @param {Object} new The new item. + */ + 'replace', + /** + * @event remove + * Fires when an item is removed from the collection. + * @param {Object} o The item being removed. + * @param {String} key (optional) The key associated with the removed item. + */ + 'remove', + 'sort' + ); + this.allowFunctions = allowFunctions === true; + if(keyFn){ + this.getKey = keyFn; + } + Ext.util.MixedCollection.superclass.constructor.call(this); +}; + +Ext.extend(Ext.util.MixedCollection, Ext.util.Observable, { + /** - * 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 + * @cfg {Boolean} allowFunctions Specify true if the {@link #addAll} + * function should add function references to the collection. Defaults to + * false. */ - me.delay = function(delay, newFn, newScope, newArgs){ - me.cancel(); - fn = newFn || fn; - scope = newScope || scope; - args = newArgs || args; - id = setInterval(call, delay); - }; + allowFunctions : false, /** - * Cancel the last queued timeout + * Adds an item to the collection. Fires the {@link #add} event when complete. + * @param {String} key
The key to associate with the item, or the new item.
+ *
If a {@link #getKey} implementation was specified for this MixedCollection, + * or if the key of the stored items is in a property called id, + * the MixedCollection will be able to derive the key for the new item. + * In this case just pass the new item in this parameter.
+ * @param {Object} o The item to add. + * @return {Object} The item added. */ - me.cancel = function(){ - if(id){ - clearInterval(id); - id = null; + add : function(key, o){ + if(arguments.length == 1){ + o = arguments[0]; + key = this.getKey(o); } - }; -};/** - * @class Ext.util.MixedCollection - * @extends Ext.util.Observable - * A Collection class that maintains both numeric indexes and keys and exposes events. - * @constructor - * @param {Boolean} allowFunctions Specify true if the {@link #addAll} - * function should add function references to the collection. Defaults to - * false. - * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection - * and return the key value for that item. This is used when available to look up the key on items that - * were passed without an explicit key parameter to a MixedCollection method. Passing this parameter is - * equivalent to providing an implementation for the {@link #getKey} method. - */ -Ext.util.MixedCollection = function(allowFunctions, keyFn){ - this.items = []; - this.map = {}; - this.keys = []; - this.length = 0; - this.addEvents( - /** - * @event clear - * Fires when the collection is cleared. - */ - 'clear', - /** - * @event add - * Fires when an item is added to the collection. - * @param {Number} index The index at which the item was added. - * @param {Object} o The item added. - * @param {String} key The key associated with the added item. - */ - 'add', - /** - * @event replace - * Fires when an item is replaced in the collection. - * @param {String} key he key associated with the new added. - * @param {Object} old The item being replaced. - * @param {Object} new The new item. - */ - 'replace', - /** - * @event remove - * Fires when an item is removed from the collection. - * @param {Object} o The item being removed. - * @param {String} key (optional) The key associated with the removed item. - */ - 'remove', - 'sort' - ); - this.allowFunctions = allowFunctions === true; - if(keyFn){ - this.getKey = keyFn; - } - Ext.util.MixedCollection.superclass.constructor.call(this); -}; - -Ext.extend(Ext.util.MixedCollection, Ext.util.Observable, { - - /** - * @cfg {Boolean} allowFunctions Specify true if the {@link #addAll} - * function should add function references to the collection. Defaults to - * false. - */ - allowFunctions : false, - - /** - * Adds an item to the collection. Fires the {@link #add} event when complete. - * @param {String} key
The key to associate with the item, or the new item.
- *
If a {@link #getKey} implementation was specified for this MixedCollection, - * or if the key of the stored items is in a property called id, - * the MixedCollection will be able to derive the key for the new item. - * In this case just pass the new item in this parameter.
- * @param {Object} o The item to add. - * @return {Object} The item added. - */ - add : function(key, o){ - if(arguments.length == 1){ - o = arguments[0]; - key = this.getKey(o); - } - if(typeof key != 'undefined' && key !== null){ - var old = this.map[key]; - if(typeof old != 'undefined'){ - return this.replace(key, o); - } - this.map[key] = o; - } - this.length++; - this.items.push(o); - this.keys.push(key); - this.fireEvent('add', this.length-1, o, key); - return o; - }, - - /** - * MixedCollection has a generic way to fetch keys if you implement getKey. The default implementation - * simply returns item.id but you can provide your own implementation - * to return a different value as in the following examples:
-// normal way -var mc = new Ext.util.MixedCollection(); -mc.add(someEl.dom.id, someEl); -mc.add(otherEl.dom.id, otherEl); -//and so on - -// using getKey -var mc = new Ext.util.MixedCollection(); -mc.getKey = function(el){ - return el.dom.id; -}; -mc.add(someEl); -mc.add(otherEl); - -// or via the constructor -var mc = new Ext.util.MixedCollection(false, function(el){ - return el.dom.id; -}); -mc.add(someEl); -mc.add(otherEl); - *
- * @param {Object} item The item for which to find the key. - * @return {Object} The key for the passed item. - */ - getKey : function(o){ - return o.id; - }, - - /** - * Replaces an item in the collection. Fires the {@link #replace} event when complete. - * @param {String} key
The key associated with the item to replace, or the replacement item.
- *
If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key - * of your stored items is in a property called id, then the MixedCollection - * will be able to derive the key of the replacement item. If you want to replace an item - * with one having the same key value, then just pass the replacement item in this parameter.
- * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate - * with that key. - * @return {Object} The new item. - */ - replace : function(key, o){ - if(arguments.length == 1){ - o = arguments[0]; - key = this.getKey(o); - } - var old = this.map[key]; - if(typeof key == 'undefined' || key === null || typeof old == 'undefined'){ - return this.add(key, o); - } - var index = this.indexOfKey(key); - this.items[index] = o; - this.map[key] = o; - this.fireEvent('replace', key, old, o); - return o; - }, - - /** - * Adds all elements of an Array or an Object to the collection. - * @param {Object/Array} objs An Object containing properties which will be added - * to the collection, or an Array of values, each of which are added to the collection. - * Functions references will be added to the collection if {@link #allowFunctions} - * has been set to true. - */ - addAll : function(objs){ - if(arguments.length > 1 || Ext.isArray(objs)){ - var args = arguments.length > 1 ? arguments : objs; - for(var i = 0, len = args.length; i < len; i++){ - this.add(args[i]); - } - }else{ - for(var key in objs){ - if(this.allowFunctions || typeof objs[key] != 'function'){ - this.add(key, objs[key]); - } - } - } - }, - - /** - * Executes the specified function once for every item in the collection, passing the following arguments: - *
- *
item : Mixed
The collection item
- *
index : Number
The item's index
- *
length : Number
The total number of items in the collection
- *
- * The function should return a boolean value. Returning false from the function will stop the iteration. - * @param {Function} fn The function to execute for each item. - * @param {Object} scope (optional) The scope in which to execute the function. - */ - each : function(fn, scope){ - var items = [].concat(this.items); // each safe for removal - for(var i = 0, len = items.length; i < len; i++){ - if(fn.call(scope || items[i], items[i], i, len) === false){ - break; - } - } - }, - - /** - * Executes the specified function once for every key in the collection, passing each - * key, and its associated item as the first two parameters. - * @param {Function} fn The function to execute for each item. - * @param {Object} scope (optional) The scope in which to execute the function. - */ - eachKey : function(fn, scope){ - for(var i = 0, len = this.keys.length; i < len; i++){ - fn.call(scope || window, this.keys[i], this.items[i], i, len); - } - }, - - /** - * Returns the first item in the collection which elicits a true return value from the - * passed selection function. - * @param {Function} fn The selection function to execute for each item. - * @param {Object} scope (optional) The scope in which to execute the function. - * @return {Object} The first item in the collection which returned true from the selection function. - */ - find : function(fn, scope){ - for(var i = 0, len = this.items.length; i < len; i++){ - if(fn.call(scope || window, this.items[i], this.keys[i])){ - return this.items[i]; - } - } - return null; - }, - - /** - * Inserts an item at the specified index in the collection. Fires the {@link #add} event when complete. - * @param {Number} index The index to insert the item at. - * @param {String} key The key to associate with the new item, or the item itself. - * @param {Object} o (optional) If the second parameter was a key, the new item. - * @return {Object} The item inserted. - */ - insert : function(index, key, o){ - if(arguments.length == 2){ - o = arguments[1]; - key = this.getKey(o); - } - if(this.containsKey(key)){ - this.suspendEvents(); - this.removeKey(key); - this.resumeEvents(); - } - if(index >= this.length){ - return this.add(key, o); - } - this.length++; - this.items.splice(index, 0, o); - if(typeof key != 'undefined' && key !== null){ - this.map[key] = o; - } - this.keys.splice(index, 0, key); - this.fireEvent('add', index, o, key); - return o; - }, - - /** - * Remove an item from the collection. - * @param {Object} o The item to remove. - * @return {Object} The item removed or false if no item was removed. - */ - remove : function(o){ - return this.removeAt(this.indexOf(o)); - }, - - /** - * Remove an item from a specified index in the collection. Fires the {@link #remove} event when complete. - * @param {Number} index The index within the collection of the item to remove. - * @return {Object} The item removed or false if no item was removed. - */ - removeAt : function(index){ - if(index < this.length && index >= 0){ - this.length--; - var o = this.items[index]; - this.items.splice(index, 1); - var key = this.keys[index]; - if(typeof key != 'undefined'){ - delete this.map[key]; - } - this.keys.splice(index, 1); - this.fireEvent('remove', o, key); - return o; - } - return false; - }, - - /** - * Removed an item associated with the passed key fom the collection. - * @param {String} key The key of the item to remove. - * @return {Object} The item removed or false if no item was removed. - */ - removeKey : function(key){ - return this.removeAt(this.indexOfKey(key)); - }, - - /** - * Returns the number of items in the collection. - * @return {Number} the number of items in the collection. - */ - getCount : function(){ - return this.length; - }, - - /** - * Returns index within the collection of the passed Object. - * @param {Object} o The item to find the index of. - * @return {Number} index of the item. Returns -1 if not found. - */ - indexOf : function(o){ - return this.items.indexOf(o); - }, - - /** - * Returns index within the collection of the passed key. - * @param {String} key The key to find the index of. - * @return {Number} index of the key. - */ - indexOfKey : function(key){ - return this.keys.indexOf(key); - }, - - /** - * Returns the item associated with the passed key OR index. - * Key has priority over index. This is the equivalent - * of calling {@link #key} first, then if nothing matched calling {@link #itemAt}. - * @param {String/Number} key The key or index of the item. - * @return {Object} If the item is found, returns the item. If the item was not found, returns undefined. - * If an item was found, but is a Class, returns null. - */ - item : function(key){ - var mk = this.map[key], - item = mk !== undefined ? mk : (typeof key == 'number') ? this.items[key] : undefined; - return !Ext.isFunction(item) || this.allowFunctions ? item : null; // for prototype! - }, - - /** - * Returns the item at the specified index. - * @param {Number} index The index of the item. - * @return {Object} The item at the specified index. - */ - itemAt : function(index){ - return this.items[index]; - }, - - /** - * Returns the item associated with the passed key. - * @param {String/Number} key The key of the item. - * @return {Object} The item associated with the passed key. - */ - key : function(key){ - return this.map[key]; - }, - - /** - * Returns true if the collection contains the passed Object as an item. - * @param {Object} o The Object to look for in the collection. - * @return {Boolean} True if the collection contains the Object as an item. - */ - contains : function(o){ - return this.indexOf(o) != -1; - }, - - /** - * Returns true if the collection contains the passed Object as a key. - * @param {String} key The key to look for in the collection. - * @return {Boolean} True if the collection contains the Object as a key. - */ - containsKey : function(key){ - return typeof this.map[key] != 'undefined'; - }, - - /** - * Removes all items from the collection. Fires the {@link #clear} event when complete. - */ - clear : function(){ - this.length = 0; - this.items = []; - this.keys = []; - this.map = {}; - this.fireEvent('clear'); - }, - - /** - * Returns the first item in the collection. - * @return {Object} the first item in the collection.. - */ - first : function(){ - return this.items[0]; - }, - - /** - * Returns the last item in the collection. - * @return {Object} the last item in the collection.. - */ - last : function(){ - return this.items[this.length-1]; - }, - - /** - * @private - * @param {String} property Property to sort by ('key', 'value', or 'index') - * @param {String} dir (optional) Direction to sort 'ASC' or 'DESC'. Defaults to 'ASC'. - * @param {Function} fn (optional) Comparison function that defines the sort order. - * Defaults to sorting by numeric value. - */ - _sort : function(property, dir, fn){ - var i, - len, - dsc = String(dir).toUpperCase() == 'DESC' ? -1 : 1, - c = [], k = this.keys, items = this.items; - - fn = fn || function(a, b){ - return a-b; - }; - for(i = 0, len = items.length; i < len; i++){ - c[c.length] = {key: k[i], value: items[i], index: i}; - } - c.sort(function(a, b){ - var v = fn(a[property], b[property]) * dsc; - if(v === 0){ - v = (a.index < b.index ? -1 : 1); - } - return v; - }); - for(i = 0, len = c.length; i < len; i++){ - items[i] = c[i].value; - k[i] = c[i].key; - } - this.fireEvent('sort', this); - }, - - /** - * Sorts this collection by item value with the passed comparison function. - * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'. - * @param {Function} fn (optional) Comparison function that defines the sort order. - * Defaults to sorting by numeric value. - */ - sort : function(dir, fn){ - this._sort('value', dir, fn); - }, - - /** - * Sorts this collection by keys. - * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'. - * @param {Function} fn (optional) Comparison function that defines the sort order. - * Defaults to sorting by case insensitive string. - */ - keySort : function(dir, fn){ - this._sort('key', dir, fn || function(a, b){ - var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase(); - return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); - }); - }, - - /** - * Returns a range of items in this collection - * @param {Number} startIndex (optional) The starting index. Defaults to 0. - * @param {Number} endIndex (optional) The ending index. Defaults to the last item. - * @return {Array} An array of items - */ - getRange : function(start, end){ - var items = this.items; - if(items.length < 1){ - return []; - } - start = start || 0; - end = Math.min(typeof end == 'undefined' ? this.length-1 : end, this.length-1); - var i, r = []; - if(start <= end){ - for(i = start; i <= end; i++) { - r[r.length] = items[i]; - } - }else{ - for(i = start; i >= end; i--) { - r[r.length] = items[i]; - } - } - return r; - }, - - /** - * Filter the objects in this collection by a specific property. - * Returns a new collection that has been filtered. - * @param {String} property A property on your objects - * @param {String/RegExp} value Either string that the property values - * should start with or a RegExp to test against the property - * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning - * @param {Boolean} caseSensitive (optional) True for case sensitive comparison (defaults to False). - * @return {MixedCollection} The new filtered collection - */ - filter : function(property, value, anyMatch, caseSensitive){ - if(Ext.isEmpty(value, false)){ - return this.clone(); - } - value = this.createValueMatcher(value, anyMatch, caseSensitive); - return this.filterBy(function(o){ - return o && value.test(o[property]); - }); - }, - - /** - * Filter by a function. Returns a new collection that has been filtered. - * The passed function will be called with each object in the collection. - * If the function returns true, the value is included otherwise it is filtered. - * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key) - * @param {Object} scope (optional) The scope of the function (defaults to this) - * @return {MixedCollection} The new filtered collection - */ - filterBy : function(fn, scope){ - var r = new Ext.util.MixedCollection(); - r.getKey = this.getKey; - var k = this.keys, it = this.items; - for(var i = 0, len = it.length; i < len; i++){ - if(fn.call(scope||this, it[i], k[i])){ - r.add(k[i], it[i]); - } - } - return r; - }, - - /** - * Finds the index of the first matching object in this collection by a specific property/value. - * @param {String} property The name of a property on your objects. - * @param {String/RegExp} value A string that the property values - * should start with or a RegExp to test against the property. - * @param {Number} start (optional) The index to start searching at (defaults to 0). - * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning. - * @param {Boolean} caseSensitive (optional) True for case sensitive comparison. - * @return {Number} The matched index or -1 - */ - findIndex : function(property, value, start, anyMatch, caseSensitive){ - if(Ext.isEmpty(value, false)){ - return -1; - } - value = this.createValueMatcher(value, anyMatch, caseSensitive); - return this.findIndexBy(function(o){ - return o && value.test(o[property]); - }, null, start); - }, - - /** - * Find the index of the first matching object in this collection by a function. - * If the function returns true it is considered a match. - * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key). - * @param {Object} scope (optional) The scope of the function (defaults to this). - * @param {Number} start (optional) The index to start searching at (defaults to 0). - * @return {Number} The matched index or -1 - */ - findIndexBy : function(fn, scope, start){ - var k = this.keys, it = this.items; - for(var i = (start||0), len = it.length; i < len; i++){ - if(fn.call(scope||this, it[i], k[i])){ - return i; - } - } - return -1; - }, - - // private - createValueMatcher : function(value, anyMatch, caseSensitive){ - if(!value.exec){ // not a regex - value = String(value); - value = new RegExp((anyMatch === true ? '' : '^') + Ext.escapeRe(value), caseSensitive ? '' : 'i'); - } - return value; - }, - - /** - * Creates a shallow copy of this collection - * @return {MixedCollection} - */ - clone : function(){ - var r = new Ext.util.MixedCollection(); - var k = this.keys, it = this.items; - for(var i = 0, len = it.length; i < len; i++){ - r.add(k[i], it[i]); - } - r.getKey = this.getKey; - return r; - } -}); -/** - * This method calls {@link #item item()}. - * Returns the item associated with the passed key OR index. Key has priority - * over index. This is the equivalent of calling {@link #key} first, then if - * nothing matched calling {@link #itemAt}. - * @param {String/Number} key The key or index of the item. - * @return {Object} If the item is found, returns the item. If the item was - * not found, returns undefined. If an item was found, but is a Class, - * returns null. - */ -Ext.util.MixedCollection.prototype.get = Ext.util.MixedCollection.prototype.item;/** - * @class Ext.util.JSON - * Modified version of Douglas Crockford"s json.js that doesn"t - * mess with the Object prototype - * http://www.json.org/js.html - * @singleton - */ -Ext.util.JSON = new (function(){ - var useHasOwn = !!{}.hasOwnProperty, - isNative = function() { - var useNative = null; + if(typeof key != 'undefined' && key !== null){ + var old = this.map[key]; + if(typeof old != 'undefined'){ + return this.replace(key, o); + } + this.map[key] = o; + } + this.length++; + this.items.push(o); + this.keys.push(key); + this.fireEvent('add', this.length-1, o, key); + return o; + }, - return function() { - if (useNative === null) { - useNative = Ext.USE_NATIVE_JSON && window.JSON && JSON.toString() == '[object JSON]'; - } - - return useNative; - }; - }(), - pad = function(n) { - return n < 10 ? "0" + n : n; - }, - doDecode = function(json){ - return eval("(" + json + ')'); - }, - doEncode = function(o){ - if(!Ext.isDefined(o) || o === null){ - return "null"; - }else if(Ext.isArray(o)){ - return encodeArray(o); - }else if(Ext.isDate(o)){ - return Ext.util.JSON.encodeDate(o); - }else if(Ext.isString(o)){ - return encodeString(o); - }else if(typeof o == "number"){ - //don't use isNumber here, since finite checks happen inside isNumber - return isFinite(o) ? String(o) : "null"; - }else if(Ext.isBoolean(o)){ - return String(o); - }else { - var a = ["{"], b, i, v; - for (i in o) { - // don't encode DOM objects - if(!o.getElementsByTagName){ - if(!useHasOwn || o.hasOwnProperty(i)) { - v = o[i]; - switch (typeof v) { - case "undefined": - case "function": - case "unknown": - break; - default: - if(b){ - a.push(','); - } - a.push(doEncode(i), ":", - v === null ? "null" : doEncode(v)); - b = true; - } - } - } + /** + * MixedCollection has a generic way to fetch keys if you implement getKey. The default implementation + * simply returns item.id but you can provide your own implementation + * to return a different value as in the following examples:
+// normal way +var mc = new Ext.util.MixedCollection(); +mc.add(someEl.dom.id, someEl); +mc.add(otherEl.dom.id, otherEl); +//and so on + +// using getKey +var mc = new Ext.util.MixedCollection(); +mc.getKey = function(el){ + return el.dom.id; +}; +mc.add(someEl); +mc.add(otherEl); + +// or via the constructor +var mc = new Ext.util.MixedCollection(false, function(el){ + return el.dom.id; +}); +mc.add(someEl); +mc.add(otherEl); + *
+ * @param {Object} item The item for which to find the key. + * @return {Object} The key for the passed item. + */ + getKey : function(o){ + return o.id; + }, + + /** + * Replaces an item in the collection. Fires the {@link #replace} event when complete. + * @param {String} key
The key associated with the item to replace, or the replacement item.
+ *
If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key + * of your stored items is in a property called id, then the MixedCollection + * will be able to derive the key of the replacement item. If you want to replace an item + * with one having the same key value, then just pass the replacement item in this parameter.
+ * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate + * with that key. + * @return {Object} The new item. + */ + replace : function(key, o){ + if(arguments.length == 1){ + o = arguments[0]; + key = this.getKey(o); + } + var old = this.map[key]; + if(typeof key == 'undefined' || key === null || typeof old == 'undefined'){ + return this.add(key, o); + } + var index = this.indexOfKey(key); + this.items[index] = o; + this.map[key] = o; + this.fireEvent('replace', key, old, o); + return o; + }, + + /** + * Adds all elements of an Array or an Object to the collection. + * @param {Object/Array} objs An Object containing properties which will be added + * to the collection, or an Array of values, each of which are added to the collection. + * Functions references will be added to the collection if {@link #allowFunctions} + * has been set to true. + */ + addAll : function(objs){ + if(arguments.length > 1 || Ext.isArray(objs)){ + var args = arguments.length > 1 ? arguments : objs; + for(var i = 0, len = args.length; i < len; i++){ + this.add(args[i]); + } + }else{ + for(var key in objs){ + if(this.allowFunctions || typeof objs[key] != 'function'){ + this.add(key, objs[key]); } - a.push("}"); - return a.join(""); - } - }, - m = { - "\b": '\\b', - "\t": '\\t', - "\n": '\\n', - "\f": '\\f', - "\r": '\\r', - '"' : '\\"', - "\\": '\\\\' - }, - encodeString = function(s){ - if (/["\\\x00-\x1f]/.test(s)) { - return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) { - var c = m[b]; - if(c){ - return c; - } - c = b.charCodeAt(); - return "\\u00" + - Math.floor(c / 16).toString(16) + - (c % 16).toString(16); - }) + '"'; } - return '"' + s + '"'; - }, - encodeArray = function(o){ + } + }, + + /** + * Executes the specified function once for every item in the collection, passing the following arguments: + *
+ *
item : Mixed
The collection item
+ *
index : Number
The item's index
+ *
length : Number
The total number of items in the collection
+ *
+ * The function should return a boolean value. Returning false from the function will stop the iteration. + * @param {Function} fn The function to execute for each item. + * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the current item in the iteration. + */ + each : function(fn, scope){ + var items = [].concat(this.items); // each safe for removal + for(var i = 0, len = items.length; i < len; i++){ + if(fn.call(scope || items[i], items[i], i, len) === false){ + break; + } + } + }, + + /** + * Executes the specified function once for every key in the collection, passing each + * key, and its associated item as the first two parameters. + * @param {Function} fn The function to execute for each item. + * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the browser window. + */ + eachKey : function(fn, scope){ + for(var i = 0, len = this.keys.length; i < len; i++){ + fn.call(scope || window, this.keys[i], this.items[i], i, len); + } + }, + + /** + * Returns the first item in the collection which elicits a true return value from the + * passed selection function. + * @param {Function} fn The selection function to execute for each item. + * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the browser window. + * @return {Object} The first item in the collection which returned true from the selection function. + */ + find : function(fn, scope){ + for(var i = 0, len = this.items.length; i < len; i++){ + if(fn.call(scope || window, this.items[i], this.keys[i])){ + return this.items[i]; + } + } + return null; + }, + + /** + * Inserts an item at the specified index in the collection. Fires the {@link #add} event when complete. + * @param {Number} index The index to insert the item at. + * @param {String} key The key to associate with the new item, or the item itself. + * @param {Object} o (optional) If the second parameter was a key, the new item. + * @return {Object} The item inserted. + */ + insert : function(index, key, o){ + if(arguments.length == 2){ + o = arguments[1]; + key = this.getKey(o); + } + if(this.containsKey(key)){ + this.suspendEvents(); + this.removeKey(key); + this.resumeEvents(); + } + if(index >= this.length){ + return this.add(key, o); + } + this.length++; + this.items.splice(index, 0, o); + if(typeof key != 'undefined' && key !== null){ + this.map[key] = o; + } + this.keys.splice(index, 0, key); + this.fireEvent('add', index, o, key); + return o; + }, + + /** + * Remove an item from the collection. + * @param {Object} o The item to remove. + * @return {Object} The item removed or false if no item was removed. + */ + remove : function(o){ + return this.removeAt(this.indexOf(o)); + }, + + /** + * Remove an item from a specified index in the collection. Fires the {@link #remove} event when complete. + * @param {Number} index The index within the collection of the item to remove. + * @return {Object} The item removed or false if no item was removed. + */ + removeAt : function(index){ + if(index < this.length && index >= 0){ + this.length--; + var o = this.items[index]; + this.items.splice(index, 1); + var key = this.keys[index]; + if(typeof key != 'undefined'){ + delete this.map[key]; + } + this.keys.splice(index, 1); + this.fireEvent('remove', o, key); + return o; + } + return false; + }, + + /** + * Removed an item associated with the passed key fom the collection. + * @param {String} key The key of the item to remove. + * @return {Object} The item removed or false if no item was removed. + */ + removeKey : function(key){ + return this.removeAt(this.indexOfKey(key)); + }, + + /** + * Returns the number of items in the collection. + * @return {Number} the number of items in the collection. + */ + getCount : function(){ + return this.length; + }, + + /** + * Returns index within the collection of the passed Object. + * @param {Object} o The item to find the index of. + * @return {Number} index of the item. Returns -1 if not found. + */ + indexOf : function(o){ + return this.items.indexOf(o); + }, + + /** + * Returns index within the collection of the passed key. + * @param {String} key The key to find the index of. + * @return {Number} index of the key. + */ + indexOfKey : function(key){ + return this.keys.indexOf(key); + }, + + /** + * Returns the item associated with the passed key OR index. + * Key has priority over index. This is the equivalent + * of calling {@link #key} first, then if nothing matched calling {@link #itemAt}. + * @param {String/Number} key The key or index of the item. + * @return {Object} If the item is found, returns the item. If the item was not found, returns undefined. + * If an item was found, but is a Class, returns null. + */ + item : function(key){ + var mk = this.map[key], + item = mk !== undefined ? mk : (typeof key == 'number') ? this.items[key] : undefined; + return !Ext.isFunction(item) || this.allowFunctions ? item : null; // for prototype! + }, + + /** + * Returns the item at the specified index. + * @param {Number} index The index of the item. + * @return {Object} The item at the specified index. + */ + itemAt : function(index){ + return this.items[index]; + }, + + /** + * Returns the item associated with the passed key. + * @param {String/Number} key The key of the item. + * @return {Object} The item associated with the passed key. + */ + key : function(key){ + return this.map[key]; + }, + + /** + * Returns true if the collection contains the passed Object as an item. + * @param {Object} o The Object to look for in the collection. + * @return {Boolean} True if the collection contains the Object as an item. + */ + contains : function(o){ + return this.indexOf(o) != -1; + }, + + /** + * Returns true if the collection contains the passed Object as a key. + * @param {String} key The key to look for in the collection. + * @return {Boolean} True if the collection contains the Object as a key. + */ + containsKey : function(key){ + return typeof this.map[key] != 'undefined'; + }, + + /** + * Removes all items from the collection. Fires the {@link #clear} event when complete. + */ + clear : function(){ + this.length = 0; + this.items = []; + this.keys = []; + this.map = {}; + this.fireEvent('clear'); + }, + + /** + * Returns the first item in the collection. + * @return {Object} the first item in the collection.. + */ + first : function(){ + return this.items[0]; + }, + + /** + * Returns the last item in the collection. + * @return {Object} the last item in the collection.. + */ + last : function(){ + return this.items[this.length-1]; + }, + + /** + * @private + * @param {String} property Property to sort by ('key', 'value', or 'index') + * @param {String} dir (optional) Direction to sort 'ASC' or 'DESC'. Defaults to 'ASC'. + * @param {Function} fn (optional) Comparison function that defines the sort order. + * Defaults to sorting by numeric value. + */ + _sort : function(property, dir, fn){ + var i, + len, + dsc = String(dir).toUpperCase() == 'DESC' ? -1 : 1, + c = [], k = this.keys, items = this.items; + + fn = fn || function(a, b){ + return a-b; + }; + for(i = 0, len = items.length; i < len; i++){ + c[c.length] = {key: k[i], value: items[i], index: i}; + } + c.sort(function(a, b){ + var v = fn(a[property], b[property]) * dsc; + if(v === 0){ + v = (a.index < b.index ? -1 : 1); + } + return v; + }); + for(i = 0, len = c.length; i < len; i++){ + items[i] = c[i].value; + k[i] = c[i].key; + } + this.fireEvent('sort', this); + }, + + /** + * Sorts this collection by item value with the passed comparison function. + * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'. + * @param {Function} fn (optional) Comparison function that defines the sort order. + * Defaults to sorting by numeric value. + */ + sort : function(dir, fn){ + this._sort('value', dir, fn); + }, + + /** + * Sorts this collection by keys. + * @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'. + * @param {Function} fn (optional) Comparison function that defines the sort order. + * Defaults to sorting by case insensitive string. + */ + keySort : function(dir, fn){ + this._sort('key', dir, fn || function(a, b){ + var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase(); + return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); + }); + }, + + /** + * Returns a range of items in this collection + * @param {Number} startIndex (optional) The starting index. Defaults to 0. + * @param {Number} endIndex (optional) The ending index. Defaults to the last item. + * @return {Array} An array of items + */ + getRange : function(start, end){ + var items = this.items; + if(items.length < 1){ + return []; + } + start = start || 0; + end = Math.min(typeof end == 'undefined' ? this.length-1 : end, this.length-1); + var i, r = []; + if(start <= end){ + for(i = start; i <= end; i++) { + r[r.length] = items[i]; + } + }else{ + for(i = start; i >= end; i--) { + r[r.length] = items[i]; + } + } + return r; + }, + + /** + * Filter the objects in this collection by a specific property. + * Returns a new collection that has been filtered. + * @param {String} property A property on your objects + * @param {String/RegExp} value Either string that the property values + * should start with or a RegExp to test against the property + * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning + * @param {Boolean} caseSensitive (optional) True for case sensitive comparison (defaults to False). + * @return {MixedCollection} The new filtered collection + */ + filter : function(property, value, anyMatch, caseSensitive){ + if(Ext.isEmpty(value, false)){ + return this.clone(); + } + value = this.createValueMatcher(value, anyMatch, caseSensitive); + return this.filterBy(function(o){ + return o && value.test(o[property]); + }); + }, + + /** + * Filter by a function. Returns a new collection that has been filtered. + * The passed function will be called with each object in the collection. + * If the function returns true, the value is included otherwise it is filtered. + * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key) + * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to this MixedCollection. + * @return {MixedCollection} The new filtered collection + */ + filterBy : function(fn, scope){ + var r = new Ext.util.MixedCollection(); + r.getKey = this.getKey; + var k = this.keys, it = this.items; + for(var i = 0, len = it.length; i < len; i++){ + if(fn.call(scope||this, it[i], k[i])){ + r.add(k[i], it[i]); + } + } + return r; + }, + + /** + * Finds the index of the first matching object in this collection by a specific property/value. + * @param {String} property The name of a property on your objects. + * @param {String/RegExp} value A string that the property values + * should start with or a RegExp to test against the property. + * @param {Number} start (optional) The index to start searching at (defaults to 0). + * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning. + * @param {Boolean} caseSensitive (optional) True for case sensitive comparison. + * @return {Number} The matched index or -1 + */ + findIndex : function(property, value, start, anyMatch, caseSensitive){ + if(Ext.isEmpty(value, false)){ + return -1; + } + value = this.createValueMatcher(value, anyMatch, caseSensitive); + return this.findIndexBy(function(o){ + return o && value.test(o[property]); + }, null, start); + }, + + /** + * Find the index of the first matching object in this collection by a function. + * If the function returns true it is considered a match. + * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key). + * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to this MixedCollection. + * @param {Number} start (optional) The index to start searching at (defaults to 0). + * @return {Number} The matched index or -1 + */ + findIndexBy : function(fn, scope, start){ + var k = this.keys, it = this.items; + for(var i = (start||0), len = it.length; i < len; i++){ + if(fn.call(scope||this, it[i], k[i])){ + return i; + } + } + return -1; + }, + + // private + createValueMatcher : function(value, anyMatch, caseSensitive, exactMatch) { + if (!value.exec) { // not a regex + var er = Ext.escapeRe; + value = String(value); + if (anyMatch === true) { + value = er(value); + } else { + value = '^' + er(value); + if (exactMatch === true) { + value += '$'; + } + } + value = new RegExp(value, caseSensitive ? '' : 'i'); + } + return value; + }, + + /** + * Creates a shallow copy of this collection + * @return {MixedCollection} + */ + clone : function(){ + var r = new Ext.util.MixedCollection(); + var k = this.keys, it = this.items; + for(var i = 0, len = it.length; i < len; i++){ + r.add(k[i], it[i]); + } + r.getKey = this.getKey; + return r; + } +}); +/** + * This method calls {@link #item item()}. + * Returns the item associated with the passed key OR index. Key has priority + * over index. This is the equivalent of calling {@link #key} first, then if + * nothing matched calling {@link #itemAt}. + * @param {String/Number} key The key or index of the item. + * @return {Object} If the item is found, returns the item. If the item was + * not found, returns undefined. If an item was found, but is a Class, + * returns null. + */ +Ext.util.MixedCollection.prototype.get = Ext.util.MixedCollection.prototype.item;/** + * @class Ext.util.JSON + * Modified version of Douglas Crockford"s json.js that doesn"t + * mess with the Object prototype + * http://www.json.org/js.html + * @singleton + */ +Ext.util.JSON = new (function(){ + var useHasOwn = !!{}.hasOwnProperty, + isNative = function() { + var useNative = null; + + return function() { + if (useNative === null) { + useNative = Ext.USE_NATIVE_JSON && window.JSON && JSON.toString() == '[object JSON]'; + } + + return useNative; + }; + }(), + pad = function(n) { + return n < 10 ? "0" + n : n; + }, + doDecode = function(json){ + return eval("(" + json + ')'); + }, + doEncode = function(o){ + if(!Ext.isDefined(o) || o === null){ + return "null"; + }else if(Ext.isArray(o)){ + return encodeArray(o); + }else if(Ext.isDate(o)){ + return Ext.util.JSON.encodeDate(o); + }else if(Ext.isString(o)){ + return encodeString(o); + }else if(typeof o == "number"){ + //don't use isNumber here, since finite checks happen inside isNumber + return isFinite(o) ? String(o) : "null"; + }else if(Ext.isBoolean(o)){ + return String(o); + }else { + var a = ["{"], b, i, v; + for (i in o) { + // don't encode DOM objects + if(!o.getElementsByTagName){ + if(!useHasOwn || o.hasOwnProperty(i)) { + v = o[i]; + switch (typeof v) { + case "undefined": + case "function": + case "unknown": + break; + default: + if(b){ + a.push(','); + } + a.push(doEncode(i), ":", + v === null ? "null" : doEncode(v)); + b = true; + } + } + } + } + a.push("}"); + return a.join(""); + } + }, + m = { + "\b": '\\b', + "\t": '\\t', + "\n": '\\n', + "\f": '\\f', + "\r": '\\r', + '"' : '\\"', + "\\": '\\\\' + }, + encodeString = function(s){ + if (/["\\\x00-\x1f]/.test(s)) { + return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) { + var c = m[b]; + if(c){ + return c; + } + c = b.charCodeAt(); + return "\\u00" + + Math.floor(c / 16).toString(16) + + (c % 16).toString(16); + }) + '"'; + } + return '"' + s + '"'; + }, + encodeArray = function(o){ var a = ["["], b, i, l = o.length, v; for (i = 0; i < l; i += 1) { v = o[i]; @@ -11859,6 +12327,18 @@ Ext.util.JSON = new (function(){ return a.join(""); }; + /** + *
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.util.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) + "-" + @@ -11925,7 +12405,11 @@ Ext.decode = Ext.util.JSON.decode; * @singleton */ Ext.util.Format = function(){ - var trimRe = /^\s+|\s+$/g; + var trimRe = /^\s+|\s+$/g, + stripTagsRE = /<\/?[^>]+>/gi, + stripScriptsRe = /(?:)((\n|\r|.)*?)(?:<\/script>)/ig, + nl2brRe = /\r?\n/g; + return { /** * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length @@ -11937,8 +12421,8 @@ Ext.util.Format = function(){ ellipsis : function(value, len, word){ if(value && value.length > len){ if(word){ - var vs = value.substr(0, len - 2); - var index = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?')); + var vs = value.substr(0, len - 2), + index = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?')); if(index == -1 || index < (len - 15)){ return value.substr(0, len - 3) + "..."; }else{ @@ -12055,10 +12539,10 @@ Ext.util.Format = function(){ v = (Math.round((v-0)*100))/100; v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v); v = String(v); - var ps = v.split('.'); - var whole = ps[0]; - var sub = ps[1] ? '.'+ ps[1] : '.00'; - var r = /(\d+)(\d{3})/; + var ps = v.split('.'), + whole = ps[0], + sub = ps[1] ? '.'+ ps[1] : '.00', + r = /(\d+)(\d{3})/; while (r.test(whole)) { whole = whole.replace(r, '$1' + ',' + '$2'); } @@ -12095,9 +12579,6 @@ Ext.util.Format = function(){ return Ext.util.Format.date(v, format); }; }, - - // private - stripTagsRE : /<\/?[^>]+>/gi, /** * Strips all HTML tags @@ -12105,18 +12586,16 @@ Ext.util.Format = function(){ * @return {String} The stripped text */ stripTags : function(v){ - return !v ? v : String(v).replace(this.stripTagsRE, ""); + return !v ? v : String(v).replace(stripTagsRE, ""); }, - stripScriptsRe : /(?:)((\n|\r|.)*?)(?:<\/script>)/ig, - /** * Strips all script tags * @param {Mixed} value The text from which to strip script tags * @return {String} The stripped text */ stripScripts : function(v){ - return !v ? v : String(v).replace(this.stripScriptsRe, ""); + return !v ? v : String(v).replace(stripScriptsRe, ""); }, /** @@ -12265,10 +12744,11 @@ Ext.util.Format = function(){ * @return {String} The string with embedded <br/> tags in place of newlines. */ nl2br : function(v){ - return v === undefined || v === null ? '' : v.replace(/\n/g, '
'); + return Ext.isEmpty(v) ? '' : v.replace(nl2brRe, '
'); } } -}();/** +}(); +/** * @class Ext.XTemplate * @extends Ext.Template *
A template class that supports advanced functionality like:
@@ -13196,6 +13676,13 @@ Ext.KeyNav.prototype = { e.stopEvent(); } }, + + /** + * Destroy this KeyNav (this is the same as calling disable). + */ + destroy: function(){ + this.disable(); + }, /** * Enable this KeyNav @@ -13408,7 +13895,7 @@ map.addBinding({ * following options: * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)} * @param {Function} fn The function to call - * @param {Object} scope (optional) The scope of the function + * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the browser window. */ on : function(key, fn, scope){ var keyCode, shift, ctrl, alt; @@ -13530,6 +14017,7 @@ Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){ var instance = { /** + *
Only available on the instance returned from {@link #createInstance}, not on the singleton.
* Returns the size of the specified text based on the internal element's style and width properties * @param {String} text The text to measure * @return {Object} An object containing the text's size {width: (width), height: (height)} @@ -13542,6 +14030,7 @@ Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){ }, /** + *
Only available on the instance returned from {@link #createInstance}, not on the singleton.
* Binds this TextMetrics instance to an element from which to copy existing CSS styles * that can affect the size of the rendered text * @param {String/HTMLElement} el The element, dom node or id @@ -13553,6 +14042,7 @@ Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){ }, /** + *
Only available on the instance returned from {@link #createInstance}, not on the singleton.
* Sets a fixed width on the internal measurement element. If the text will be multiline, you have * to set a fixed width in order to accurately measure the text height. * @param {Number} width The width to set on the element @@ -13562,6 +14052,7 @@ Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){ }, /** + *
Only available on the instance returned from {@link #createInstance}, not on the singleton.
* Returns the measured width of the specified text * @param {String} text The text to measure * @return {Number} width The width in pixels @@ -13572,6 +14063,7 @@ Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){ }, /** + *
Only available on the instance returned from {@link #createInstance}, not on the singleton.
* Returns the measured height of the specified text. For multiline text, be sure to call * {@link #setFixedWidth} if necessary. * @param {String} text The text to measure @@ -13813,10 +14305,10 @@ Ext.ComponentMgr = function(){ }, /** - * Registers a function that will be called when a specified component is added to ComponentMgr + * Registers a function that will be called when a Component with the specified id is added to ComponentMgr. This will happen on instantiation. * @param {String} id The component {@link Ext.Component#id id} * @param {Function} fn The callback function - * @param {Object} scope The scope of the callback + * @param {Object} scope The scope (this reference) in which the callback is executed. Defaults to the Component. */ onAvailable : function(id, fn, scope){ all.on("add", function(index, o){ @@ -13834,6 +14326,18 @@ Ext.ComponentMgr = function(){ */ all : all, + /** + * The xtypes that have been registered with the component manager. + * @type {Object} + */ + types : types, + + /** + * The ptypes that have been registered with the component manager. + * @type {Object} + */ + ptypes: ptypes, + /** * Checks if a Component type is registered. * @param {Ext.Component} xtype The mnemonic string by which the Component class may be looked up @@ -13842,6 +14346,15 @@ Ext.ComponentMgr = function(){ isRegistered : function(xtype){ return types[xtype] !== undefined; }, + + /** + * Checks if a Plugin type is registered. + * @param {Ext.Component} ptype The mnemonic string by which the Plugin class may be looked up + * @return {Boolean} Whether the type is registered. + */ + isPluginRegistered : function(ptype){ + return ptypes[ptype] !== undefined; + }, /** *
Registers a new Component constructor, keyed by a new @@ -13893,7 +14406,12 @@ Ext.ComponentMgr = function(){ * @return {Ext.Component} The newly instantiated Plugin. */ createPlugin : function(config, defaultType){ - return new ptypes[config.ptype || defaultType](config); + var PluginCls = ptypes[config.ptype || defaultType]; + if (PluginCls.init) { + return PluginCls; + } else { + return new PluginCls(config); + } } }; }(); @@ -13996,7 +14514,7 @@ menutextitem {@link Ext.menu.TextItem} Form components --------------------------------------- -form {@link Ext.FormPanel} +form {@link Ext.form.FormPanel} checkbox {@link Ext.form.Checkbox} checkboxgroup {@link Ext.form.CheckboxGroup} combo {@link Ext.form.ComboBox} @@ -14065,6 +14583,14 @@ Ext.Component = function(config){ Ext.apply(this, config); this.addEvents( + /** + * @event added + * Fires when a component is added to an Ext.Container + * @param {Ext.Component} this + * @param {Ext.Container} ownerCt Container which holds the component + * @param {number} index Position at which the component was added + */ + 'added', /** * @event disable * Fires after the component is disabled. @@ -14104,6 +14630,13 @@ Ext.Component = function(config){ * @param {Ext.Component} this */ 'hide', + /** + * @event removed + * Fires when a component is removed from an Ext.Container + * @param {Ext.Component} this + * @param {Ext.Container} ownerCt Container which holds the component + */ + 'removed', /** * @event beforerender * Fires before the component is {@link #rendered}. Return false from an @@ -14199,7 +14732,7 @@ Ext.Component = function(config){ } if(this.stateful !== false){ - this.initState(config); + this.initState(); } if(this.applyTo){ @@ -14348,17 +14881,6 @@ new Ext.FormPanel({ */ - // Configs below are used for all Components when rendered by AnchorLayout. - /** - * @cfg {String} anchor
Note: this config is only used when this Component is rendered - * by a Container which has been configured to use an {@link Ext.layout.AnchorLayout AnchorLayout} - * based layout manager, for example:
- *
{@link Ext.form.FormPanel}
- *
specifying layout: 'anchor' // or 'form', or 'absolute'
- *
- *
See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.
- */ - /** * @cfg {String} id *
The unique id of this component (defaults to an {@link #getId auto-assigned id}). @@ -14710,6 +15232,53 @@ new Ext.Panel({ */ rendered : false, + /** + * @cfg {String} contentEl + *
Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content + * for this component.
+ *
+ *
Description : + *
This config option is used to take an existing HTML element and place it in the layout element + * of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
+ *
Notes : + *
The specified HTML element is appended to the layout element of the component after any configured + * {@link #html HTML} has been inserted, and so the document will not contain this element at the time the {@link #render} event is fired.
+ *
The specified HTML element used will not participate in any {@link Ext.Container#layout layout} + * scheme that the Component may use. It is just HTML. Layouts operate on child {@link Ext.Container#items items}.
+ *
Add either the x-hidden or the x-hide-display CSS class to + * prevent a brief flicker of the content before it is rendered to the panel.
+ *
+ */ + /** + * @cfg {String/Object} html + * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element + * content (defaults to ''). The HTML content is added after the component is rendered, + * so the document will not contain this HTML at the time the {@link #render} event is fired. + * This content is inserted into the body before any configured {@link #contentEl} is appended. + */ + + /** + * @cfg {Mixed} tpl + * An {@link Ext.Template}, {@link Ext.XTemplate} + * or an array of strings to form an Ext.XTemplate. + * Used in conjunction with the {@link #data} and + * {@link #tplWriteMode} configurations. + */ + + /** + * @cfg {String} tplWriteMode The Ext.(X)Template method to use when + * updating the content area of the Component. Defaults to 'overwrite' + * (see {@link Ext.XTemplate#overwrite}). + */ + tplWriteMode : 'overwrite', + + /** + * @cfg {Mixed} data + * The initial set of data to apply to the {@link #tpl} to + * update the content area of the Component. + */ + + // private ctype : 'Ext.Component', @@ -14825,7 +15394,32 @@ Ext.Foo = Ext.extend(Ext.Bar, { this.el.addClassOnOver(this.overCls); } this.fireEvent('render', this); + + + // Populate content of the component with html, contentEl or + // a tpl. + var contentTarget = this.getContentTarget(); + if (this.html){ + contentTarget.update(Ext.DomHelper.markup(this.html)); + delete this.html; + } + if (this.contentEl){ + var ce = Ext.getDom(this.contentEl); + Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); + contentTarget.appendChild(ce); + } + if (this.tpl) { + if (!this.tpl.compile) { + this.tpl = new Ext.XTemplate(this.tpl); + } + if (this.data) { + this.tpl[this.tplWriteMode](contentTarget, this.data); + delete this.data; + } + } this.afterRender(this.container); + + if(this.hidden){ // call this so we don't fire initial hide events. this.doHide(); @@ -14838,17 +15432,70 @@ Ext.Foo = Ext.extend(Ext.Bar, { if(this.stateful !== false){ this.initStateEvents(); } - this.initRef(); this.fireEvent('afterrender', this); } return this; }, - initRef : function(){ + + /** + * Update the content area of a component. + * @param {Mixed} htmlOrData + * If this component has been configured with a template via the tpl config + * then it will use this argument as data to populate the template. + * If this component was not configured with a template, the components + * content area will be updated via Ext.Element update + * @param {Boolean} loadScripts + * (optional) Only legitimate when using the html configuration. Defaults to false + * @param {Function} callback + * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading + */ + update: function(htmlOrData, loadScripts, cb) { + var contentTarget = this.getContentTarget(); + if (this.tpl && typeof htmlOrData !== "string") { + this.tpl[this.tplWriteMode](contentTarget, htmlOrData || {}); + } else { + var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData; + contentTarget.update(html, loadScripts, cb); + } + }, + + + /** + * @private + * Method to manage awareness of when components are added to their + * respective Container, firing an added event. + * References are established at add time rather than at render time. + * @param {Ext.Container} container Container which holds the component + * @param {number} pos Position at which the component was added + */ + onAdded : function(container, pos) { + this.ownerCt = container; + this.initRef(); + this.fireEvent('added', this, container, pos); + }, + + /** + * @private + * Method to manage awareness of when components are removed from their + * respective Container, firing an removed event. References are properly + * cleaned up after removing a component from its owning container. + */ + onRemoved : function() { + this.removeRef(); + this.fireEvent('removed', this, this.ownerCt); + delete this.ownerCt; + }, + + /** + * @private + * Method to establish a reference to a component. + */ + initRef : function() { /** * @cfg {String} ref - *
A path specification, relative to the Component's {@link #ownerCt} specifying into which - * ancestor Container to place a named reference to this Component.
+ *
A path specification, relative to the Component's {@link #ownerCt} + * specifying into which ancestor Container to place a named reference to this Component.
*
The ancestor axis can be traversed by using '/' characters in the path. * For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:
var myGrid = new Ext.grid.EditorGridPanel({ @@ -14869,33 +15516,50 @@ var myGrid = new Ext.grid.EditorGridPanel({ } });
- *
In the code above, if the ref had been 'saveButton' the reference would - * have been placed into the Toolbar. Each '/' in the ref moves up one level from the - * Component's {@link #ownerCt}.
+ *
In the code above, if the ref had been 'saveButton' + * the reference would have been placed into the Toolbar. Each '/' in the ref + * moves up one level from the Component's {@link #ownerCt}.
+ *
Also see the {@link #added} and {@link #removed} events.
*/ - if(this.ref){ - var levels = this.ref.split('/'); - var last = levels.length, i = 0; - var t = this; - while(i < last){ - if(t.ownerCt){ - t = t.ownerCt; - } - i++; + if(this.ref && !this.refOwner){ + var levels = this.ref.split('/'), + last = levels.length, + i = 0, + t = this; + + while(t && i < last){ + t = t.ownerCt; + ++i; + } + if(t){ + t[this.refName = levels[--i]] = this; + /** + * @type Ext.Container + * @property refOwner + * The ancestor Container into which the {@link #ref} reference was inserted if this Component + * is a child of a Container, and has been configured with a ref. + */ + this.refOwner = t; } - t[levels[--i]] = this; + } + }, + + removeRef : function() { + if (this.refOwner && this.refName) { + delete this.refOwner[this.refName]; + delete this.refOwner; } }, // private - initState : function(config){ + initState : function(){ if(Ext.state.Manager){ var id = this.getStateId(); if(id){ var state = Ext.state.Manager.get(id); if(state){ if(this.fireEvent('beforestaterestore', this, state) !== false){ - this.applyState(state); + this.applyState(Ext.apply({}, state)); this.fireEvent('staterestore', this, state); } } @@ -14905,7 +15569,7 @@ var myGrid = new Ext.grid.EditorGridPanel({ // private getStateId : function(){ - return this.stateId || ((this.id.indexOf('ext-comp-') == 0 || this.id.indexOf('ext-gen') == 0) ? null : this.id); + return this.stateId || ((/^(ext-comp-|ext-gen)/).test(String(this.id)) ? null : this.id); }, // private @@ -15000,6 +15664,10 @@ var myGrid = new Ext.grid.EditorGridPanel({ this.el = Ext.get(this.el); if(this.allowDomMove !== false){ ct.dom.insertBefore(this.el.dom, position); + if (div) { + Ext.removeNode(div); + div = null; + } } } }, @@ -15027,9 +15695,12 @@ var myGrid = new Ext.grid.EditorGridPanel({ destroy : function(){ if(!this.isDestroyed){ if(this.fireEvent('beforedestroy', this) !== false){ + this.destroying = true; this.beforeDestroy(); + if(this.ownerCt && this.ownerCt.remove){ + this.ownerCt.remove(this, false); + } if(this.rendered){ - this.el.removeAllListeners(); this.el.remove(); if(this.actionMode == 'container' || this.removeMode == 'container'){ this.container.remove(); @@ -15039,11 +15710,19 @@ var myGrid = new Ext.grid.EditorGridPanel({ Ext.ComponentMgr.unregister(this); this.fireEvent('destroy', this); this.purgeListeners(); + this.destroying = false; this.isDestroyed = true; } } }, + deleteMembers : function(){ + var args = arguments; + for(var i = 0, len = args.length; i < len; ++i){ + delete this[args[i]]; + } + }, + // private beforeDestroy : Ext.emptyFn, @@ -15075,6 +15754,11 @@ new Ext.Panel({ return this.el; }, + // private + getContentTarget : function(){ + return this.el; + }, + /** * Returns the id of this component or automatically generates and * returns an id if an id is not defined yet:
@@ -15356,8 +16040,9 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield' }); }, - getDomPositionEl : function(){ - return this.getPositionEl ? this.getPositionEl() : this.getEl(); + // protected + getPositionEl : function(){ + return this.positionEl || this.el; }, // private @@ -15375,7 +16060,7 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield' }, this); this.mons = []; }, - + // private createMons: function(){ if(!this.mons){ @@ -15384,7 +16069,26 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield' } }, - // internal function for auto removal of assigned event handlers on destruction + /** + * Adds listeners to any Observable object (or Elements) which are automatically removed when this Component + * is destroyed. Usage: +myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50}); + + * or: +myGridPanel.mon(myGridPanel.getSelectionModel(), { + selectionchange: handleSelectionChange, + buffer: 50 +}); + + * @param {Observable|Element} item The item to which to add a listener/listeners. + * @param {Object|String} ename The event name, or an object containing event name properties. + * @param {Function} fn Optional. If the ename parameter was an event name, this + * is the handler function. + * @param {Object} scope Optional. If the ename parameter was an event name, this + * is the scope (this reference) in which the handler function is executed. + * @param {Object} opt Optional. If the ename parameter was an event name, this + * is the {@link Ext.util.Observable#addListener addListener} options. + */ mon : function(item, ename, fn, scope, opt){ this.createMons(); if(Ext.isObject(ename)){ @@ -15418,7 +16122,15 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield' item.on(ename, fn, scope, opt); }, - // protected, opposite of mon + /** + * Removes listeners that were added by the {@link #mon} method. + * @param {Observable|Element} item The item from which to remove a listener/listeners. + * @param {Object|String} ename The event name, or an object containing event name properties. + * @param {Function} fn Optional. If the ename parameter was an event name, this + * is the handler function. + * @param {Object} scope Optional. If the ename parameter was an event name, this + * is the scope (this reference) in which the handler function is executed. + */ mun : function(item, ename, fn, scope){ var found, mon; this.createMons(); @@ -15471,8 +16183,7 @@ alert(t.getXTypes()); // alerts 'component/box/field/textfield' } }); -Ext.reg('component', Ext.Component); -/** +Ext.reg('component', Ext.Component);/** * @class Ext.Action * An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it * can be usefully shared among multiple components. Actions let you share handlers, configuration options and UI @@ -15525,13 +16236,7 @@ aRef.setText('New text'); * @constructor * @param {Object} config The configuration options */ -Ext.Action = function(config){ - this.initialConfig = config; - this.itemId = config.itemId = (config.itemId || config.id || Ext.id()); - this.items = []; -} - -Ext.Action.prototype = { +Ext.Action = Ext.extend(Object, { /** * @cfg {String} text The text to set for all components using this action (defaults to ''). */ @@ -15564,9 +16269,16 @@ Ext.Action.prototype = { * See {@link Ext.Component}.{@link Ext.Component#itemId itemId}. */ /** - * @cfg {Object} scope The scope in which the {@link #handler} function will execute. + * @cfg {Object} scope The scope (this reference) in which the + * {@link #handler} is executed. Defaults to this Button. */ + constructor : function(config){ + this.initialConfig = config; + this.itemId = config.itemId = (config.itemId || config.id || Ext.id()); + this.items = []; + }, + // private isAction : true, @@ -15666,10 +16378,10 @@ Ext.Action.prototype = { }, /** - * Sets the function that will be called by each component using this action when its primary event is triggered. + * Sets the function that will be called by each Component using this action when its primary event is triggered. * @param {Function} fn The function that will be invoked by the action's components. The function * will be called with no arguments. - * @param {Object} scope The scope in which the function will execute + * @param {Object} scope The scope (this reference) in which the function is executed. Defaults to the Component firing the event. */ setHandler : function(fn, scope){ this.initialConfig.handler = fn; @@ -15678,10 +16390,10 @@ Ext.Action.prototype = { }, /** - * Executes the specified function once for each component currently tied to this action. The function passed + * Executes the specified function once for each Component currently tied to this action. The function passed * in should accept a single argument that will be an object that supports the basic Action config/method interface. * @param {Function} fn The function to execute for each component - * @param {Object} scope The scope in which the function will execute + * @param {Object} scope The scope (this reference) in which the function is executed. Defaults to the Component. */ each : function(fn, scope){ Ext.each(this.items, fn, scope); @@ -15717,7 +16429,7 @@ Ext.Action.prototype = { execute : function(){ this.initialConfig.handler.apply(this.initialConfig.scope || window, arguments); } -}; +}); /** * @class Ext.Layer * @extends Ext.Element @@ -15888,7 +16600,7 @@ Ext.extend(Ext.Layer, Ext.Element, { } this.removeAllListeners(); Ext.removeNode(this.dom); - Ext.Element.uncache(this.id); + delete this.dom; }, remove : function(){ @@ -16177,7 +16889,8 @@ Ext.extend(Ext.Layer, Ext.Element, { return this; } }); -})();/** +})(); +/** * @class Ext.Shadow * Simple class that can provide a shadow effect for any element. Note that the element MUST be absolutely positioned, * and the shadow does not provide any shimming. This should be used only in simple cases -- for more advanced @@ -16392,6 +17105,26 @@ var myImage = new Ext.BoxComponent({ */ Ext.BoxComponent = Ext.extend(Ext.Component, { + // Configs below are used for all Components when rendered by BoxLayout. + /** + * @cfg {Number} flex + * Note: this config is only used when this Component is rendered + * by a Container which has been configured to use a {@link Ext.layout.BoxLayout BoxLayout}. + * Each child Component with a flex property will be flexed either vertically (by a VBoxLayout) + * or horizontally (by an HBoxLayout) according to the item's relative flex value + * compared to the sum of all Components with flex value specified. Any child items that have + * either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed). + */ + // Configs below are used for all Components when rendered by AnchorLayout. + /** + * @cfg {String} anchor Note: this config is only used when this Component is rendered + * by a Container which has been configured to use an {@link Ext.layout.AnchorLayout AnchorLayout} (or subclass thereof). + * based layout manager, for example: + * {@link Ext.form.FormPanel} + * specifying layout: 'anchor' // or 'form', or 'absolute' + * + * See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also. + */ // tabTip config is used when a BoxComponent is a child of a TabPanel /** * @cfg {String} tabTip @@ -16460,6 +17193,26 @@ Ext.BoxComponent = Ext.extend(Ext.Component, { * The width of this component in pixels (defaults to auto). * Note to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. */ + /** + * @cfg {Number} boxMinHeight + * The minimum value in pixels which this BoxComponent will set its height to. + * Warning: This will override any size management applied by layout managers. + */ + /** + * @cfg {Number} boxMinWidth + * The minimum value in pixels which this BoxComponent will set its width to. + * Warning: This will override any size management applied by layout managers. + */ + /** + * @cfg {Number} boxMaxHeight + * The maximum value in pixels which this BoxComponent will set its height to. + * Warning: This will override any size management applied by layout managers. + */ + /** + * @cfg {Number} boxMaxWidth + * The maximum value in pixels which this BoxComponent will set its width to. + * Warning: This will override any size management applied by layout managers. + */ /** * @cfg {Boolean} autoHeight * True to use height:'auto', false to use fixed height (or allow it to be managed by its parent @@ -16534,6 +17287,11 @@ var myPanel = new Ext.Panel({ });
*/ + /** + * @cfg {Boolean} autoScroll + * true to use overflow:'auto' on the components layout element and show scroll bars automatically when + * necessary, false to clip any overflowing content (defaults to false). + */ /* // private internal config * {Boolean} deferHeight @@ -16589,15 +17347,26 @@ var myPanel = new Ext.Panel({ * @return {Ext.BoxComponent} this */ setSize : function(w, h){ + // support for standard size objects if(typeof w == 'object'){ - h = w.height; - w = w.width; + h = w.height, w = w.width; + } + if (Ext.isDefined(w) && Ext.isDefined(this.boxMinWidth) && (w < this.boxMinWidth)) { + w = this.boxMinWidth; + } + if (Ext.isDefined(h) && Ext.isDefined(this.boxMinHeight) && (h < this.boxMinHeight)) { + h = this.boxMinHeight; + } + if (Ext.isDefined(w) && Ext.isDefined(this.boxMaxWidth) && (w > this.boxMaxWidth)) { + w = this.boxMaxWidth; + } + if (Ext.isDefined(h) && Ext.isDefined(this.boxMaxHeight) && (h > this.boxMaxHeight)) { + h = this.boxMaxHeight; } // not rendered if(!this.boxReady){ - this.width = w; - this.height = h; + this.width = w, this.height = h; return this; } @@ -16606,10 +17375,12 @@ var myPanel = new Ext.Panel({ return this; } this.lastSize = {width: w, height: h}; - var adj = this.adjustSize(w, h); - var aw = adj.width, ah = adj.height; + var adj = this.adjustSize(w, h), + aw = adj.width, + ah = adj.height, + rz; if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters - var rz = this.getResizeEl(); + rz = this.getResizeEl(); if(!this.deferHeight && aw !== undefined && ah !== undefined){ rz.setSize(aw, ah); }else if(!this.deferHeight && ah !== undefined){ @@ -16728,14 +17499,23 @@ var myPanel = new Ext.Panel({ * contains both the <input> Element (which is what would be returned * by its {@link #getEl} method, and the trigger button Element. * This Element is returned as the resizeEl. + * @return {Ext.Element} The Element which is to be resized by size managing layouts. */ getResizeEl : function(){ return this.resizeEl || this.el; }, - // protected - getPositionEl : function(){ - return this.positionEl || this.el; + /** + * Sets the overflow on the content element of the component. + * @param {Boolean} scroll True to allow the Component to auto scroll. + * @return {Ext.BoxComponent} this + */ + setAutoScroll : function(scroll){ + if(this.rendered){ + this.getContentTarget().setOverflow(scroll ? 'auto' : ''); + } + this.autoScroll = scroll; + return this; }, /** @@ -16808,6 +17588,7 @@ var myPanel = new Ext.Panel({ this.positionEl = Ext.get(this.positionEl); } this.boxReady = true; + Ext.isDefined(this.autoScroll) && this.setAutoScroll(this.autoScroll); this.setSize(this.width, this.height); if(this.x || this.y){ this.setPosition(this.x, this.y); @@ -16835,7 +17616,6 @@ var myPanel = new Ext.Panel({ * @param {Number} rawHeight The height that was originally specified */ onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){ - }, /* // protected @@ -16897,12 +17677,12 @@ split.on('moved', splitterMoved); * @param {Mixed} dragElement The element to be dragged and act as the SplitBar. * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL) - * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or + * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial position of the SplitBar). */ Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){ - + /** @private */ this.el = Ext.get(dragElement, true); this.el.dom.unselectable = "on"; @@ -16916,7 +17696,7 @@ Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, ex * @type Number */ this.orientation = orientation || Ext.SplitBar.HORIZONTAL; - + /** * The increment, in pixels by which to move this SplitBar. When undefined, the SplitBar moves smoothly. * @type Number @@ -16927,28 +17707,28 @@ Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, ex * @type Number */ this.minSize = 0; - + /** * The maximum size of the resizing element. (Defaults to 2000) * @type Number */ this.maxSize = 2000; - + /** * Whether to animate the transition to the new size * @type Boolean */ this.animate = false; - + /** * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes. * @type Boolean */ this.useShim = false; - + /** @private */ this.shim = null; - + if(!existingProxy){ /** @private */ this.proxy = Ext.SplitBar.createProxy(this.orientation); @@ -16957,22 +17737,22 @@ Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, ex } /** @private */ this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id}); - + /** @private */ this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this); - + /** @private */ this.dd.endDrag = this.onEndProxyDrag.createDelegate(this); - + /** @private */ this.dragSpecs = {}; - + /** * @private The adapter to use to positon and resize elements */ this.adapter = new Ext.SplitBar.BasicLayoutAdapter(); this.adapter.init(this); - + if(this.orientation == Ext.SplitBar.HORIZONTAL){ /** @private */ this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT); @@ -16982,7 +17762,7 @@ Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, ex this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM); this.el.addClass("x-splitbar-v"); } - + this.addEvents( /** * @event resize @@ -17027,7 +17807,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { if(this.orientation == Ext.SplitBar.HORIZONTAL){ this.dd.resetConstraints(); this.dd.setXConstraint( - this.placement == Ext.SplitBar.LEFT ? c1 : c2, + this.placement == Ext.SplitBar.LEFT ? c1 : c2, this.placement == Ext.SplitBar.LEFT ? c2 : c1, this.tickSize ); @@ -17036,7 +17816,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { this.dd.resetConstraints(); this.dd.setXConstraint(0, 0); this.dd.setYConstraint( - this.placement == Ext.SplitBar.TOP ? c1 : c2, + this.placement == Ext.SplitBar.TOP ? c1 : c2, this.placement == Ext.SplitBar.TOP ? c2 : c1, this.tickSize ); @@ -17045,8 +17825,8 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { this.dragSpecs.startPoint = [x, y]; Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y); }, - - /** + + /** * @private Called after the drag operation by the DDProxy */ onEndProxyDrag : function(e){ @@ -17058,13 +17838,13 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { } var newSize; if(this.orientation == Ext.SplitBar.HORIZONTAL){ - newSize = this.dragSpecs.startSize + + newSize = this.dragSpecs.startSize + (this.placement == Ext.SplitBar.LEFT ? endPoint[0] - this.dragSpecs.startPoint[0] : this.dragSpecs.startPoint[0] - endPoint[0] ); }else{ - newSize = this.dragSpecs.startSize + + newSize = this.dragSpecs.startSize + (this.placement == Ext.SplitBar.TOP ? endPoint[1] - this.dragSpecs.startPoint[1] : this.dragSpecs.startPoint[1] - endPoint[1] @@ -17079,7 +17859,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { } } }, - + /** * Get the adapter this SplitBar uses * @return The adapter object @@ -17087,7 +17867,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { getAdapter : function(){ return this.adapter; }, - + /** * Set the adapter this SplitBar uses * @param {Object} adapter A SplitBar adapter object @@ -17096,7 +17876,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { this.adapter = adapter; this.adapter.init(this); }, - + /** * Gets the minimum size for the resizing element * @return {Number} The minimum size @@ -17104,7 +17884,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { getMinimumSize : function(){ return this.minSize; }, - + /** * Sets the minimum size for the resizing element * @param {Number} minSize The minimum size @@ -17112,7 +17892,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { setMinimumSize : function(minSize){ this.minSize = minSize; }, - + /** * Gets the maximum size for the resizing element * @return {Number} The maximum size @@ -17120,7 +17900,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { getMaximumSize : function(){ return this.maxSize; }, - + /** * Sets the maximum size for the resizing element * @param {Number} maxSize The maximum size @@ -17128,7 +17908,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { setMaximumSize : function(maxSize){ this.maxSize = maxSize; }, - + /** * Sets the initialize size for the resizing element * @param {Number} size The initial size @@ -17139,18 +17919,18 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { this.adapter.setElementSize(this, size); this.animate = oldAnimate; }, - + /** - * Destroy this splitbar. + * Destroy this splitbar. * @param {Boolean} removeEl True to remove the element */ destroy : function(removeEl){ - Ext.destroy(this.shim, Ext.get(this.proxy)); + Ext.destroy(this.shim, Ext.get(this.proxy)); this.dd.unreg(); if(removeEl){ this.el.remove(); } - this.purgeListeners(); + this.purgeListeners(); } }); @@ -17159,14 +17939,14 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, { */ Ext.SplitBar.createProxy = function(dir){ var proxy = new Ext.Element(document.createElement("div")); + document.body.appendChild(proxy.dom); proxy.unselectable(); var cls = 'x-splitbar-proxy'; proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v')); - document.body.appendChild(proxy.dom); return proxy.dom; }; -/** +/** * @class Ext.SplitBar.BasicLayoutAdapter * Default Adapter. It assumes the splitter and resizing element are not positioned * elements and only gets/sets the width of the element. Generally used for table based layouts. @@ -17177,10 +17957,10 @@ Ext.SplitBar.BasicLayoutAdapter = function(){ Ext.SplitBar.BasicLayoutAdapter.prototype = { // do nothing for now init : function(s){ - + }, /** - * Called before drag operations to get the current size of the resizing element. + * Called before drag operations to get the current size of the resizing element. * @param {Ext.SplitBar} s The SplitBar using this adapter */ getElementSize : function(s){ @@ -17190,7 +17970,7 @@ Ext.SplitBar.BasicLayoutAdapter.prototype = { return s.resizingEl.getHeight(); } }, - + /** * Called after drag operations to set the size of the resizing element. * @param {Ext.SplitBar} s The SplitBar using this adapter @@ -17208,7 +17988,7 @@ Ext.SplitBar.BasicLayoutAdapter.prototype = { s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut'); } }else{ - + if(!s.animate){ s.resizingEl.setHeight(newSize); if(onComplete){ @@ -17221,10 +18001,10 @@ Ext.SplitBar.BasicLayoutAdapter.prototype = { } }; -/** +/** *@class Ext.SplitBar.AbsoluteLayoutAdapter * @extends Ext.SplitBar.BasicLayoutAdapter - * Adapter that moves the splitter element to align with the resized sizing element. + * Adapter that moves the splitter element to align with the resized sizing element. * Used with an absolute positioned SplitBar. * @param {Mixed} container The container that wraps around the absolute positioned content. If it's * document.body, make sure you assign an id to the body element. @@ -17238,15 +18018,15 @@ Ext.SplitBar.AbsoluteLayoutAdapter.prototype = { init : function(s){ this.basic.init(s); }, - + getElementSize : function(s){ return this.basic.getElementSize(s); }, - + setElementSize : function(s, newSize, onComplete){ this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s])); }, - + moveSplitter : function(s){ var yes = Ext.SplitBar; switch(s.placement){ @@ -17307,969 +18087,1018 @@ Ext.SplitBar.TOP = 3; * @type Number */ Ext.SplitBar.BOTTOM = 4; -/** - * @class Ext.Container - * @extends Ext.BoxComponent - * Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the - * basic behavior of containing items, namely adding, inserting and removing items. - * - * The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}. - * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight - * Container to be encapsulated by an HTML element to your specifications by using the - * {@link Ext.Component#autoEl autoEl} config option. This is a useful technique when creating - * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels} - * for example. - * - * The code below illustrates both how to explicitly create a Container, and how to implicitly - * create one using the 'container' xtype: -// explicitly create a Container -var embeddedColumns = new Ext.Container({ - autoEl: 'div', // This is the default - layout: 'column', - defaults: { - // implicitly create Container by specifying xtype - xtype: 'container', - autoEl: 'div', // This is the default. - layout: 'form', - columnWidth: 0.5, - style: { - padding: '10px' - } - }, -// The two items below will be Ext.Containers, each encapsulated by a <DIV> element. - items: [{ - items: { - xtype: 'datefield', - name: 'startDate', - fieldLabel: 'Start date' - } - }, { - items: { - xtype: 'datefield', - name: 'endDate', - fieldLabel: 'End date' - } - }] -}); - * - * Layout - * Container classes delegate the rendering of child Components to a layout - * manager class which must be configured into the Container using the - * {@link #layout} configuration property. - * When either specifying child {@link #items} of a Container, - * or dynamically {@link #add adding} Components to a Container, remember to - * consider how you wish the Container to arrange those child elements, and - * whether those child elements need to be sized using one of Ext's built-in - * {@link #layout} schemes. By default, Containers use the - * {@link Ext.layout.ContainerLayout ContainerLayout} scheme which only - * renders child components, appending them one after the other inside the - * Container, and does not apply any sizing at all. - * A common mistake is when a developer neglects to specify a - * {@link #layout} (e.g. widgets like GridPanels or - * TreePanels are added to Containers for which no {@link #layout} - * has been specified). If a Container is left to use the default - * {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its - * child components will be resized, or changed in any way when the Container - * is resized. - * Certain layout managers allow dynamic addition of child components. - * Those that do include {@link Ext.layout.CardLayout}, - * {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and - * {@link Ext.layout.TableLayout}. For example: -// Create the GridPanel. -var myNewGrid = new Ext.grid.GridPanel({ - store: myStore, - columns: myColumnModel, - title: 'Results', // the title becomes the title of the tab -}); - -myTabPanel.add(myNewGrid); // {@link Ext.TabPanel} implicitly uses {@link Ext.layout.CardLayout CardLayout} -myTabPanel.{@link Ext.TabPanel#setActiveTab setActiveTab}(myNewGrid); - * - * The example above adds a newly created GridPanel to a TabPanel. Note that - * a TabPanel uses {@link Ext.layout.CardLayout} as its layout manager which - * means all its child items are sized to {@link Ext.layout.FitLayout fit} - * exactly into its client area. - * Overnesting is a common problem. - * An example of overnesting occurs when a GridPanel is added to a TabPanel - * by wrapping the GridPanel inside a wrapping Panel (that has no - * {@link #layout} specified) and then add that wrapping Panel - * to the TabPanel. The point to realize is that a GridPanel is a - * Component which can be added directly to a Container. If the wrapping Panel - * has no {@link #layout} configuration, then the overnested - * GridPanel will not be sized as expected. - * - * Adding via remote configuration - * - * A server side script can be used to add Components which are generated dynamically on the server. - * An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server - * based on certain parameters: - * -// execute an Ajax request to invoke server side script: -Ext.Ajax.request({ - url: 'gen-invoice-grid.php', - // send additional parameters to instruct server script - params: { - startDate: Ext.getCmp('start-date').getValue(), - endDate: Ext.getCmp('end-date').getValue() - }, - // process the response object to add it to the TabPanel: - success: function(xhr) { - var newComponent = eval(xhr.responseText); // see discussion below - myTabPanel.add(newComponent); // add the component to the TabPanel - myTabPanel.setActiveTab(newComponent); - }, - failure: function() { - Ext.Msg.alert("Grid create failed", "Server communication failure"); - } -}); - - * The server script needs to return an executable Javascript statement which, when processed - * using eval(), will return either a config object with an {@link Ext.Component#xtype xtype}, - * or an instantiated Component. The server might return this for example: -(function() { - function formatDate(value){ - return value ? value.dateFormat('M d, Y') : ''; - }; - - var store = new Ext.data.Store({ - url: 'get-invoice-data.php', - baseParams: { - startDate: '01/01/2008', - endDate: '01/31/2008' - }, - reader: new Ext.data.JsonReader({ - record: 'transaction', - idProperty: 'id', - totalRecords: 'total' - }, [ - 'customer', - 'invNo', - {name: 'date', type: 'date', dateFormat: 'm/d/Y'}, - {name: 'value', type: 'float'} - ]) - }); - - var grid = new Ext.grid.GridPanel({ - title: 'Invoice Report', - bbar: new Ext.PagingToolbar(store), - store: store, - columns: [ - {header: "Customer", width: 250, dataIndex: 'customer', sortable: true}, - {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true}, - {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true}, - {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true} - ], - }); - store.load(); - return grid; // return instantiated component -})(); - - * When the above code fragment is passed through the eval function in the success handler - * of the Ajax request, the code is executed by the Javascript processor, and the anonymous function - * runs, and returns the instantiated grid component. - * Note: since the code above is generated by a server script, the baseParams for - * the Store, the metadata to allow generation of the Record layout, and the ColumnModel - * can all be generated into the code since these are all known on the server. - * - * @xtype container - */ -Ext.Container = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {Boolean} monitorResize - * True to automatically monitor window resize events to handle anything that is sensitive to the current size - * of the viewport. This value is typically managed by the chosen {@link #layout} and should not need - * to be set manually. - */ - /** - * @cfg {String/Object} layout - * *Important: In order for child items to be correctly sized and - * positioned, typically a layout manager must be specified through - * the layout configuration option. - * The sizing and positioning of child {@link items} is the responsibility of - * the Container's layout manager which creates and manages the type of layout - * you have in mind. For example: -new Ext.Window({ - width:300, height: 300, - layout: 'fit', // explicitly set layout manager: override the default (layout:'auto') - items: [{ - title: 'Panel inside a Window' - }] -}).show(); - * - * If the {@link #layout} configuration is not explicitly specified for - * a general purpose container (e.g. Container or Panel) the - * {@link Ext.layout.ContainerLayout default layout manager} will be used - * which does nothing but render child components sequentially into the - * Container (no sizing or positioning will be performed in this situation). - * Some container classes implicitly specify a default layout - * (e.g. FormPanel specifies layout:'form'). Other specific - * purpose classes internally specify/manage their internal layout (e.g. - * GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.). - * layout may be specified as either as an Object or - * as a String: - * - * Specify as an Object - * - * Example usage: - -layout: { - type: 'vbox', - padding: '5', - align: 'left' -} - - * - * type - * The layout type to be used for this container. If not specified, - * a default {@link Ext.layout.ContainerLayout} will be created and used. - * Valid layout type values are: - * - * {@link Ext.layout.AbsoluteLayout absolute} - * {@link Ext.layout.AccordionLayout accordion} - * {@link Ext.layout.AnchorLayout anchor} - * {@link Ext.layout.ContainerLayout auto} Default - * {@link Ext.layout.BorderLayout border} - * {@link Ext.layout.CardLayout card} - * {@link Ext.layout.ColumnLayout column} - * {@link Ext.layout.FitLayout fit} - * {@link Ext.layout.FormLayout form} - * {@link Ext.layout.HBoxLayout hbox} - * {@link Ext.layout.MenuLayout menu} - * {@link Ext.layout.TableLayout table} - * {@link Ext.layout.ToolbarLayout toolbar} - * {@link Ext.layout.VBoxLayout vbox} - * - * - * Layout specific configuration properties - * Additional layout specific configuration properties may also be - * specified. For complete details regarding the valid config options for - * each layout type, see the layout class corresponding to the type - * specified. - * - * - * - * Specify as a String - * - * Example usage: - -layout: 'vbox', -layoutConfig: { - padding: '5', - align: 'left' -} - - * layout - * The layout type to be used for this container (see list - * of valid layout type values above). - * {@link #layoutConfig} - * Additional layout specific configuration properties. For complete - * details regarding the valid config options for each layout type, see the - * layout class corresponding to the layout specified. - * - */ - /** - * @cfg {Object} layoutConfig - * This is a config object containing properties specific to the chosen - * {@link #layout} if {@link #layout} - * has been specified as a string. - */ - /** - * @cfg {Boolean/Number} bufferResize - * When set to true (50 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer - * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers - * with a large quantity of sub-components for which frequent layout calls would be expensive. Defaults to 50. - */ - bufferResize: 50, - - /** - * @cfg {String/Number} activeItem - * A string component id or the numeric index of the component that should be initially activated within the - * container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first - * item in the container's collection). activeItem only applies to layout styles that can display - * items one at a time (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} and - * {@link Ext.layout.FitLayout}). Related to {@link Ext.layout.ContainerLayout#activeItem}. - */ - /** - * @cfg {Object/Array} items - * ** IMPORTANT: be sure to {@link #layout specify a layout} if needed ! ** - * A single item, or an array of child Components to be added to this container, - * for example: - * -// specifying a single item -items: {...}, -layout: 'fit', // specify a layout! - -// specifying multiple items -items: [{...}, {...}], -layout: 'anchor', // specify a layout! - * - * Each item may be: - * - * any type of object based on {@link Ext.Component} - * a fully instanciated object or - * an object literal that: - * - * has a specified {@link Ext.Component#xtype xtype} - * the {@link Ext.Component#xtype} specified is associated with the Component - * desired and should be chosen from one of the available xtypes as listed - * in {@link Ext.Component}. - * If an {@link Ext.Component#xtype xtype} is not explicitly - * specified, the {@link #defaultType} for that Container is used. - * will be "lazily instanciated", avoiding the overhead of constructing a fully - * instanciated Component object - * - * Notes: - * - * Ext uses lazy rendering. Child Components will only be rendered - * should it become necessary. Items are automatically laid out when they are first - * shown (no sizing is done while hidden), or in response to a {@link #doLayout} call. - * Do not specify {@link Ext.Panel#contentEl contentEl}/ - * {@link Ext.Panel#html html} with items. - * - */ - /** - * @cfg {Object} defaults - * A config object that will be applied to all components added to this container either via the {@link #items} - * config or via the {@link #add} or {@link #insert} methods. The defaults config can contain any - * number of name/value property pairs to be added to each item, and should be valid for the types of items - * being added to the container. For example, to automatically apply padding to the body of each of a set of - * contained {@link Ext.Panel} items, you could pass: defaults: {bodyStyle:'padding:15px'}. - * Note: defaults will not be applied to config objects if the option is already specified. - * For example: -defaults: { // defaults are applied to items, not the container - autoScroll:true -}, -items: [ - { - xtype: 'panel', // defaults do not have precedence over - id: 'panel1', // options in config objects, so the defaults - autoScroll: false // will not be applied here, panel1 will be autoScroll:false - }, - new Ext.Panel({ // defaults do have precedence over options - id: 'panel2', // options in components, so the defaults - autoScroll: false // will be applied here, panel2 will be autoScroll:true. - }) -] - * - */ - - - /** @cfg {Boolean} autoDestroy - * If true the container will automatically destroy any contained component that is removed from it, else - * destruction must be handled manually (defaults to true). - */ - autoDestroy : true, - - /** @cfg {Boolean} forceLayout - * If true the container will force a layout initially even if hidden or collapsed. This option - * is useful for forcing forms to render in collapsed or hidden containers. (defaults to false). - */ - forceLayout: false, - - /** @cfg {Boolean} hideBorders - * True to hide the borders of each contained component, false to defer to the component's existing - * border settings (defaults to false). - */ - /** @cfg {String} defaultType - * The default {@link Ext.Component xtype} of child Components to create in this Container when - * a child item is specified as a raw configuration object, rather than as an instantiated Component. - * Defaults to 'panel', except {@link Ext.menu.Menu} which defaults to 'menuitem', - * and {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which default to 'button'. - */ - defaultType : 'panel', - - /** @cfg {String} resizeEvent - * The event to listen to for resizing in layouts. Defaults to 'resize'. - */ - resizeEvent: 'resize', - - /** - * @cfg {Array} bubbleEvents - * An array of events that, when fired, should be bubbled to any parent container. - * Defaults to ['add', 'remove']. - */ - bubbleEvents: ['add', 'remove'], - - // private - initComponent : function(){ - Ext.Container.superclass.initComponent.call(this); - - this.addEvents( - /** - * @event afterlayout - * Fires when the components in this container are arranged by the associated layout manager. - * @param {Ext.Container} this - * @param {ContainerLayout} layout The ContainerLayout implementation for this container - */ - 'afterlayout', - /** - * @event beforeadd - * Fires before any {@link Ext.Component} is added or inserted into the container. - * A handler can return false to cancel the add. - * @param {Ext.Container} this - * @param {Ext.Component} component The component being added - * @param {Number} index The index at which the component will be added to the container's items collection - */ - 'beforeadd', - /** - * @event beforeremove - * Fires before any {@link Ext.Component} is removed from the container. A handler can return - * false to cancel the remove. - * @param {Ext.Container} this - * @param {Ext.Component} component The component being removed - */ - 'beforeremove', - /** - * @event add - * @bubbles - * Fires after any {@link Ext.Component} is added or inserted into the container. - * @param {Ext.Container} this - * @param {Ext.Component} component The component that was added - * @param {Number} index The index at which the component was added to the container's items collection - */ - 'add', - /** - * @event remove - * @bubbles - * Fires after any {@link Ext.Component} is removed from the container. - * @param {Ext.Container} this - * @param {Ext.Component} component The component that was removed - */ - 'remove' - ); - - this.enableBubble(this.bubbleEvents); - - /** - * The collection of components in this container as a {@link Ext.util.MixedCollection} - * @type MixedCollection - * @property items - */ - var items = this.items; - if(items){ - delete this.items; - this.add(items); - } - }, - - // private - initItems : function(){ - if(!this.items){ - this.items = new Ext.util.MixedCollection(false, this.getComponentId); - this.getLayout(); // initialize the layout - } - }, - - // private - setLayout : function(layout){ - if(this.layout && this.layout != layout){ - this.layout.setContainer(null); - } - this.initItems(); - this.layout = layout; - layout.setContainer(this); - }, - - afterRender: function(){ - Ext.Container.superclass.afterRender.call(this); - if(!this.layout){ - this.layout = 'auto'; - } - if(Ext.isObject(this.layout) && !this.layout.layout){ - this.layoutConfig = this.layout; - this.layout = this.layoutConfig.type; - } - if(Ext.isString(this.layout)){ - this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig); - } - this.setLayout(this.layout); - - if(this.activeItem !== undefined){ - var item = this.activeItem; - delete this.activeItem; - this.layout.setActiveItem(item); - } - if(!this.ownerCt){ - // force a layout if no ownerCt is set - this.doLayout(false, true); - } - if(this.monitorResize === true){ - Ext.EventManager.onWindowResize(this.doLayout, this, [false]); - } - }, - - /** - * Returns the Element to be used to contain the child Components of this Container. - * An implementation is provided which returns the Container's {@link #getEl Element}, but - * if there is a more complex structure to a Container, this may be overridden to return - * the element into which the {@link #layout layout} renders child Components. - * @return {Ext.Element} The Element to render child Components into. - */ - getLayoutTarget : function(){ - return this.el; - }, - - // private - used as the key lookup function for the items collection - getComponentId : function(comp){ - return comp.getItemId(); - }, - - /** - * Adds {@link Ext.Component Component}(s) to this Container. - * Description : - * - * Fires the {@link #beforeadd} event before adding - * The Container's {@link #defaults default config values} will be applied - * accordingly (see {@link #defaults} for details). - * Fires the {@link #add} event after the component has been added. - * - * Notes : - * - * If the Container is already rendered when add - * is called, you may need to call {@link #doLayout} to refresh the view which causes - * any unrendered child Components to be rendered. This is required so that you can - * add multiple child components if needed while only refreshing the layout - * once. For example: -var tb = new {@link Ext.Toolbar}(); -tb.render(document.body); // toolbar is rendered -tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button') -tb.add({text:'Button 2'}); -tb.{@link #doLayout}(); // refresh the layout - * - * Warning: Containers directly managed by the BorderLayout layout manager - * may not be removed or added. See the Notes for {@link Ext.layout.BorderLayout BorderLayout} - * for more details. - * - * @param {Object/Array} component - * Either a single component or an Array of components to add. See - * {@link #items} for additional information. - * @param {Object} (Optional) component_2 - * @param {Object} (Optional) component_n - * @return {Ext.Component} component The Component (or config object) that was added. - */ - add : function(comp){ - this.initItems(); - var args = arguments.length > 1; - if(args || Ext.isArray(comp)){ - Ext.each(args ? arguments : comp, function(c){ - this.add(c); - }, this); - return; - } - var c = this.lookupComponent(this.applyDefaults(comp)); - var pos = this.items.length; - if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){ - this.items.add(c); - c.ownerCt = this; - this.onAdd(c); - this.fireEvent('add', this, c, pos); - } - return c; - }, - - onAdd : function(c){ - // Empty template method - }, - - /** - * Inserts a Component into this Container at a specified index. Fires the - * {@link #beforeadd} event before inserting, then fires the {@link #add} event after the - * Component has been inserted. - * @param {Number} index The index at which the Component will be inserted - * into the Container's items collection - * @param {Ext.Component} component The child Component to insert. - * Ext uses lazy rendering, and will only render the inserted Component should - * it become necessary. - * A Component config object may be passed in order to avoid the overhead of - * constructing a real Component object if lazy rendering might mean that the - * inserted Component will not be rendered immediately. To take advantage of - * this 'lazy instantiation', set the {@link Ext.Component#xtype} config - * property to the registered type of the Component wanted. - * For a list of all available xtypes, see {@link Ext.Component}. - * @return {Ext.Component} component The Component (or config object) that was - * inserted with the Container's default config values applied. - */ - insert : function(index, comp){ - this.initItems(); - var a = arguments, len = a.length; - if(len > 2){ - for(var i = len-1; i >= 1; --i) { - this.insert(index, a[i]); - } - return; - } - var c = this.lookupComponent(this.applyDefaults(comp)); - index = Math.min(index, this.items.length); - if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){ - if(c.ownerCt == this){ - this.items.remove(c); - } - this.items.insert(index, c); - c.ownerCt = this; - this.onAdd(c); - this.fireEvent('add', this, c, index); - } - return c; - }, - - // private - applyDefaults : function(c){ - if(this.defaults){ - if(Ext.isString(c)){ - c = Ext.ComponentMgr.get(c); - Ext.apply(c, this.defaults); - }else if(!c.events){ - Ext.applyIf(c, this.defaults); - }else{ - Ext.apply(c, this.defaults); - } - } - return c; - }, - - // private - onBeforeAdd : function(item){ - if(item.ownerCt){ - item.ownerCt.remove(item, false); - } - if(this.hideBorders === true){ - item.border = (item.border === true); - } - }, - - /** - * Removes a component from this container. Fires the {@link #beforeremove} event before removing, then fires - * the {@link #remove} event after the component has been removed. - * @param {Component/String} component The component reference or id to remove. - * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function. - * Defaults to the value of this Container's {@link #autoDestroy} config. - * @return {Ext.Component} component The Component that was removed. - */ - remove : function(comp, autoDestroy){ - this.initItems(); - var c = this.getComponent(comp); - if(c && this.fireEvent('beforeremove', this, c) !== false){ - delete c.ownerCt; - if(this.layout && this.rendered){ - this.layout.onRemove(c); - } - this.onRemove(c); - this.items.remove(c); - if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){ - c.destroy(); - } - this.fireEvent('remove', this, c); - } - return c; - }, - - onRemove: function(c){ - // Empty template method - }, - - /** - * Removes all components from this container. - * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function. - * Defaults to the value of this Container's {@link #autoDestroy} config. - * @return {Array} Array of the destroyed components - */ - removeAll: function(autoDestroy){ - this.initItems(); - var item, rem = [], items = []; - this.items.each(function(i){ - rem.push(i); - }); - for (var i = 0, len = rem.length; i < len; ++i){ - item = rem[i]; - this.remove(item, autoDestroy); - if(item.ownerCt !== this){ - items.push(item); - } - } - return items; - }, - - /** - * Examines this container's {@link #items} property - * and gets a direct child component of this container. - * @param {String/Number} comp This parameter may be any of the following: - * - * a String : representing the {@link Ext.Component#itemId itemId} - * or {@link Ext.Component#id id} of the child component - * a Number : representing the position of the child component - * within the {@link #items} property - * - * For additional information see {@link Ext.util.MixedCollection#get}. - * @return Ext.Component The component (if found). - */ - getComponent : function(comp){ - if(Ext.isObject(comp)){ - comp = comp.getItemId(); - } - return this.items.get(comp); - }, - - // private - lookupComponent : function(comp){ - if(Ext.isString(comp)){ - return Ext.ComponentMgr.get(comp); - }else if(!comp.events){ - return this.createComponent(comp); - } - return comp; - }, - - // private - createComponent : function(config){ - return Ext.create(config, this.defaultType); - }, - - // private - canLayout: function() { - var el = this.getVisibilityEl(); - return el && !el.isStyle("display", "none"); - }, - - - /** - * Force this container's layout to be recalculated. A call to this function is required after adding a new component - * to an already rendered container, or possibly after changing sizing/position properties of child components. - * @param {Boolean} shallow (optional) True to only calc the layout of this component, and let child components auto - * calc layouts as required (defaults to false, which calls doLayout recursively for each subcontainer) - * @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden. - * @return {Ext.Container} this - */ - doLayout: function(shallow, force){ - var rendered = this.rendered; - forceLayout = force || this.forceLayout; - - if(!this.canLayout() || this.collapsed){ - this.deferLayout = this.deferLayout || !shallow; - if(!forceLayout){ - return; - } - shallow = shallow && !this.deferLayout; - } else { - delete this.deferLayout; - } - if(rendered && this.layout){ - this.layout.layout(); - } - if(shallow !== true && this.items){ - var cs = this.items.items; - for(var i = 0, len = cs.length; i < len; i++){ - var c = cs[i]; - if(c.doLayout){ - c.doLayout(false, forceLayout); - } - } - } - if(rendered){ - this.onLayout(shallow, forceLayout); - } - // Initial layout completed - this.hasLayout = true; - delete this.forceLayout; - }, - - //private - onLayout : Ext.emptyFn, - - // private - shouldBufferLayout: function(){ - /* - * Returns true if the container should buffer a layout. - * This is true only if the container has previously been laid out - * and has a parent container that is pending a layout. - */ - var hl = this.hasLayout; - if(this.ownerCt){ - // Only ever buffer if we've laid out the first time and we have one pending. - return hl ? !this.hasLayoutPending() : false; - } - // Never buffer initial layout - return hl; - }, - - // private - hasLayoutPending: function(){ - // Traverse hierarchy to see if any parent container has a pending layout. - var pending = false; - this.ownerCt.bubble(function(c){ - if(c.layoutPending){ - pending = true; - return false; - } - }); - return pending; - }, - - onShow : function(){ - Ext.Container.superclass.onShow.call(this); - if(this.deferLayout !== undefined){ - this.doLayout(true); - } - }, - - /** - * Returns the layout currently in use by the container. If the container does not currently have a layout - * set, a default {@link Ext.layout.ContainerLayout} will be created and set as the container's layout. - * @return {ContainerLayout} layout The container's layout - */ - getLayout : function(){ - if(!this.layout){ - var layout = new Ext.layout.ContainerLayout(this.layoutConfig); - this.setLayout(layout); - } - return this.layout; - }, - - // private - beforeDestroy : function(){ - if(this.items){ - Ext.destroy.apply(Ext, this.items.items); - } - if(this.monitorResize){ - Ext.EventManager.removeResizeListener(this.doLayout, this); - } - Ext.destroy(this.layout); - Ext.Container.superclass.beforeDestroy.call(this); - }, - - /** - * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of - * function call will be the scope provided or the current component. The arguments to the function - * will be the args provided or the current component. If the function returns false at any point, - * the bubble is stopped. - * @param {Function} fn The function to call - * @param {Object} scope (optional) The scope of the function (defaults to current node) - * @param {Array} args (optional) The args to call the function with (default to passing the current component) - * @return {Ext.Container} this - */ - bubble : function(fn, scope, args){ - var p = this; - while(p){ - if(fn.apply(scope || p, args || [p]) === false){ - break; - } - p = p.ownerCt; - } - return this; - }, - - /** - * Cascades down the component/container heirarchy from this component (called first), calling the specified function with - * each component. The scope (this) of - * function call will be the scope provided or the current component. The arguments to the function - * will be the args provided or the current component. If the function returns false at any point, - * the cascade is stopped on that branch. - * @param {Function} fn The function to call - * @param {Object} scope (optional) The scope of the function (defaults to current component) - * @param {Array} args (optional) The args to call the function with (defaults to passing the current component) - * @return {Ext.Container} this - */ - cascade : function(fn, scope, args){ - if(fn.apply(scope || this, args || [this]) !== false){ - if(this.items){ - var cs = this.items.items; - for(var i = 0, len = cs.length; i < len; i++){ - if(cs[i].cascade){ - cs[i].cascade(fn, scope, args); - }else{ - fn.apply(scope || cs[i], args || [cs[i]]); - } - } - } - } - return this; - }, - - /** - * Find a component under this container at any level by id - * @param {String} id - * @return Ext.Component - */ - findById : function(id){ - var m, ct = this; - this.cascade(function(c){ - if(ct != c && c.id === id){ - m = c; - return false; - } - }); - return m || null; - }, - - /** - * Find a component under this container at any level by xtype or class - * @param {String/Class} xtype The xtype string for a component, or the class of the component directly - * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is - * the default), or true to check whether this Component is directly of the specified xtype. - * @return {Array} Array of Ext.Components - */ - findByType : function(xtype, shallow){ - return this.findBy(function(c){ - return c.isXType(xtype, shallow); - }); - }, - - /** - * Find a component under this container at any level by property - * @param {String} prop - * @param {String} value - * @return {Array} Array of Ext.Components - */ - find : function(prop, value){ - return this.findBy(function(c){ - return c[prop] === value; - }); - }, - - /** - * Find a component under this container at any level by a custom function. If the passed function returns - * true, the component will be included in the results. The passed function is called with the arguments (component, this container). - * @param {Function} fn The function to call - * @param {Object} scope (optional) - * @return {Array} Array of Ext.Components - */ - findBy : function(fn, scope){ - var m = [], ct = this; - this.cascade(function(c){ - if(ct != c && fn.call(scope || c, c, ct) === true){ - m.push(c); - } - }); - return m; - }, - - /** - * Get a component contained by this container (alias for items.get(key)) - * @param {String/Number} key The index or id of the component - * @return {Ext.Component} Ext.Component - */ - get : function(key){ - return this.items.get(key); - } -}); - -Ext.Container.LAYOUTS = {}; -Ext.reg('container', Ext.Container); +/** + * @class Ext.Container + * @extends Ext.BoxComponent + * Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the + * basic behavior of containing items, namely adding, inserting and removing items. + * + * The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}. + * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight + * Container to be encapsulated by an HTML element to your specifications by using the + * {@link Ext.Component#autoEl autoEl} config option. This is a useful technique when creating + * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels} + * for example. + * + * The code below illustrates both how to explicitly create a Container, and how to implicitly + * create one using the 'container' xtype: +// explicitly create a Container +var embeddedColumns = new Ext.Container({ + autoEl: 'div', // This is the default + layout: 'column', + defaults: { + // implicitly create Container by specifying xtype + xtype: 'container', + autoEl: 'div', // This is the default. + layout: 'form', + columnWidth: 0.5, + style: { + padding: '10px' + } + }, +// The two items below will be Ext.Containers, each encapsulated by a <DIV> element. + items: [{ + items: { + xtype: 'datefield', + name: 'startDate', + fieldLabel: 'Start date' + } + }, { + items: { + xtype: 'datefield', + name: 'endDate', + fieldLabel: 'End date' + } + }] +}); + * + * Layout + * Container classes delegate the rendering of child Components to a layout + * manager class which must be configured into the Container using the + * {@link #layout} configuration property. + * When either specifying child {@link #items} of a Container, + * or dynamically {@link #add adding} Components to a Container, remember to + * consider how you wish the Container to arrange those child elements, and + * whether those child elements need to be sized using one of Ext's built-in + * {@link #layout} schemes. By default, Containers use the + * {@link Ext.layout.ContainerLayout ContainerLayout} scheme which only + * renders child components, appending them one after the other inside the + * Container, and does not apply any sizing at all. + * A common mistake is when a developer neglects to specify a + * {@link #layout} (e.g. widgets like GridPanels or + * TreePanels are added to Containers for which no {@link #layout} + * has been specified). If a Container is left to use the default + * {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its + * child components will be resized, or changed in any way when the Container + * is resized. + * Certain layout managers allow dynamic addition of child components. + * Those that do include {@link Ext.layout.CardLayout}, + * {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and + * {@link Ext.layout.TableLayout}. For example: +// Create the GridPanel. +var myNewGrid = new Ext.grid.GridPanel({ + store: myStore, + columns: myColumnModel, + title: 'Results', // the title becomes the title of the tab +}); + +myTabPanel.add(myNewGrid); // {@link Ext.TabPanel} implicitly uses {@link Ext.layout.CardLayout CardLayout} +myTabPanel.{@link Ext.TabPanel#setActiveTab setActiveTab}(myNewGrid); + * + * The example above adds a newly created GridPanel to a TabPanel. Note that + * a TabPanel uses {@link Ext.layout.CardLayout} as its layout manager which + * means all its child items are sized to {@link Ext.layout.FitLayout fit} + * exactly into its client area. + * Overnesting is a common problem. + * An example of overnesting occurs when a GridPanel is added to a TabPanel + * by wrapping the GridPanel inside a wrapping Panel (that has no + * {@link #layout} specified) and then add that wrapping Panel + * to the TabPanel. The point to realize is that a GridPanel is a + * Component which can be added directly to a Container. If the wrapping Panel + * has no {@link #layout} configuration, then the overnested + * GridPanel will not be sized as expected. + * + * Adding via remote configuration + * + * A server side script can be used to add Components which are generated dynamically on the server. + * An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server + * based on certain parameters: + * +// execute an Ajax request to invoke server side script: +Ext.Ajax.request({ + url: 'gen-invoice-grid.php', + // send additional parameters to instruct server script + params: { + startDate: Ext.getCmp('start-date').getValue(), + endDate: Ext.getCmp('end-date').getValue() + }, + // process the response object to add it to the TabPanel: + success: function(xhr) { + var newComponent = eval(xhr.responseText); // see discussion below + myTabPanel.add(newComponent); // add the component to the TabPanel + myTabPanel.setActiveTab(newComponent); + }, + failure: function() { + Ext.Msg.alert("Grid create failed", "Server communication failure"); + } +}); + + * The server script needs to return an executable Javascript statement which, when processed + * using eval(), will return either a config object with an {@link Ext.Component#xtype xtype}, + * or an instantiated Component. The server might return this for example: +(function() { + function formatDate(value){ + return value ? value.dateFormat('M d, Y') : ''; + }; + + var store = new Ext.data.Store({ + url: 'get-invoice-data.php', + baseParams: { + startDate: '01/01/2008', + endDate: '01/31/2008' + }, + reader: new Ext.data.JsonReader({ + record: 'transaction', + idProperty: 'id', + totalRecords: 'total' + }, [ + 'customer', + 'invNo', + {name: 'date', type: 'date', dateFormat: 'm/d/Y'}, + {name: 'value', type: 'float'} + ]) + }); + + var grid = new Ext.grid.GridPanel({ + title: 'Invoice Report', + bbar: new Ext.PagingToolbar(store), + store: store, + columns: [ + {header: "Customer", width: 250, dataIndex: 'customer', sortable: true}, + {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true}, + {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true}, + {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true} + ], + }); + store.load(); + return grid; // return instantiated component +})(); + + * When the above code fragment is passed through the eval function in the success handler + * of the Ajax request, the code is executed by the Javascript processor, and the anonymous function + * runs, and returns the instantiated grid component. + * Note: since the code above is generated by a server script, the baseParams for + * the Store, the metadata to allow generation of the Record layout, and the ColumnModel + * can all be generated into the code since these are all known on the server. + * + * @xtype container + */ +Ext.Container = Ext.extend(Ext.BoxComponent, { + /** + * @cfg {Boolean} monitorResize + * True to automatically monitor window resize events to handle anything that is sensitive to the current size + * of the viewport. This value is typically managed by the chosen {@link #layout} and should not need + * to be set manually. + */ + /** + * @cfg {String/Object} layout + * *Important: In order for child items to be correctly sized and + * positioned, typically a layout manager must be specified through + * the layout configuration option. + * The sizing and positioning of child {@link items} is the responsibility of + * the Container's layout manager which creates and manages the type of layout + * you have in mind. For example: +new Ext.Window({ + width:300, height: 300, + layout: 'fit', // explicitly set layout manager: override the default (layout:'auto') + items: [{ + title: 'Panel inside a Window' + }] +}).show(); + * + * If the {@link #layout} configuration is not explicitly specified for + * a general purpose container (e.g. Container or Panel) the + * {@link Ext.layout.ContainerLayout default layout manager} will be used + * which does nothing but render child components sequentially into the + * Container (no sizing or positioning will be performed in this situation). + * Some container classes implicitly specify a default layout + * (e.g. FormPanel specifies layout:'form'). Other specific + * purpose classes internally specify/manage their internal layout (e.g. + * GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.). + * layout may be specified as either as an Object or + * as a String: + * + * Specify as an Object + * + * Example usage: + +layout: { + type: 'vbox', + padding: '5', + align: 'left' +} + + * + * type + * The layout type to be used for this container. If not specified, + * a default {@link Ext.layout.ContainerLayout} will be created and used. + * Valid layout type values are: + * + * {@link Ext.layout.AbsoluteLayout absolute} + * {@link Ext.layout.AccordionLayout accordion} + * {@link Ext.layout.AnchorLayout anchor} + * {@link Ext.layout.ContainerLayout auto} Default + * {@link Ext.layout.BorderLayout border} + * {@link Ext.layout.CardLayout card} + * {@link Ext.layout.ColumnLayout column} + * {@link Ext.layout.FitLayout fit} + * {@link Ext.layout.FormLayout form} + * {@link Ext.layout.HBoxLayout hbox} + * {@link Ext.layout.MenuLayout menu} + * {@link Ext.layout.TableLayout table} + * {@link Ext.layout.ToolbarLayout toolbar} + * {@link Ext.layout.VBoxLayout vbox} + * + * + * Layout specific configuration properties + * Additional layout specific configuration properties may also be + * specified. For complete details regarding the valid config options for + * each layout type, see the layout class corresponding to the type + * specified. + * + * + * + * Specify as a String + * + * Example usage: + +layout: 'vbox', +layoutConfig: { + padding: '5', + align: 'left' +} + + * layout + * The layout type to be used for this container (see list + * of valid layout type values above). + * {@link #layoutConfig} + * Additional layout specific configuration properties. For complete + * details regarding the valid config options for each layout type, see the + * layout class corresponding to the layout specified. + * + */ + /** + * @cfg {Object} layoutConfig + * This is a config object containing properties specific to the chosen + * {@link #layout} if {@link #layout} + * has been specified as a string. + */ + /** + * @cfg {Boolean/Number} bufferResize + * When set to true (50 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer + * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers + * with a large quantity of sub-components for which frequent layout calls would be expensive. Defaults to 50. + */ + // Deprecated - will be removed in 3.2.x + bufferResize: 50, + + /** + * @cfg {String/Number} activeItem + * A string component id or the numeric index of the component that should be initially activated within the + * container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first + * item in the container's collection). activeItem only applies to layout styles that can display + * items one at a time (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} and + * {@link Ext.layout.FitLayout}). Related to {@link Ext.layout.ContainerLayout#activeItem}. + */ + /** + * @cfg {Object/Array} items + * ** IMPORTANT: be sure to {@link #layout specify a layout} if needed ! ** + * A single item, or an array of child Components to be added to this container, + * for example: + * +// specifying a single item +items: {...}, +layout: 'fit', // specify a layout! + +// specifying multiple items +items: [{...}, {...}], +layout: 'anchor', // specify a layout! + * + * Each item may be: + * + * any type of object based on {@link Ext.Component} + * a fully instanciated object or + * an object literal that: + * + * has a specified {@link Ext.Component#xtype xtype} + * the {@link Ext.Component#xtype} specified is associated with the Component + * desired and should be chosen from one of the available xtypes as listed + * in {@link Ext.Component}. + * If an {@link Ext.Component#xtype xtype} is not explicitly + * specified, the {@link #defaultType} for that Container is used. + * will be "lazily instanciated", avoiding the overhead of constructing a fully + * instanciated Component object + * + * Notes: + * + * Ext uses lazy rendering. Child Components will only be rendered + * should it become necessary. Items are automatically laid out when they are first + * shown (no sizing is done while hidden), or in response to a {@link #doLayout} call. + * Do not specify {@link Ext.Panel#contentEl contentEl}/ + * {@link Ext.Panel#html html} with items. + * + */ + /** + * @cfg {Object|Function} defaults + * This option is a means of applying default settings to all added items whether added through the {@link #items} + * config or via the {@link #add} or {@link #insert} methods. + * If an added item is a config object, and not an instantiated Component, then the default properties are + * unconditionally applied. If the added item is an instantiated Component, then the default properties are + * applied conditionally so as not to override existing properties in the item. + * If the defaults option is specified as a function, then the function will be called using this Container as the + * scope (this reference) and passing the added item as the first parameter. Any resulting object + * from that call is then applied to the item as default properties. + * For example, to automatically apply padding to the body of each of a set of + * contained {@link Ext.Panel} items, you could pass: defaults: {bodyStyle:'padding:15px'}. + * Usage: +defaults: { // defaults are applied to items, not the container + autoScroll:true +}, +items: [ + { + xtype: 'panel', // defaults do not have precedence over + id: 'panel1', // options in config objects, so the defaults + autoScroll: false // will not be applied here, panel1 will be autoScroll:false + }, + new Ext.Panel({ // defaults do have precedence over options + id: 'panel2', // options in components, so the defaults + autoScroll: false // will be applied here, panel2 will be autoScroll:true. + }) +] + * + */ + + + /** @cfg {Boolean} autoDestroy + * If true the container will automatically destroy any contained component that is removed from it, else + * destruction must be handled manually (defaults to true). + */ + autoDestroy : true, + + /** @cfg {Boolean} forceLayout + * If true the container will force a layout initially even if hidden or collapsed. This option + * is useful for forcing forms to render in collapsed or hidden containers. (defaults to false). + */ + forceLayout: false, + + /** @cfg {Boolean} hideBorders + * True to hide the borders of each contained component, false to defer to the component's existing + * border settings (defaults to false). + */ + /** @cfg {String} defaultType + * The default {@link Ext.Component xtype} of child Components to create in this Container when + * a child item is specified as a raw configuration object, rather than as an instantiated Component. + * Defaults to 'panel', except {@link Ext.menu.Menu} which defaults to 'menuitem', + * and {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which default to 'button'. + */ + defaultType : 'panel', + + /** @cfg {String} resizeEvent + * The event to listen to for resizing in layouts. Defaults to 'resize'. + */ + resizeEvent: 'resize', + + /** + * @cfg {Array} bubbleEvents + * An array of events that, when fired, should be bubbled to any parent container. + * See {@link Ext.util.Observable#enableBubble}. + * Defaults to ['add', 'remove']. + */ + bubbleEvents: ['add', 'remove'], + + // private + initComponent : function(){ + Ext.Container.superclass.initComponent.call(this); + + this.addEvents( + /** + * @event afterlayout + * Fires when the components in this container are arranged by the associated layout manager. + * @param {Ext.Container} this + * @param {ContainerLayout} layout The ContainerLayout implementation for this container + */ + 'afterlayout', + /** + * @event beforeadd + * Fires before any {@link Ext.Component} is added or inserted into the container. + * A handler can return false to cancel the add. + * @param {Ext.Container} this + * @param {Ext.Component} component The component being added + * @param {Number} index The index at which the component will be added to the container's items collection + */ + 'beforeadd', + /** + * @event beforeremove + * Fires before any {@link Ext.Component} is removed from the container. A handler can return + * false to cancel the remove. + * @param {Ext.Container} this + * @param {Ext.Component} component The component being removed + */ + 'beforeremove', + /** + * @event add + * @bubbles + * Fires after any {@link Ext.Component} is added or inserted into the container. + * @param {Ext.Container} this + * @param {Ext.Component} component The component that was added + * @param {Number} index The index at which the component was added to the container's items collection + */ + 'add', + /** + * @event remove + * @bubbles + * Fires after any {@link Ext.Component} is removed from the container. + * @param {Ext.Container} this + * @param {Ext.Component} component The component that was removed + */ + 'remove' + ); + + this.enableBubble(this.bubbleEvents); + + /** + * The collection of components in this container as a {@link Ext.util.MixedCollection} + * @type MixedCollection + * @property items + */ + var items = this.items; + if(items){ + delete this.items; + this.add(items); + } + }, + + // private + initItems : function(){ + if(!this.items){ + this.items = new Ext.util.MixedCollection(false, this.getComponentId); + this.getLayout(); // initialize the layout + } + }, + + // private + setLayout : function(layout){ + if(this.layout && this.layout != layout){ + this.layout.setContainer(null); + } + this.initItems(); + this.layout = layout; + layout.setContainer(this); + }, + + afterRender: function(){ + // Render this Container, this should be done before setLayout is called which + // will hook onResize + Ext.Container.superclass.afterRender.call(this); + if(!this.layout){ + this.layout = 'auto'; + } + if(Ext.isObject(this.layout) && !this.layout.layout){ + this.layoutConfig = this.layout; + this.layout = this.layoutConfig.type; + } + if(Ext.isString(this.layout)){ + this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig); + } + this.setLayout(this.layout); + + // If a CardLayout, the active item set + if(this.activeItem !== undefined){ + var item = this.activeItem; + delete this.activeItem; + this.layout.setActiveItem(item); + } + + // If we have no ownerCt, render and size all children + if(!this.ownerCt){ + this.doLayout(false, true); + } + + // This is a manually configured flag set by users in conjunction with renderTo. + // Not to be confused with the flag by the same name used in Layouts. + if(this.monitorResize === true){ + Ext.EventManager.onWindowResize(this.doLayout, this, [false]); + } + }, + + /** + * Returns the Element to be used to contain the child Components of this Container. + * An implementation is provided which returns the Container's {@link #getEl Element}, but + * if there is a more complex structure to a Container, this may be overridden to return + * the element into which the {@link #layout layout} renders child Components. + * @return {Ext.Element} The Element to render child Components into. + */ + getLayoutTarget : function(){ + return this.el; + }, + + // private - used as the key lookup function for the items collection + getComponentId : function(comp){ + return comp.getItemId(); + }, + + /** + * Adds {@link Ext.Component Component}(s) to this Container. + * Description : + * + * Fires the {@link #beforeadd} event before adding + * The Container's {@link #defaults default config values} will be applied + * accordingly (see {@link #defaults} for details). + * Fires the {@link #add} event after the component has been added. + * + * Notes : + * + * If the Container is already rendered when add + * is called, you may need to call {@link #doLayout} to refresh the view which causes + * any unrendered child Components to be rendered. This is required so that you can + * add multiple child components if needed while only refreshing the layout + * once. For example: +var tb = new {@link Ext.Toolbar}(); +tb.render(document.body); // toolbar is rendered +tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button') +tb.add({text:'Button 2'}); +tb.{@link #doLayout}(); // refresh the layout + * + * Warning: Containers directly managed by the BorderLayout layout manager + * may not be removed or added. See the Notes for {@link Ext.layout.BorderLayout BorderLayout} + * for more details. + * + * @param {Object/Array} component + * Either a single component or an Array of components to add. See + * {@link #items} for additional information. + * @param {Object} (Optional) component_2 + * @param {Object} (Optional) component_n + * @return {Ext.Component} component The Component (or config object) that was added. + */ + add : function(comp){ + this.initItems(); + var args = arguments.length > 1; + if(args || Ext.isArray(comp)){ + var result = []; + Ext.each(args ? arguments : comp, function(c){ + result.push(this.add(c)); + }, this); + return result; + } + var c = this.lookupComponent(this.applyDefaults(comp)); + var index = this.items.length; + if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){ + this.items.add(c); + // *onAdded + c.onAdded(this, index); + this.onAdd(c); + this.fireEvent('add', this, c, index); + } + return c; + }, + + onAdd : function(c){ + // Empty template method + }, + + // private + onAdded : function(container, pos) { + //overridden here so we can cascade down, not worth creating a template method. + this.ownerCt = container; + this.initRef(); + //initialize references for child items + this.cascade(function(c){ + c.initRef(); + }); + this.fireEvent('added', this, container, pos); + }, + + /** + * Inserts a Component into this Container at a specified index. Fires the + * {@link #beforeadd} event before inserting, then fires the {@link #add} event after the + * Component has been inserted. + * @param {Number} index The index at which the Component will be inserted + * into the Container's items collection + * @param {Ext.Component} component The child Component to insert. + * Ext uses lazy rendering, and will only render the inserted Component should + * it become necessary. + * A Component config object may be passed in order to avoid the overhead of + * constructing a real Component object if lazy rendering might mean that the + * inserted Component will not be rendered immediately. To take advantage of + * this 'lazy instantiation', set the {@link Ext.Component#xtype} config + * property to the registered type of the Component wanted. + * For a list of all available xtypes, see {@link Ext.Component}. + * @return {Ext.Component} component The Component (or config object) that was + * inserted with the Container's default config values applied. + */ + insert : function(index, comp){ + this.initItems(); + var a = arguments, len = a.length; + if(len > 2){ + var result = []; + for(var i = len-1; i >= 1; --i) { + result.push(this.insert(index, a[i])); + } + return result; + } + var c = this.lookupComponent(this.applyDefaults(comp)); + index = Math.min(index, this.items.length); + if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){ + if(c.ownerCt == this){ + this.items.remove(c); + } + this.items.insert(index, c); + c.onAdded(this, index); + this.onAdd(c); + this.fireEvent('add', this, c, index); + } + return c; + }, + + // private + applyDefaults : function(c){ + var d = this.defaults; + if(d){ + if(Ext.isFunction(d)){ + d = d.call(this, c); + } + if(Ext.isString(c)){ + c = Ext.ComponentMgr.get(c); + Ext.apply(c, d); + }else if(!c.events){ + Ext.applyIf(c, d); + }else{ + Ext.apply(c, d); + } + } + return c; + }, + + // private + onBeforeAdd : function(item){ + if(item.ownerCt){ + item.ownerCt.remove(item, false); + } + if(this.hideBorders === true){ + item.border = (item.border === true); + } + }, + + /** + * Removes a component from this container. Fires the {@link #beforeremove} event before removing, then fires + * the {@link #remove} event after the component has been removed. + * @param {Component/String} component The component reference or id to remove. + * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function. + * Defaults to the value of this Container's {@link #autoDestroy} config. + * @return {Ext.Component} component The Component that was removed. + */ + remove : function(comp, autoDestroy){ + this.initItems(); + var c = this.getComponent(comp); + if(c && this.fireEvent('beforeremove', this, c) !== false){ + this.doRemove(c, autoDestroy); + this.fireEvent('remove', this, c); + } + return c; + }, + + onRemove: function(c){ + // Empty template method + }, + + // private + doRemove: function(c, autoDestroy){ + var l = this.layout, + hasLayout = l && this.rendered; + + if(hasLayout){ + l.onRemove(c); + } + this.items.remove(c); + c.onRemoved(); + this.onRemove(c); + if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){ + c.destroy(); + } + if(hasLayout){ + l.afterRemove(c); + } + }, + + /** + * Removes all components from this container. + * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function. + * Defaults to the value of this Container's {@link #autoDestroy} config. + * @return {Array} Array of the destroyed components + */ + removeAll: function(autoDestroy){ + this.initItems(); + var item, rem = [], items = []; + this.items.each(function(i){ + rem.push(i); + }); + for (var i = 0, len = rem.length; i < len; ++i){ + item = rem[i]; + this.remove(item, autoDestroy); + if(item.ownerCt !== this){ + items.push(item); + } + } + return items; + }, + + /** + * Examines this container's {@link #items} property + * and gets a direct child component of this container. + * @param {String/Number} comp This parameter may be any of the following: + * + * a String : representing the {@link Ext.Component#itemId itemId} + * or {@link Ext.Component#id id} of the child component + * a Number : representing the position of the child component + * within the {@link #items} property + * + * For additional information see {@link Ext.util.MixedCollection#get}. + * @return Ext.Component The component (if found). + */ + getComponent : function(comp){ + if(Ext.isObject(comp)){ + comp = comp.getItemId(); + } + return this.items.get(comp); + }, + + // private + lookupComponent : function(comp){ + if(Ext.isString(comp)){ + return Ext.ComponentMgr.get(comp); + }else if(!comp.events){ + return this.createComponent(comp); + } + return comp; + }, + + // private + createComponent : function(config, defaultType){ + // add in ownerCt at creation time but then immediately + // remove so that onBeforeAdd can handle it + var c = config.render ? config : Ext.create(Ext.apply({ + ownerCt: this + }, config), defaultType || this.defaultType); + delete c.ownerCt; + return c; + }, + + /** + * We can only lay out if there is a view area in which to layout. + * display:none on the layout target, *or any of its parent elements* will mean it has no view area. + */ + + // private + canLayout : function() { + var el = this.getVisibilityEl(); + return el && el.dom && !el.isStyle("display", "none"); + }, + + /** + * Force this container's layout to be recalculated. A call to this function is required after adding a new component + * to an already rendered container, or possibly after changing sizing/position properties of child components. + * @param {Boolean} shallow (optional) True to only calc the layout of this component, and let child components auto + * calc layouts as required (defaults to false, which calls doLayout recursively for each subcontainer) + * @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden. + * @return {Ext.Container} this + */ + + doLayout : function(shallow, force){ + var rendered = this.rendered, + forceLayout = force || this.forceLayout; + + if(this.collapsed || !this.canLayout()){ + this.deferLayout = this.deferLayout || !shallow; + if(!forceLayout){ + return; + } + shallow = shallow && !this.deferLayout; + } else { + delete this.deferLayout; + } + if(rendered && this.layout){ + this.layout.layout(); + } + if(shallow !== true && this.items){ + var cs = this.items.items; + for(var i = 0, len = cs.length; i < len; i++){ + var c = cs[i]; + if(c.doLayout){ + c.doLayout(false, forceLayout); + } + } + } + if(rendered){ + this.onLayout(shallow, forceLayout); + } + // Initial layout completed + this.hasLayout = true; + delete this.forceLayout; + }, + + onLayout : Ext.emptyFn, + + // private + shouldBufferLayout: function(){ + /* + * Returns true if the container should buffer a layout. + * This is true only if the container has previously been laid out + * and has a parent container that is pending a layout. + */ + var hl = this.hasLayout; + if(this.ownerCt){ + // Only ever buffer if we've laid out the first time and we have one pending. + return hl ? !this.hasLayoutPending() : false; + } + // Never buffer initial layout + return hl; + }, + + // private + hasLayoutPending: function(){ + // Traverse hierarchy to see if any parent container has a pending layout. + var pending = false; + this.ownerCt.bubble(function(c){ + if(c.layoutPending){ + pending = true; + return false; + } + }); + return pending; + }, + + onShow : function(){ + // removes css classes that were added to hide + Ext.Container.superclass.onShow.call(this); + // If we were sized during the time we were hidden, layout. + if(Ext.isDefined(this.deferLayout)){ + delete this.deferLayout; + this.doLayout(true); + } + }, + + /** + * Returns the layout currently in use by the container. If the container does not currently have a layout + * set, a default {@link Ext.layout.ContainerLayout} will be created and set as the container's layout. + * @return {ContainerLayout} layout The container's layout + */ + getLayout : function(){ + if(!this.layout){ + var layout = new Ext.layout.ContainerLayout(this.layoutConfig); + this.setLayout(layout); + } + return this.layout; + }, + + // private + beforeDestroy : function(){ + var c; + if(this.items){ + while(c = this.items.first()){ + this.doRemove(c, true); + } + } + if(this.monitorResize){ + Ext.EventManager.removeResizeListener(this.doLayout, this); + } + Ext.destroy(this.layout); + Ext.Container.superclass.beforeDestroy.call(this); + }, + + /** + * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of + * function call will be the scope provided or the current component. The arguments to the function + * will be the args provided or the current component. If the function returns false at any point, + * the bubble is stopped. + * @param {Function} fn The function to call + * @param {Object} scope (optional) The scope of the function (defaults to current node) + * @param {Array} args (optional) The args to call the function with (default to passing the current component) + * @return {Ext.Container} this + */ + bubble : function(fn, scope, args){ + var p = this; + while(p){ + if(fn.apply(scope || p, args || [p]) === false){ + break; + } + p = p.ownerCt; + } + return this; + }, + + /** + * Cascades down the component/container heirarchy from this component (called first), calling the specified function with + * each component. The scope (this) of + * function call will be the scope provided or the current component. The arguments to the function + * will be the args provided or the current component. If the function returns false at any point, + * the cascade is stopped on that branch. + * @param {Function} fn The function to call + * @param {Object} scope (optional) The scope of the function (defaults to current component) + * @param {Array} args (optional) The args to call the function with (defaults to passing the current component) + * @return {Ext.Container} this + */ + cascade : function(fn, scope, args){ + if(fn.apply(scope || this, args || [this]) !== false){ + if(this.items){ + var cs = this.items.items; + for(var i = 0, len = cs.length; i < len; i++){ + if(cs[i].cascade){ + cs[i].cascade(fn, scope, args); + }else{ + fn.apply(scope || cs[i], args || [cs[i]]); + } + } + } + } + return this; + }, + + /** + * Find a component under this container at any level by id + * @param {String} id + * @return Ext.Component + */ + findById : function(id){ + var m, ct = this; + this.cascade(function(c){ + if(ct != c && c.id === id){ + m = c; + return false; + } + }); + return m || null; + }, + + /** + * Find a component under this container at any level by xtype or class + * @param {String/Class} xtype The xtype string for a component, or the class of the component directly + * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is + * the default), or true to check whether this Component is directly of the specified xtype. + * @return {Array} Array of Ext.Components + */ + findByType : function(xtype, shallow){ + return this.findBy(function(c){ + return c.isXType(xtype, shallow); + }); + }, + + /** + * Find a component under this container at any level by property + * @param {String} prop + * @param {String} value + * @return {Array} Array of Ext.Components + */ + find : function(prop, value){ + return this.findBy(function(c){ + return c[prop] === value; + }); + }, + + /** + * Find a component under this container at any level by a custom function. If the passed function returns + * true, the component will be included in the results. The passed function is called with the arguments (component, this container). + * @param {Function} fn The function to call + * @param {Object} scope (optional) + * @return {Array} Array of Ext.Components + */ + findBy : function(fn, scope){ + var m = [], ct = this; + this.cascade(function(c){ + if(ct != c && fn.call(scope || c, c, ct) === true){ + m.push(c); + } + }); + return m; + }, + + /** + * Get a component contained by this container (alias for items.get(key)) + * @param {String/Number} key The index or id of the component + * @return {Ext.Component} Ext.Component + */ + get : function(key){ + return this.items.get(key); + } +}); + +Ext.Container.LAYOUTS = {}; +Ext.reg('container', Ext.Container); /** * @class Ext.layout.ContainerLayout - * The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to - * render any child Components when no {@link Ext.Container#layout layout} is configured into - * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout - * classes in Ext. It simply renders all child Components into the Container, performing no sizing or - * positioning services. To utilize a layout that provides sizing and positioning of child Components, - * specify an appropriate {@link Ext.Container#layout layout}. * This class is intended to be extended or created via the {@link Ext.Container#layout layout} * configuration property. See {@link Ext.Container#layout} for additional details. */ -Ext.layout.ContainerLayout = function(config){ - Ext.apply(this, config); -}; - -Ext.layout.ContainerLayout.prototype = { +Ext.layout.ContainerLayout = Ext.extend(Object, { /** * @cfg {String} extraCls * An optional extra CSS class that will be added to the container. This can be useful for adding @@ -18309,11 +19138,49 @@ Ext.layout.ContainerLayout.prototype = { // private activeItem : null, + constructor : function(config){ + this.id = Ext.id(null, 'ext-layout-'); + Ext.apply(this, config); + }, + + type: 'container', + + /* Workaround for how IE measures autoWidth elements. It prefers bottom-up measurements + whereas other browser prefer top-down. We will hide all target child elements before we measure and + put them back to get an accurate measurement. + */ + IEMeasureHack : function(target, viewFlag) { + var tChildren = target.dom.childNodes, tLen = tChildren.length, c, d = [], e, i, ret; + for (i = 0 ; i < tLen ; i++) { + c = tChildren[i]; + e = Ext.get(c); + if (e) { + d[i] = e.getStyle('display'); + e.setStyle({display: 'none'}); + } + } + ret = target ? target.getViewSize(viewFlag) : {}; + for (i = 0 ; i < tLen ; i++) { + c = tChildren[i]; + e = Ext.get(c); + if (e) { + e.setStyle({display: d[i]}); + } + } + return ret; + }, + + // Placeholder for the derived layouts + getLayoutTargetSize : Ext.EmptyFn, + // private layout : function(){ - var target = this.container.getLayoutTarget(); - this.onLayout(this.container, target); - this.container.fireEvent('afterlayout', this.container, this); + var ct = this.container, target = ct.getLayoutTarget(); + if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){ + target.addClass(this.targetCls); + } + this.onLayout(ct, target); + ct.fireEvent('afterlayout', ct, this); }, // private @@ -18323,14 +19190,14 @@ Ext.layout.ContainerLayout.prototype = { // private isValidParent : function(c, target){ - return target && c.getDomPositionEl().dom.parentNode == (target.dom || target); + return target && c.getPositionEl().dom.parentNode == (target.dom || target); }, // private renderAll : function(ct, target){ - var items = ct.items.items; - for(var i = 0, len = items.length; i < len; i++) { - var c = items[i]; + var items = ct.items.items, i, c, len = items.length; + for(i = 0; i < len; i++) { + c = items[i]; if(c && (!c.rendered || !this.isValidParent(c, target))){ this.renderItem(c, i, target); } @@ -18339,33 +19206,48 @@ Ext.layout.ContainerLayout.prototype = { // private renderItem : function(c, position, target){ - if(c && !c.rendered){ - c.render(target, position); - this.configureItem(c, position); - }else if(c && !this.isValidParent(c, target)){ - if(Ext.isNumber(position)){ - position = target.dom.childNodes[position]; + if(c){ + if(!c.rendered){ + c.render(target, position); + this.configureItem(c, position); + }else if(!this.isValidParent(c, target)){ + if(Ext.isNumber(position)){ + position = target.dom.childNodes[position]; + } + target.dom.insertBefore(c.getPositionEl().dom, position || null); + c.container = target; + this.configureItem(c, position); } - target.dom.insertBefore(c.getDomPositionEl().dom, position || null); - c.container = target; - this.configureItem(c, position); } }, - + + // private. + // Get all rendered items to lay out. + getRenderedItems: function(ct){ + var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = []; + for (i = 0; i < len; i++) { + if((c = cti[i]).rendered && this.isValidParent(c, t)){ + items.push(c); + } + }; + return items; + }, + // private configureItem: function(c, position){ if(this.extraCls){ var t = c.getPositionEl ? c.getPositionEl() : c; t.addClass(this.extraCls); } + // If we are forcing a layout, do so *before* we hide so elements have height/width + if(c.doLayout && this.forceLayout){ + c.doLayout(); + } if (this.renderHidden && c != this.activeItem) { c.hide(); } - if(c.doLayout && this.forceLayout){ - c.doLayout(false, true); - } }, - + onRemove: function(c){ if(this.activeItem == c){ delete this.activeItem; @@ -18376,11 +19258,17 @@ Ext.layout.ContainerLayout.prototype = { } }, + afterRemove: function(c){ + if(c.removeRestore){ + c.removeMode = 'container'; + delete c.removeRestore; + } + }, + // private onResize: function(){ var ct = this.container, b; - if(ct.collapsed){ return; } @@ -18395,19 +19283,33 @@ Ext.layout.ContainerLayout.prototype = { this.resizeTask.delay(this.resizeBuffer); } }else{ - ct.doLayout(); + this.runLayout(); } }, - - // private + runLayout: function(){ var ct = this.container; + // AutoLayout is known to require the recursive doLayout call, others need this currently (BorderLayout for example) + // but shouldn't. A more extensive review will take place for 3.2 which requires a ContainerMgr with hierarchy lookups. + //this.layout(); + //ct.onLayout(); ct.doLayout(); delete ct.layoutPending; }, // private setContainer : function(ct){ + if (!Ext.LayoutManager) { + Ext.LayoutManager = {}; + } + + /* This monitorResize flag will be renamed soon as to avoid confusion + * with the Container version which hooks onWindowResize to doLayout + * + * monitorResize flag in this context attaches the resize event between + * a container and it's layout + */ + if(this.monitorResize && ct != this.container){ var old = this.container; if(old){ @@ -18428,15 +19330,11 @@ Ext.layout.ContainerLayout.prototype = { var ms = v.split(' '); var len = ms.length; if(len == 1){ - ms[1] = ms[0]; - ms[2] = ms[0]; - ms[3] = ms[0]; - } - if(len == 2){ + ms[1] = ms[2] = ms[3] = ms[0]; + } else if(len == 2){ ms[2] = ms[0]; ms[3] = ms[1]; - } - if(len == 3){ + } else if(len == 3){ ms[3] = ms[1]; } return { @@ -18467,15 +19365,39 @@ Ext.layout.ContainerLayout.prototype = { t.disableFormats = true; return t.compile(); })(), - + /* * Destroys this layout. This is a template method that is empty by default, but should be implemented * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes. * @protected */ - destroy : Ext.emptyFn -}; -Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;/** + destroy : function(){ + if(!Ext.isEmpty(this.targetCls)){ + var target = this.container.getLayoutTarget(); + if(target){ + target.removeClass(this.targetCls); + } + } + } +});/** + * @class Ext.layout.AutoLayout + * The AutoLayout is the default layout manager delegated by {@link Ext.Container} to + * render any child Components when no {@link Ext.Container#layout layout} is configured into + * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout + * classes in Ext. It simply renders all child Components into the Container, performing no sizing or + * positioning services. To utilize a layout that provides sizing and positioning of child Components, + * specify an appropriate {@link Ext.Container#layout layout}. + */ +Ext.layout.AutoLayout = Ext.extend(Ext.layout.ContainerLayout, { + runLayout: function(){ + var ct = this.container; + ct.doLayout(); + delete ct.layoutPending; + } +}); + +Ext.Container.LAYOUTS['auto'] = Ext.layout.AutoLayout; +/** * @class Ext.layout.FitLayout * @extends Ext.layout.ContainerLayout * This is a base class for layouts that contain a single item that automatically expands to fill the layout's @@ -18500,12 +19422,22 @@ Ext.layout.FitLayout = Ext.extend(Ext.layout.ContainerLayout, { // private monitorResize:true, + type: 'fit', + + getLayoutTargetSize : function() { + var target = this.container.getLayoutTarget(); + if (!target) { + return {}; + } + // Style Sized (scrollbars not included) + return target.getStyleSize(); + }, + // private onLayout : function(ct, target){ Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target); - if(!this.container.collapsed){ - var sz = (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getViewSize() : target.getStyleSize(); - this.setItemSize(this.activeItem || ct.items.itemAt(0), sz); + if(!ct.collapsed){ + this.setItemSize(this.activeItem || ct.items.itemAt(0), this.getLayoutTargetSize()); } }, @@ -18590,7 +19522,7 @@ Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, { * true might improve performance. */ deferredRender : false, - + /** * @cfg {Boolean} layoutOnCardChange * True to force a layout of the active item when the active card is changed. Defaults to false. @@ -18602,10 +19534,11 @@ Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, { */ // private renderHidden : true, - + + type: 'card', + constructor: function(config){ Ext.layout.CardLayout.superclass.constructor.call(this, config); - this.forceLayout = (this.deferredRender === false); }, /** @@ -18613,18 +19546,37 @@ Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, { * @param {String/Number} item The string component id or numeric index of the item to activate */ setActiveItem : function(item){ - item = this.container.getComponent(item); - if(this.activeItem != item){ - if(this.activeItem){ - this.activeItem.hide(); + var ai = this.activeItem, + ct = this.container; + item = ct.getComponent(item); + + // Is this a valid, different card? + if(item && ai != item){ + + // Changing cards, hide the current one + if(ai){ + ai.hide(); + if (ai.hidden !== true) { + return false; + } + ai.fireEvent('deactivate', ai); } - var layout = item.doLayout && (this.layoutOnCardChange || !item.rendered); + // Change activeItem reference this.activeItem = item; + + // The container is about to get a recursive layout, remove any deferLayout reference + // because it will trigger a redundant layout. + delete item.deferLayout; + + // Show the new component item.show(); + this.layout(); - if(layout){ + + if(item.doLayout){ item.doLayout(); } + item.fireEvent('activate', item); } }, @@ -18637,200 +19589,205 @@ Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, { } } }); -Ext.Container.LAYOUTS['card'] = Ext.layout.CardLayout;/** - * @class Ext.layout.AnchorLayout - * @extends Ext.layout.ContainerLayout - * This is a layout that enables anchoring of contained elements relative to the container's dimensions. - * If the container is resized, all anchored items are automatically rerendered according to their - * {@link #anchor} rules. - * This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout} - * config, and should generally not need to be created directly via the new keyword. - * AnchorLayout does not have any direct config options (other than inherited ones). By default, - * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the - * container using the AnchorLayout can supply an anchoring-specific config property of anchorSize. - * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating - * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring - * logic if necessary. For example: - * -var viewport = new Ext.Viewport({ - layout:'anchor', - anchorSize: {width:800, height:600}, - items:[{ - title:'Item 1', - html:'Content 1', - width:800, - anchor:'right 20%' - },{ - title:'Item 2', - html:'Content 2', - width:300, - anchor:'50% 30%' - },{ - title:'Item 3', - html:'Content 3', - width:600, - anchor:'-100 50%' - }] -}); - * - */ -Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, { - /** - * @cfg {String} anchor - * This configuation option is to be applied to child items of a container managed by - * this layout (ie. configured with layout:'anchor'). - * - * This value is what tells the layout how an item should be anchored to the container. items - * added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string - * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). - * The following types of anchor values are supported: - * - * Percentage : Any value between 1 and 100, expressed as a percentage. - * The first anchor is the percentage width that the item should take up within the container, and the - * second is the percentage height. For example: -// two values specified -anchor: '100% 50%' // render item complete width of the container and - // 1/2 height of the container -// one value specified -anchor: '100%' // the width value; the height will default to auto - * - * - * Offsets : Any positive or negative integer value. - * This is a raw adjustment where the first anchor is the offset from the right edge of the container, - * and the second is the offset from the bottom edge. For example: -// two values specified -anchor: '-50 -100' // render item the complete width of the container - // minus 50 pixels and - // the complete height minus 100 pixels. -// one value specified -anchor: '-50' // anchor value is assumed to be the right offset value - // bottom offset will default to 0 - * - * - * Sides : Valid values are 'right' (or 'r') and 'bottom' - * (or 'b'). - * Either the container must have a fixed size or an anchorSize config value defined at render time in - * order for these to have any effect. - * - * Mixed : - * Anchor values can also be mixed as needed. For example, to render the width offset from the container - * right edge by 50 pixels and 75% of the container's height use: - * -anchor: '-50 75%' - * - * - * - * - */ - - // private - monitorResize:true, - - // private - getAnchorViewSize : function(ct, target){ - return target.dom == document.body ? - target.getViewSize() : target.getStyleSize(); - }, - - // private - onLayout : function(ct, target){ - Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target); - - var size = this.getAnchorViewSize(ct, target); - - var w = size.width, h = size.height; - - if(w < 20 && h < 20){ - return; - } - - // find the container anchoring size - var aw, ah; - if(ct.anchorSize){ - if(typeof ct.anchorSize == 'number'){ - aw = ct.anchorSize; - }else{ - aw = ct.anchorSize.width; - ah = ct.anchorSize.height; - } - }else{ - aw = ct.initialConfig.width; - ah = ct.initialConfig.height; - } - - var cs = ct.items.items, len = cs.length, i, c, a, cw, ch; - for(i = 0; i < len; i++){ - c = cs[i]; - if(c.anchor){ - a = c.anchorSpec; - if(!a){ // cache all anchor values - var vs = c.anchor.split(' '); - c.anchorSpec = a = { - right: this.parseAnchor(vs[0], c.initialConfig.width, aw), - bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah) - }; - } - cw = a.right ? this.adjustWidthAnchor(a.right(w), c) : undefined; - ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h), c) : undefined; - - if(cw || ch){ - c.setSize(cw || undefined, ch || undefined); - } - } - } - }, - - // private - parseAnchor : function(a, start, cstart){ - if(a && a != 'none'){ - var last; - if(/^(r|right|b|bottom)$/i.test(a)){ // standard anchor - var diff = cstart - start; - return function(v){ - if(v !== last){ - last = v; - return v - diff; - } - } - }else if(a.indexOf('%') != -1){ - var ratio = parseFloat(a.replace('%', ''))*.01; // percentage - return function(v){ - if(v !== last){ - last = v; - return Math.floor(v*ratio); - } - } - }else{ - a = parseInt(a, 10); - if(!isNaN(a)){ // simple offset adjustment - return function(v){ - if(v !== last){ - last = v; - return v + a; - } - } - } - } - } - return false; - }, - - // private - adjustWidthAnchor : function(value, comp){ - return value; - }, - - // private - adjustHeightAnchor : function(value, comp){ - return value; - } - - /** - * @property activeItem - * @hide - */ -}); -Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout;/** +Ext.Container.LAYOUTS['card'] = Ext.layout.CardLayout;/** + * @class Ext.layout.AnchorLayout + * @extends Ext.layout.ContainerLayout + * This is a layout that enables anchoring of contained elements relative to the container's dimensions. + * If the container is resized, all anchored items are automatically rerendered according to their + * {@link #anchor} rules. + * This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout} + * config, and should generally not need to be created directly via the new keyword. + * AnchorLayout does not have any direct config options (other than inherited ones). By default, + * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the + * container using the AnchorLayout can supply an anchoring-specific config property of anchorSize. + * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating + * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring + * logic if necessary. For example: + * +var viewport = new Ext.Viewport({ + layout:'anchor', + anchorSize: {width:800, height:600}, + items:[{ + title:'Item 1', + html:'Content 1', + width:800, + anchor:'right 20%' + },{ + title:'Item 2', + html:'Content 2', + width:300, + anchor:'50% 30%' + },{ + title:'Item 3', + html:'Content 3', + width:600, + anchor:'-100 50%' + }] +}); + * + */ +Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, { + /** + * @cfg {String} anchor + * This configuation option is to be applied to child items of a container managed by + * this layout (ie. configured with layout:'anchor'). + * + * This value is what tells the layout how an item should be anchored to the container. items + * added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string + * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). + * The following types of anchor values are supported: + * + * Percentage : Any value between 1 and 100, expressed as a percentage. + * The first anchor is the percentage width that the item should take up within the container, and the + * second is the percentage height. For example: +// two values specified +anchor: '100% 50%' // render item complete width of the container and + // 1/2 height of the container +// one value specified +anchor: '100%' // the width value; the height will default to auto + * + * + * Offsets : Any positive or negative integer value. + * This is a raw adjustment where the first anchor is the offset from the right edge of the container, + * and the second is the offset from the bottom edge. For example: +// two values specified +anchor: '-50 -100' // render item the complete width of the container + // minus 50 pixels and + // the complete height minus 100 pixels. +// one value specified +anchor: '-50' // anchor value is assumed to be the right offset value + // bottom offset will default to 0 + * + * + * Sides : Valid values are 'right' (or 'r') and 'bottom' + * (or 'b'). + * Either the container must have a fixed size or an anchorSize config value defined at render time in + * order for these to have any effect. + * + * Mixed : + * Anchor values can also be mixed as needed. For example, to render the width offset from the container + * right edge by 50 pixels and 75% of the container's height use: + * +anchor: '-50 75%' + * + * + * + * + */ + + // private + monitorResize:true, + type: 'anchor', + + getLayoutTargetSize : function() { + var target = this.container.getLayoutTarget(); + if (!target) { + return {}; + } + // Style Sized (scrollbars not included) + return target.getStyleSize(); + }, + + // private + onLayout : function(ct, target){ + Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target); + var size = this.getLayoutTargetSize(); + + var w = size.width, h = size.height; + + if(w < 20 && h < 20){ + return; + } + + // find the container anchoring size + var aw, ah; + if(ct.anchorSize){ + if(typeof ct.anchorSize == 'number'){ + aw = ct.anchorSize; + }else{ + aw = ct.anchorSize.width; + ah = ct.anchorSize.height; + } + }else{ + aw = ct.initialConfig.width; + ah = ct.initialConfig.height; + } + + var cs = this.getRenderedItems(ct), len = cs.length, i, c, a, cw, ch, el, vs; + for(i = 0; i < len; i++){ + c = cs[i]; + el = c.getPositionEl(); + if(c.anchor){ + a = c.anchorSpec; + if(!a){ // cache all anchor values + vs = c.anchor.split(' '); + c.anchorSpec = a = { + right: this.parseAnchor(vs[0], c.initialConfig.width, aw), + bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah) + }; + } + cw = a.right ? this.adjustWidthAnchor(a.right(w) - el.getMargins('lr'), c) : undefined; + ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h) - el.getMargins('tb'), c) : undefined; + + if(cw || ch){ + c.setSize(cw || undefined, ch || undefined); + } + } + } + }, + + // private + parseAnchor : function(a, start, cstart){ + if(a && a != 'none'){ + var last; + if(/^(r|right|b|bottom)$/i.test(a)){ // standard anchor + var diff = cstart - start; + return function(v){ + if(v !== last){ + last = v; + return v - diff; + } + } + }else if(a.indexOf('%') != -1){ + var ratio = parseFloat(a.replace('%', ''))*.01; // percentage + return function(v){ + if(v !== last){ + last = v; + return Math.floor(v*ratio); + } + } + }else{ + a = parseInt(a, 10); + if(!isNaN(a)){ // simple offset adjustment + return function(v){ + if(v !== last){ + last = v; + return v + a; + } + } + } + } + } + return false; + }, + + // private + adjustWidthAnchor : function(value, comp){ + return value; + }, + + // private + adjustHeightAnchor : function(value, comp){ + return value; + } + + /** + * @property activeItem + * @hide + */ +}); +Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout; +/** * @class Ext.layout.ColumnLayout * @extends Ext.layout.ContainerLayout * This is the layout style of choice for creating structural layouts in a multi-column format where the width of @@ -18859,7 +19816,7 @@ var p = new Ext.Panel({ layout:'column', items: [{ title: 'Column 1', - columnWidth: .25 + columnWidth: .25 },{ title: 'Column 2', columnWidth: .6 @@ -18891,49 +19848,66 @@ var p = new Ext.Panel({ Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, { // private monitorResize:true, - + + type: 'column', + extraCls: 'x-column', scrollOffset : 0, // private + + targetCls: 'x-column-layout-ct', + isValidParent : function(c, target){ - return (c.getPositionEl ? c.getPositionEl() : c.getEl()).dom.parentNode == this.innerCt.dom; + return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom; }, - // private - onLayout : function(ct, target){ - var cs = ct.items.items, len = cs.length, c, i; + getLayoutTargetSize : function() { + var target = this.container.getLayoutTarget(), ret; + if (target) { + ret = target.getViewSize(); + ret.width -= target.getPadding('lr'); + ret.height -= target.getPadding('tb'); + } + return ret; + }, + renderAll : function(ct, target) { if(!this.innerCt){ - target.addClass('x-column-layout-ct'); - // the innerCt prevents wrapping and shuffling while // the container is resizing this.innerCt = target.createChild({cls:'x-column-inner'}); this.innerCt.createChild({cls:'x-clear'}); } - this.renderAll(ct, this.innerCt); + Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt); + }, + + // private + onLayout : function(ct, target){ + var cs = ct.items.items, len = cs.length, c, i; - var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize(); + this.renderAll(ct, target); + + var size = this.getLayoutTargetSize(); if(size.width < 1 && size.height < 1){ // display none? return; } - var w = size.width - target.getPadding('lr') - this.scrollOffset, - h = size.height - target.getPadding('tb'), + var w = size.width - this.scrollOffset, + h = size.height, pw = w; this.innerCt.setWidth(w); - + // some columns can be percentages while others are fixed // so we need to make 2 passes for(i = 0; i < len; i++){ c = cs[i]; if(!c.columnWidth){ - pw -= (c.getSize().width + c.getEl().getMargins('lr')); + pw -= (c.getWidth() + c.getPositionEl().getMargins('lr')); } } @@ -18942,11 +19916,24 @@ Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, { for(i = 0; i < len; i++){ c = cs[i]; if(c.columnWidth){ - c.setSize(Math.floor(c.columnWidth*pw) - c.getEl().getMargins('lr')); + c.setSize(Math.floor(c.columnWidth * pw) - c.getPositionEl().getMargins('lr')); + } + } + + // Browsers differ as to when they account for scrollbars. We need to re-measure to see if the scrollbar + // spaces were accounted for properly. If not, re-layout. + if (Ext.isIE) { + if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { + var ts = this.getLayoutTargetSize(); + if (ts.width != size.width){ + this.adjustmentPass = true; + this.onLayout(ct, target); + } } } + delete this.adjustmentPass; } - + /** * @property activeItem * @hide @@ -18980,7 +19967,7 @@ var myBorderPanel = new Ext.Panel({ {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region {@link Ext.BoxComponent#height height}: 100, {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing - {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50} + {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50} {@link Ext.SplitBar#maxSize maxSize}: 150, {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5' },{ @@ -19038,23 +20025,30 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { // private rendered : false, + type: 'border', + + targetCls: 'x-border-layout-ct', + + getLayoutTargetSize : function() { + var target = this.container.getLayoutTarget(); + return target ? target.getViewSize() : {}; + }, + // private onLayout : function(ct, target){ - var collapsed; + var collapsed, i, c, pos, items = ct.items.items, len = items.length; if(!this.rendered){ - target.addClass('x-border-layout-ct'); - var items = ct.items.items; collapsed = []; - for(var i = 0, len = items.length; i < len; i++) { - var c = items[i]; - var pos = c.region; + for(i = 0; i < len; i++) { + c = items[i]; + pos = c.region; if(c.collapsed){ collapsed.push(c); } c.collapsed = false; if(!c.rendered){ c.render(target, i); - c.getDomPositionEl().addClass('x-border-panel'); + c.getPositionEl().addClass('x-border-panel'); } this[pos] = pos != 'center' && c.split ? new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) : @@ -19064,7 +20058,7 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { this.rendered = true; } - var size = target.getViewSize(); + var size = this.getLayoutTargetSize(); if(size.width < 20 || size.height < 20){ // display none? if(collapsed){ this.restoreCollapsed = collapsed; @@ -19075,17 +20069,17 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { delete this.restoreCollapsed; } - var w = size.width, h = size.height; - var centerW = w, centerH = h, centerY = 0, centerX = 0; - - var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center; + var w = size.width, h = size.height, + centerW = w, centerH = h, centerY = 0, centerX = 0, + n = this.north, s = this.south, west = this.west, e = this.east, c = this.center, + b, m, totalWidth, totalHeight; if(!c && Ext.layout.BorderLayout.WARN !== false){ throw 'No center region defined in BorderLayout ' + ct.id; } if(n && n.isVisible()){ - var b = n.getSize(); - var m = n.getMargins(); + b = n.getSize(); + m = n.getMargins(); b.width = w - (m.left+m.right); b.x = m.left; b.y = m.top; @@ -19094,38 +20088,38 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { n.applyLayout(b); } if(s && s.isVisible()){ - var b = s.getSize(); - var m = s.getMargins(); + b = s.getSize(); + m = s.getMargins(); b.width = w - (m.left+m.right); b.x = m.left; - var totalHeight = (b.height + m.top + m.bottom); + totalHeight = (b.height + m.top + m.bottom); b.y = h - totalHeight + m.top; centerH -= totalHeight; s.applyLayout(b); } if(west && west.isVisible()){ - var b = west.getSize(); - var m = west.getMargins(); + b = west.getSize(); + m = west.getMargins(); b.height = centerH - (m.top+m.bottom); b.x = m.left; b.y = centerY + m.top; - var totalWidth = (b.width + m.left + m.right); + totalWidth = (b.width + m.left + m.right); centerX += totalWidth; centerW -= totalWidth; west.applyLayout(b); } if(e && e.isVisible()){ - var b = e.getSize(); - var m = e.getMargins(); + b = e.getSize(); + m = e.getMargins(); b.height = centerH - (m.top+m.bottom); - var totalWidth = (b.width + m.left + m.right); + totalWidth = (b.width + m.left + m.right); b.x = w - totalWidth + m.left; b.y = centerY + m.top; centerW -= totalWidth; e.applyLayout(b); } if(c){ - var m = c.getMargins(); + m = c.getMargins(); var centerBox = { x: centerX + m.left, y: centerY + m.top, @@ -19135,19 +20129,28 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { c.applyLayout(centerBox); } if(collapsed){ - for(var i = 0, len = collapsed.length; i < len; i++){ + for(i = 0, len = collapsed.length; i < len; i++){ collapsed[i].collapse(false); } } if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue target.repaint(); } + // Putting a border layout into an overflowed container is NOT correct and will make a second layout pass necessary. + if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { + var ts = this.getLayoutTargetSize(); + if (ts.width != size.width || ts.height != size.height){ + this.adjustmentPass = true; + this.onLayout(ct, target); + } + } + delete this.adjustmentPass; }, destroy: function() { - var r = ['north', 'south', 'east', 'west']; - for (var i = 0; i < r.length; i++) { - var region = this[r[i]]; + var r = ['north', 'south', 'east', 'west'], i, region; + for (i = 0; i < r.length; i++) { + region = this[r[i]]; if(region){ if(region.destroy){ region.destroy(); @@ -19291,19 +20294,19 @@ Ext.layout.BorderLayout.Region.prototype = { collapsible : false, /** * @cfg {Boolean} split - * true to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and + * true to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to * resize the regions dynamically. Defaults to false creating a * {@link Ext.layout.BorderLayout.Region Region}. * Notes: - * this configuration option is ignored if region='center' + * this configuration option is ignored if region='center' * when split == true, it is common to specify a * {@link Ext.SplitBar#minSize minSize} and {@link Ext.SplitBar#maxSize maxSize} * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class. * if {@link #collapseMode} = 'mini' requires split = true to reserve space - * for the collapse tool - * + * for the collapse tool + *
*/ split:false, /** @@ -19317,8 +20320,8 @@ Ext.layout.BorderLayout.Region.prototype = { * @cfg {Number} minWidth * The minimum allowable width in pixels for this region (defaults to 50). * maxWidth may also be specified. - * Note: setting the {@link Ext.SplitBar#minSize minSize} / - * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified + * Note: setting the {@link Ext.SplitBar#minSize minSize} / + * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified * minWidth / maxWidth. */ minWidth:50, @@ -19326,8 +20329,8 @@ Ext.layout.BorderLayout.Region.prototype = { * @cfg {Number} minHeight * The minimum allowable height in pixels for this region (defaults to 50) * maxHeight may also be specified. - * Note: setting the {@link Ext.SplitBar#minSize minSize} / - * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified + * Note: setting the {@link Ext.SplitBar#minSize minSize} / + * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified * minHeight / maxHeight. */ minHeight:50, @@ -19442,7 +20445,6 @@ Ext.layout.BorderLayout.Region.prototype = { // private onExpandClick : function(e){ if(this.isSlid){ - this.afterSlideIn(); this.panel.expand(false); }else{ this.panel.expand(); @@ -19461,7 +20463,9 @@ Ext.layout.BorderLayout.Region.prototype = { this.splitEl.hide(); } this.getCollapsedEl().show(); - this.panel.el.setStyle('z-index', 100); + var el = this.panel.getEl(); + this.originalZIndex = el.getStyle('z-index'); + el.setStyle('z-index', 100); this.isCollapsed = true; this.layout.layout(); }, @@ -19480,6 +20484,9 @@ Ext.layout.BorderLayout.Region.prototype = { // private beforeExpand : function(animate){ + if(this.isSlid){ + this.afterSlideIn(); + } var c = this.getCollapsedEl(); this.el.show(); if(this.position == 'east' || this.position == 'west'){ @@ -19499,7 +20506,7 @@ Ext.layout.BorderLayout.Region.prototype = { this.splitEl.show(); } this.layout.layout(); - this.panel.el.setStyle('z-index', 1); + this.panel.el.setStyle('z-index', this.originalZIndex); this.state.collapsed = false; this.panel.saveState(); }, @@ -19631,6 +20638,7 @@ Ext.layout.BorderLayout.Region.prototype = { }; } this.el.on(this.autoHideHd); + this.collapsedEl.on(this.autoHideHd); } }, @@ -19639,6 +20647,8 @@ Ext.layout.BorderLayout.Region.prototype = { if(this.autoHide !== false){ this.el.un("mouseout", this.autoHideHd.mouseout); this.el.un("mouseover", this.autoHideHd.mouseover); + this.collapsedEl.un("mouseout", this.autoHideHd.mouseout); + this.collapsedEl.un("mouseover", this.autoHideHd.mouseover); } }, @@ -19657,16 +20667,32 @@ Ext.layout.BorderLayout.Region.prototype = { return; } this.isSlid = true; - var ts = this.panel.tools; + var ts = this.panel.tools, dh, pc; if(ts && ts.toggle){ ts.toggle.hide(); } this.el.show(); + + // Temporarily clear the collapsed flag so we can onResize the panel on the slide + pc = this.panel.collapsed; + this.panel.collapsed = false; + if(this.position == 'east' || this.position == 'west'){ + // Temporarily clear the deferHeight flag so we can size the height on the slide + dh = this.panel.deferHeight; + this.panel.deferHeight = false; + this.panel.setSize(undefined, this.collapsedEl.getHeight()); + + // Put the deferHeight flag back after setSize + this.panel.deferHeight = dh; }else{ this.panel.setSize(this.collapsedEl.getWidth(), undefined); } + + // Put the collapsed flag back after onResize + this.panel.collapsed = pc; + this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top]; this.el.alignTo(this.collapsedEl, this.getCollapseAnchor()); this.el.setStyle("z-index", this.floatingZIndex+2); @@ -19814,6 +20840,10 @@ Ext.layout.BorderLayout.Region.prototype = { return [0, cm.top+cm.bottom+c.getHeight()]; break; } + }, + + destroy : function(){ + Ext.destroy(this.miniCollapsedEl, this.collapsedEl); } }; @@ -20046,11 +21076,8 @@ Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, // inherit docs destroy : function() { - Ext.destroy( - this.miniSplitEl, - this.split, - this.splitEl - ); + Ext.destroy(this.miniSplitEl, this.split, this.splitEl); + Ext.layout.BorderLayout.SplitRegion.superclass.destroy.call(this); } }); @@ -20164,17 +21191,19 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { * @type String * @property labelStyle */ - + /** * @cfg {Boolean} trackLabels * True to show/hide the field label when the field is hidden. Defaults to false. */ trackLabels: false, - + + type: 'form', + onRemove: function(c){ Ext.layout.FormLayout.superclass.onRemove.call(this, c); - if(this.trackLabels && !this.isHide(c)){ + if(this.trackLabels){ c.un('show', this.onFieldShow, this); c.un('hide', this.onFieldHide, this); } @@ -20182,7 +21211,9 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { var el = c.getPositionEl(), ct = c.getItemCt && c.getItemCt(); if(c.rendered && ct){ - el.insertAfter(ct); + if (el && el.dom) { + el.insertAfter(ct); + } Ext.destroy(ct); Ext.destroyMembers(c, 'label', 'itemCt'); if(c.customItemCt){ @@ -20190,7 +21221,7 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { } } }, - + // private setContainer : function(ct){ Ext.layout.FormLayout.superclass.setContainer.call(this, ct); @@ -20224,17 +21255,18 @@ Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { } } }, - + + // private isHide: function(c){ return c.hideLabel || this.container.hideLabels; }, - + onFieldShow: function(c){ c.getItemCt().removeClass('x-hide-' + c.hideMode); }, - + onFieldHide: function(c){ - c.getItemCt().addClass('x-hide-' + c.hideMode); + c.getItemCt().addClass('x-hide-' + c.hideMode); }, //private @@ -20297,11 +21329,6 @@ new Ext.Template( }else{ c.itemCt = this.fieldTpl.append(target, args, true); } - if(!c.rendered){ - c.render('x-form-el-' + c.id); - }else if(!this.isValidParent(c, target)){ - Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl()); - } if(!c.getItemCt){ // Non form fields don't have getItemCt, apply it here // This will get cleaned up in onRemove @@ -20313,7 +21340,12 @@ new Ext.Template( }); } c.label = c.getItemCt().child('label.x-form-item-label'); - if(this.trackLabels && !this.isHide(c)){ + if(!c.rendered){ + c.render('x-form-el-' + c.id); + }else if(!this.isValidParent(c, target)){ + Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl()); + } + if(this.trackLabels){ if(c.hidden){ this.onFieldHide(c); } @@ -20351,7 +21383,7 @@ new Ext.Template( *
clearCls : StringThe CSS class to apply to the special clearing div * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
*
- * @param field The {@link Field Ext.form.Field} being rendered. + * @param (Ext.form.Field} field The {@link Ext.form.Field Field} being rendered. * @return An object hash containing the properties required to render the Field. */ getTemplateArgs: function(field) { @@ -20375,7 +21407,7 @@ new Ext.Template( } return value; }, - + adjustHeightAnchor : function(value, c){ if(c.label && !this.isHide(c) && (this.container.labelAlign == 'top')){ return value - c.label.getHeight(); @@ -20385,7 +21417,7 @@ new Ext.Template( // private isValidParent : function(c, target){ - return target && this.container.getEl().contains(c.getDomPositionEl()); + return target && this.container.getEl().contains(c.getPositionEl()); } /** @@ -20394,7 +21426,8 @@ new Ext.Template( */ }); -Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;/** +Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout; +/** * @class Ext.layout.AccordionLayout * @extends Ext.layout.FitLayout * This is a layout that manages multiple Panels in an expandable accordion style such that only @@ -20482,6 +21515,8 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, { */ activeOnTop : false, + type: 'accordion', + renderItem : function(c){ if(this.animate === false){ c.animCollapse = false; @@ -20500,7 +21535,7 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, { c.collapseFirst = this.collapseFirst; } if(!this.activeItem && !c.collapsed){ - this.activeItem = c; + this.setActiveItem(c, true); }else if(this.activeItem && this.activeItem != c){ c.collapsed = true; } @@ -20508,7 +21543,7 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, { c.header.addClass('x-accordion-hd'); c.on('beforeexpand', this.beforeExpand, this); }, - + onRemove: function(c){ Ext.layout.AccordionLayout.superclass.onRemove.call(this, c); if(c.rendered){ @@ -20533,23 +21568,28 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, { ai.collapse(this.animate); } } - this.activeItem = p; + this.setActive(p); if(this.activeOnTop){ p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild); } + // Items have been hidden an possibly rearranged, we need to get the container size again. this.layout(); }, // private setItemSize : function(item, size){ if(this.fill && item){ - var hh = 0; - this.container.items.each(function(p){ - if(p != item){ + var hh = 0, i, ct = this.getRenderedItems(this.container), len = ct.length, p; + // Add up all the header heights + for (i = 0; i < len; i++) { + if((p = ct[i]) != item){ hh += p.header.getHeight(); - } - }); + } + }; + // Subtract the header heights from the container size size.height -= hh; + // Call setSize on the container to set the correct height. For Panels, deferedHeight + // will simply store this size for when the expansion is done. item.setSize(size); } }, @@ -20559,15 +21599,24 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, { * @param {String/Number} item The string component id or numeric index of the item to activate */ setActiveItem : function(item){ + this.setActive(item, true); + }, + + // private + setActive : function(item, expand){ + var ai = this.activeItem; item = this.container.getComponent(item); - if(this.activeItem != item){ - if(item.rendered && item.collapsed){ + if(ai != item){ + if(item.rendered && item.collapsed && expand){ item.expand(); }else{ + if(ai){ + ai.fireEvent('deactivate', ai); + } this.activeItem = item; + item.fireEvent('activate', item); } } - } }); Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout; @@ -20642,6 +21691,10 @@ Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, { // private monitorResize:false, + type: 'table', + + targetCls: 'x-table-layout-ct', + /** * @cfg {Object} tableAttrs *
An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification @@ -20651,16 +21704,16 @@ Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, { layout: 'table', layoutConfig: { tableAttrs: { - style: { - width: '100%' - } + style: { + width: '100%' + } }, columns: 3 } } */ tableAttrs:null, - + // private setContainer : function(ct){ Ext.layout.TableLayout.superclass.setContainer.call(this, ct); @@ -20669,7 +21722,7 @@ Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, { this.currentColumn = 0; this.cells = []; }, - + // private onLayout : function(ct, target){ var cs = ct.items.items, len = cs.length, c, i; @@ -20723,7 +21776,7 @@ Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, { this.getRow(curRow).appendChild(td); return td; }, - + // private getNextNonSpan: function(colIndex, rowIndex){ var cols = this.columns; @@ -20740,12 +21793,17 @@ Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, { // private renderItem : function(c, position, target){ + // Ensure we have our inner table to get cells to render into. + if(!this.table){ + this.table = target.createChild( + Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true); + } if(c && !c.rendered){ c.render(this.getNextCell(c)); this.configureItem(c, position); }else if(c && !this.isValidParent(c, target)){ var container = this.getNextCell(c); - container.insertBefore(c.getDomPositionEl().dom, null); + container.insertBefore(c.getPositionEl().dom, null); c.container = Ext.get(container); this.configureItem(c, position); } @@ -20753,7 +21811,7 @@ Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, { // private isValidParent : function(c, target){ - return c.getDomPositionEl().up('table', 5).dom.parentNode === (target.dom || target); + return c.getPositionEl().up('table', 5).dom.parentNode === (target.dom || target); } /** @@ -20762,615 +21820,1000 @@ Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, { */ }); -Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;/** - * @class Ext.layout.AbsoluteLayout - * @extends Ext.layout.AnchorLayout - *
This is a layout that inherits the anchoring of {@link Ext.layout.AnchorLayout} and adds the - * ability for x/y positioning using the standard x and y component config options.
- *
This class is intended to be extended or created via the {@link Ext.Container#layout layout} - * configuration property. See {@link Ext.Container#layout} for additional details.
- *
Example usage:
- *
-var form = new Ext.form.FormPanel({ - title: 'Absolute Layout', - layout:'absolute', - layoutConfig: { - // layout-specific configs go here - extraCls: 'x-abs-layout-item', - }, - baseCls: 'x-plain', - url:'save-form.php', - defaultType: 'textfield', - items: [{ - x: 0, - y: 5, - xtype:'label', - text: 'Send To:' - },{ - x: 60, - y: 0, - name: 'to', - anchor:'100%' // anchor width by percentage - },{ - x: 0, - y: 35, - xtype:'label', - text: 'Subject:' - },{ - x: 60, - y: 30, - name: 'subject', - anchor: '100%' // anchor width by percentage - },{ - x:0, - y: 60, - xtype: 'textarea', - name: 'msg', - anchor: '100% 100%' // anchor width and height - }] -}); -
- */ -Ext.layout.AbsoluteLayout = Ext.extend(Ext.layout.AnchorLayout, { - - extraCls: 'x-abs-layout-item', - - onLayout : function(ct, target){ - target.position(); - this.paddingLeft = target.getPadding('l'); - this.paddingTop = target.getPadding('t'); - - Ext.layout.AbsoluteLayout.superclass.onLayout.call(this, ct, target); - }, - - // private - adjustWidthAnchor : function(value, comp){ - return value ? value - comp.getPosition(true)[0] + this.paddingLeft : value; - }, - - // private - adjustHeightAnchor : function(value, comp){ - return value ? value - comp.getPosition(true)[1] + this.paddingTop : value; - } - /** - * @property activeItem - * @hide - */ -}); +Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;/** + * @class Ext.layout.AbsoluteLayout + * @extends Ext.layout.AnchorLayout + *
This is a layout that inherits the anchoring of {@link Ext.layout.AnchorLayout} and adds the + * ability for x/y positioning using the standard x and y component config options.
+ *
This class is intended to be extended or created via the {@link Ext.Container#layout layout} + * configuration property. See {@link Ext.Container#layout} for additional details.
+ *
Example usage:
+ *
+var form = new Ext.form.FormPanel({ + title: 'Absolute Layout', + layout:'absolute', + layoutConfig: { + // layout-specific configs go here + extraCls: 'x-abs-layout-item', + }, + baseCls: 'x-plain', + url:'save-form.php', + defaultType: 'textfield', + items: [{ + x: 0, + y: 5, + xtype:'label', + text: 'Send To:' + },{ + x: 60, + y: 0, + name: 'to', + anchor:'100%' // anchor width by percentage + },{ + x: 0, + y: 35, + xtype:'label', + text: 'Subject:' + },{ + x: 60, + y: 30, + name: 'subject', + anchor: '100%' // anchor width by percentage + },{ + x:0, + y: 60, + xtype: 'textarea', + name: 'msg', + anchor: '100% 100%' // anchor width and height + }] +}); +
+ */ +Ext.layout.AbsoluteLayout = Ext.extend(Ext.layout.AnchorLayout, { + + extraCls: 'x-abs-layout-item', + + type: 'anchor', + + onLayout : function(ct, target){ + target.position(); + this.paddingLeft = target.getPadding('l'); + this.paddingTop = target.getPadding('t'); + Ext.layout.AbsoluteLayout.superclass.onLayout.call(this, ct, target); + }, + + // private + adjustWidthAnchor : function(value, comp){ + return value ? value - comp.getPosition(true)[0] + this.paddingLeft : value; + }, + + // private + adjustHeightAnchor : function(value, comp){ + return value ? value - comp.getPosition(true)[1] + this.paddingTop : value; + } + /** + * @property activeItem + * @hide + */ +}); Ext.Container.LAYOUTS['absolute'] = Ext.layout.AbsoluteLayout; -/** - * @class Ext.layout.BoxLayout - * @extends Ext.layout.ContainerLayout - *
Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.
- */ -Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, { - /** - * @cfg {Object} defaultMargins - *
If the individual contained items do not have a margins - * property specified, the default margins from this property will be - * applied to each item.
- *
This property may be specified as an object containing margins - * to apply in the format:
-{ - top: (top margin), - right: (right margin), - bottom: (bottom margin), - left: (left margin) -}
- *
This property may also be specified as a string containing - * space-separated, numeric margin values. The order of the sides associated - * with each value matches the way CSS processes margin values:
- *
- *
If there is only one value, it applies to all sides.
- *
If there are two values, the top and bottom borders are set to the - * first value and the right and left are set to the second.
- *
If there are three values, the top is set to the first value, the left - * and right are set to the second, and the bottom is set to the third.
- *
If there are four values, they apply to the top, right, bottom, and - * left, respectively.
- *
- *
Defaults to:
- * {top:0, right:0, bottom:0, left:0} - *
- */ - defaultMargins : {left:0,top:0,right:0,bottom:0}, - /** - * @cfg {String} padding - *
Sets the padding to be applied to all child items managed by this layout.
- *
This property must be specified as a string containing - * space-separated, numeric padding values. The order of the sides associated - * with each value matches the way CSS processes padding values:
- *
- *
If there is only one value, it applies to all sides.
- *
If there are two values, the top and bottom borders are set to the - * first value and the right and left are set to the second.
- *
If there are three values, the top is set to the first value, the left - * and right are set to the second, and the bottom is set to the third.
- *
If there are four values, they apply to the top, right, bottom, and - * left, respectively.
- *
- *
Defaults to: "0"
- */ - padding : '0', - // documented in subclasses - pack : 'start', - - // private - monitorResize : true, - scrollOffset : 0, - extraCls : 'x-box-item', - ctCls : 'x-box-layout-ct', - innerCls : 'x-box-inner', - - constructor : function(config){ - Ext.layout.BoxLayout.superclass.constructor.call(this, config); - if(Ext.isString(this.defaultMargins)){ - this.defaultMargins = this.parseMargins(this.defaultMargins); - } - }, - - // private - isValidParent : function(c, target){ - return c.getEl().dom.parentNode == this.innerCt.dom; - }, - - // private - onLayout : function(ct, target){ - var cs = ct.items.items, len = cs.length, c, i, last = len-1, cm; - - if(!this.innerCt){ - target.addClass(this.ctCls); - - // the innerCt prevents wrapping and shuffling while - // the container is resizing - this.innerCt = target.createChild({cls:this.innerCls}); - this.padding = this.parseMargins(this.padding); - } - this.renderAll(ct, this.innerCt); - }, - - // private - renderItem : function(c){ - if(Ext.isString(c.margins)){ - c.margins = this.parseMargins(c.margins); - }else if(!c.margins){ - c.margins = this.defaultMargins; - } - Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments); - }, - - getTargetSize : function(target){ - return (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getStyleSize() : target.getViewSize(); - }, - - getItems: function(ct){ - var items = []; - ct.items.each(function(c){ - if(c.isVisible()){ - items.push(c); - } - }); - return items; - } - - /** - * @property activeItem - * @hide - */ -}); - -/** - * @class Ext.layout.VBoxLayout - * @extends Ext.layout.BoxLayout - *
A layout that arranges items vertically down a Container. This layout optionally divides available vertical - * space between child items containing a numeric flex configuration.
- * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option. - */ -Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, { - /** - * @cfg {String} align - * Controls how the child items of the container are aligned. Acceptable configuration values for this - * property are: - *
- *
left : Default
child items are aligned horizontally - * at the left side of the container
- *
center :
child items are aligned horizontally at the - * mid-width of the container
- *
stretch :
child items are stretched horizontally to fill - * the width of the container
- *
stretchmax :
child items are stretched horizontally to - * the size of the largest item.
- *
- */ - align : 'left', // left, center, stretch, strechmax - /** - * @cfg {String} pack - * Controls how the child items of the container are packed together. Acceptable configuration values - * for this property are: - *
- *
start : Default
child items are packed together at - * top side of container
- *
center :
child items are packed together at - * mid-height of container
- *
end :
child items are packed together at bottom - * side of container
- *
- */ - /** - * @cfg {Number} flex - * This configuation option is to be applied to child items of the container managed - * by this layout. Each child item with a flex property will be flexed vertically - * according to each item's relative flex value compared to the sum of all items with - * a flex value specified. Any child items that have either a flex = 0 or - * flex = undefined will not be 'flexed' (the initial size will not be changed). - */ - - // private - onLayout : function(ct, target){ - Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target); - - - var cs = this.getItems(ct), cm, ch, margin, - size = this.getTargetSize(target), - w = size.width - target.getPadding('lr'), - h = size.height - target.getPadding('tb') - this.scrollOffset, - l = this.padding.left, t = this.padding.top, - isStart = this.pack == 'start', - isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1, - stretchWidth = w - (this.padding.left + this.padding.right), - extraHeight = 0, - maxWidth = 0, - totalFlex = 0, - flexHeight = 0, - usedHeight = 0; - - Ext.each(cs, function(c){ - cm = c.margins; - totalFlex += c.flex || 0; - ch = c.getHeight(); - margin = cm.top + cm.bottom; - extraHeight += ch + margin; - flexHeight += margin + (c.flex ? 0 : ch); - maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right); - }); - extraHeight = h - extraHeight - this.padding.top - this.padding.bottom; - - var innerCtWidth = maxWidth + this.padding.left + this.padding.right; - switch(this.align){ - case 'stretch': - this.innerCt.setSize(w, h); - break; - case 'stretchmax': - case 'left': - this.innerCt.setSize(innerCtWidth, h); - break; - case 'center': - this.innerCt.setSize(w = Math.max(w, innerCtWidth), h); - break; - } - - var availHeight = Math.max(0, h - this.padding.top - this.padding.bottom - flexHeight), - leftOver = availHeight, - heights = [], - restore = [], - idx = 0, - availableWidth = Math.max(0, w - this.padding.left - this.padding.right); - - - Ext.each(cs, function(c){ - if(isStart && c.flex){ - ch = Math.floor(availHeight * (c.flex / totalFlex)); - leftOver -= ch; - heights.push(ch); - } - }); - - if(this.pack == 'center'){ - t += extraHeight ? extraHeight / 2 : 0; - }else if(this.pack == 'end'){ - t += extraHeight; - } - Ext.each(cs, function(c){ - cm = c.margins; - t += cm.top; - c.setPosition(l + cm.left, t); - if(isStart && c.flex){ - ch = Math.max(0, heights[idx++] + (leftOver-- > 0 ? 1 : 0)); - if(isRestore){ - restore.push(c.getWidth()); - } - c.setSize(availableWidth, ch); - }else{ - ch = c.getHeight(); - } - t += ch + cm.bottom; - }); - - idx = 0; - Ext.each(cs, function(c){ - cm = c.margins; - if(this.align == 'stretch'){ - c.setWidth((stretchWidth - (cm.left + cm.right)).constrain( - c.minWidth || 0, c.maxWidth || 1000000)); - }else if(this.align == 'stretchmax'){ - c.setWidth((maxWidth - (cm.left + cm.right)).constrain( - c.minWidth || 0, c.maxWidth || 1000000)); - }else{ - if(this.align == 'center'){ - var diff = availableWidth - (c.getWidth() + cm.left + cm.right); - if(diff > 0){ - c.setPosition(l + cm.left + (diff/2), c.y); - } - } - if(isStart && c.flex){ - c.setWidth(restore[idx++]); - } - } - }, this); - } - /** - * @property activeItem - * @hide - */ -}); - -Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout; - -/** - * @class Ext.layout.HBoxLayout - * @extends Ext.layout.BoxLayout - *
A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal - * space between child items containing a numeric flex configuration.
- * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option. - */ -Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, { - /** - * @cfg {String} align - * Controls how the child items of the container are aligned. Acceptable configuration values for this - * property are: - *
- *
top : Default
child items are aligned vertically - * at the left side of the container
- *
middle :
child items are aligned vertically at the - * mid-height of the container
- *
stretch :
child items are stretched vertically to fill - * the height of the container
- *
stretchmax :
child items are stretched vertically to - * the size of the largest item.
- */ - align : 'top', // top, middle, stretch, strechmax - /** - * @cfg {String} pack - * Controls how the child items of the container are packed together. Acceptable configuration values - * for this property are: - *
- *
start : Default
child items are packed together at - * left side of container
- *
center :
child items are packed together at - * mid-width of container
- *
end :
child items are packed together at right - * side of container
- *
- */ - /** - * @cfg {Number} flex - * This configuation option is to be applied to child items of the container managed - * by this layout. Each child item with a flex property will be flexed horizontally - * according to each item's relative flex value compared to the sum of all items with - * a flex value specified. Any child items that have either a flex = 0 or - * flex = undefined will not be 'flexed' (the initial size will not be changed). - */ - - // private - onLayout : function(ct, target){ - Ext.layout.HBoxLayout.superclass.onLayout.call(this, ct, target); - - var cs = this.getItems(ct), cm, cw, margin, - size = this.getTargetSize(target), - w = size.width - target.getPadding('lr') - this.scrollOffset, - h = size.height - target.getPadding('tb'), - l = this.padding.left, t = this.padding.top, - isStart = this.pack == 'start', - isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1, - stretchHeight = h - (this.padding.top + this.padding.bottom), - extraWidth = 0, - maxHeight = 0, - totalFlex = 0, - flexWidth = 0, - usedWidth = 0; - - Ext.each(cs, function(c){ - cm = c.margins; - totalFlex += c.flex || 0; - cw = c.getWidth(); - margin = cm.left + cm.right; - extraWidth += cw + margin; - flexWidth += margin + (c.flex ? 0 : cw); - maxHeight = Math.max(maxHeight, c.getHeight() + cm.top + cm.bottom); - }); - extraWidth = w - extraWidth - this.padding.left - this.padding.right; - - var innerCtHeight = maxHeight + this.padding.top + this.padding.bottom; - switch(this.align){ - case 'stretch': - this.innerCt.setSize(w, h); - break; - case 'stretchmax': - case 'top': - this.innerCt.setSize(w, innerCtHeight); - break; - case 'middle': - this.innerCt.setSize(w, h = Math.max(h, innerCtHeight)); - break; - } - - - var availWidth = Math.max(0, w - this.padding.left - this.padding.right - flexWidth), - leftOver = availWidth, - widths = [], - restore = [], - idx = 0, - availableHeight = Math.max(0, h - this.padding.top - this.padding.bottom); - - - Ext.each(cs, function(c){ - if(isStart && c.flex){ - cw = Math.floor(availWidth * (c.flex / totalFlex)); - leftOver -= cw; - widths.push(cw); - } - }); - - if(this.pack == 'center'){ - l += extraWidth ? extraWidth / 2 : 0; - }else if(this.pack == 'end'){ - l += extraWidth; - } - Ext.each(cs, function(c){ - cm = c.margins; - l += cm.left; - c.setPosition(l, t + cm.top); - if(isStart && c.flex){ - cw = Math.max(0, widths[idx++] + (leftOver-- > 0 ? 1 : 0)); - if(isRestore){ - restore.push(c.getHeight()); - } - c.setSize(cw, availableHeight); - }else{ - cw = c.getWidth(); - } - l += cw + cm.right; - }); - - idx = 0; - Ext.each(cs, function(c){ - var cm = c.margins; - if(this.align == 'stretch'){ - c.setHeight((stretchHeight - (cm.top + cm.bottom)).constrain( - c.minHeight || 0, c.maxHeight || 1000000)); - }else if(this.align == 'stretchmax'){ - c.setHeight((maxHeight - (cm.top + cm.bottom)).constrain( - c.minHeight || 0, c.maxHeight || 1000000)); - }else{ - if(this.align == 'middle'){ - var diff = availableHeight - (c.getHeight() + cm.top + cm.bottom); - if(diff > 0){ - c.setPosition(c.x, t + cm.top + (diff/2)); - } - } - if(isStart && c.flex){ - c.setHeight(restore[idx++]); - } - } - }, this); - } - - /** - * @property activeItem - * @hide - */ -}); - -Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout; -/** - * @class Ext.Viewport - * @extends Ext.Container - *
A specialized container representing the viewable application area (the browser viewport).
- *
The Viewport renders itself to the document body, and automatically sizes itself to the size of - * the browser viewport and manages window resizing. There may only be one Viewport created - * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s - * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add} - * method of any of its child Panels may themselves have a layout.
- *
The Viewport does not provide scrolling, so child Panels within the Viewport should provide - * for scrolling if needed using the {@link #autoScroll} config.
- *
An example showing a classic application border layout:
-new Ext.Viewport({ - layout: 'border', - items: [{ - region: 'north', - html: '<h1 class="x-panel-header">Page Title</h1>', - autoHeight: true, - border: false, - margins: '0 0 5 0' - }, { - region: 'west', - collapsible: true, - title: 'Navigation', - width: 200 - // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout} - }, { - region: 'south', - title: 'Title for Panel', - collapsible: true, - html: 'Information goes here', - split: true, - height: 100, - minHeight: 100 - }, { - region: 'east', - title: 'Title for the Grid Panel', - collapsible: true, - split: true, - width: 200, - xtype: 'grid', - // remaining grid configuration not shown ... - // notice that the GridPanel is added directly as the region - // it is not "overnested" inside another Panel - }, { - region: 'center', - xtype: 'tabpanel', // TabPanel itself has no title - items: { - title: 'Default Tab', - html: 'The first tab\'s content. Others may be added dynamically' - } - }] -}); -
- * @constructor - * Create a new Viewport - * @param {Object} config The config object - * @xtype viewport - */ -Ext.Viewport = Ext.extend(Ext.Container, { - /* - * Privatize config options which, if used, would interfere with the - * correct operation of the Viewport as the sole manager of the - * layout of the document body. - */ - /** - * @cfg {Mixed} applyTo @hide - */ - /** - * @cfg {Boolean} allowDomMove @hide - */ - /** - * @cfg {Boolean} hideParent @hide - */ - /** - * @cfg {Mixed} renderTo @hide - */ - /** - * @cfg {Boolean} hideParent @hide - */ - /** - * @cfg {Number} height @hide - */ - /** - * @cfg {Number} width @hide - */ - /** - * @cfg {Boolean} autoHeight @hide - */ - /** - * @cfg {Boolean} autoWidth @hide - */ - /** - * @cfg {Boolean} deferHeight @hide - */ - /** - * @cfg {Boolean} monitorResize @hide - */ - initComponent : function() { +/** + * @class Ext.layout.BoxLayout + * @extends Ext.layout.ContainerLayout + *
Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.
+ */ +Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, { + /** + * @cfg {Object} defaultMargins + *
If the individual contained items do not have a margins + * property specified, the default margins from this property will be + * applied to each item.
+ *
This property may be specified as an object containing margins + * to apply in the format:
+{ + top: (top margin), + right: (right margin), + bottom: (bottom margin), + left: (left margin) +}
+ *
This property may also be specified as a string containing + * space-separated, numeric margin values. The order of the sides associated + * with each value matches the way CSS processes margin values:
+ *
+ *
If there is only one value, it applies to all sides.
+ *
If there are two values, the top and bottom borders are set to the + * first value and the right and left are set to the second.
+ *
If there are three values, the top is set to the first value, the left + * and right are set to the second, and the bottom is set to the third.
+ *
If there are four values, they apply to the top, right, bottom, and + * left, respectively.
+ *
+ *
Defaults to:
+ * {top:0, right:0, bottom:0, left:0} + *
+ */ + defaultMargins : {left:0,top:0,right:0,bottom:0}, + /** + * @cfg {String} padding + *
Sets the padding to be applied to all child items managed by this layout.
+ *
This property must be specified as a string containing + * space-separated, numeric padding values. The order of the sides associated + * with each value matches the way CSS processes padding values:
+ *
+ *
If there is only one value, it applies to all sides.
+ *
If there are two values, the top and bottom borders are set to the + * first value and the right and left are set to the second.
+ *
If there are three values, the top is set to the first value, the left + * and right are set to the second, and the bottom is set to the third.
+ *
If there are four values, they apply to the top, right, bottom, and + * left, respectively.
+ *
+ *
Defaults to: "0"
+ */ + padding : '0', + // documented in subclasses + pack : 'start', + + // private + monitorResize : true, + type: 'box', + scrollOffset : 0, + extraCls : 'x-box-item', + targetCls : 'x-box-layout-ct', + innerCls : 'x-box-inner', + + constructor : function(config){ + Ext.layout.BoxLayout.superclass.constructor.call(this, config); + if(Ext.isString(this.defaultMargins)){ + this.defaultMargins = this.parseMargins(this.defaultMargins); + } + }, + + // private + isValidParent : function(c, target){ + return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom; + }, + + // private + renderAll : function(ct, target){ + if(!this.innerCt){ + // the innerCt prevents wrapping and shuffling while + // the container is resizing + this.innerCt = target.createChild({cls:this.innerCls}); + this.padding = this.parseMargins(this.padding); + } + Ext.layout.BoxLayout.superclass.renderAll.call(this, ct, this.innerCt); + }, + + onLayout : function(ct, target){ + this.renderAll(ct, target); + }, + + getLayoutTargetSize : function(){ + var target = this.container.getLayoutTarget(), ret; + if (target) { + ret = target.getViewSize(); + ret.width -= target.getPadding('lr'); + ret.height -= target.getPadding('tb'); + } + return ret; + }, + + // private + renderItem : function(c){ + if(Ext.isString(c.margins)){ + c.margins = this.parseMargins(c.margins); + }else if(!c.margins){ + c.margins = this.defaultMargins; + } + Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments); + } +}); + +/** + * @class Ext.layout.VBoxLayout + * @extends Ext.layout.BoxLayout + *
A layout that arranges items vertically down a Container. This layout optionally divides available vertical + * space between child items containing a numeric flex configuration.
+ * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option. + */ +Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, { + /** + * @cfg {String} align + * Controls how the child items of the container are aligned. Acceptable configuration values for this + * property are: + *
+ *
left : Default
child items are aligned horizontally + * at the left side of the container
+ *
center :
child items are aligned horizontally at the + * mid-width of the container
+ *
stretch :
child items are stretched horizontally to fill + * the width of the container
+ *
stretchmax :
child items are stretched horizontally to + * the size of the largest item.
+ *
+ */ + align : 'left', // left, center, stretch, strechmax + type: 'vbox', + /** + * @cfg {String} pack + * Controls how the child items of the container are packed together. Acceptable configuration values + * for this property are: + *
+ *
start : Default
child items are packed together at + * top side of container
+ *
center :
child items are packed together at + * mid-height of container
+ *
end :
child items are packed together at bottom + * side of container
+ *
+ */ + /** + * @cfg {Number} flex + * This configuation option is to be applied to child items of the container managed + * by this layout. Each child item with a flex property will be flexed vertically + * according to each item's relative flex value compared to the sum of all items with + * a flex value specified. Any child items that have either a flex = 0 or + * flex = undefined will not be 'flexed' (the initial size will not be changed). + */ + + // private + onLayout : function(ct, target){ + Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target); + + var cs = this.getRenderedItems(ct), csLen = cs.length, + c, i, cm, ch, margin, cl, diff, aw, availHeight, + size = this.getLayoutTargetSize(), + w = size.width, + h = size.height - this.scrollOffset, + l = this.padding.left, + t = this.padding.top, + isStart = this.pack == 'start', + extraHeight = 0, + maxWidth = 0, + totalFlex = 0, + usedHeight = 0, + idx = 0, + heights = [], + restore = []; + + // Do only width calculations and apply those first, as they can affect height + for (i = 0 ; i < csLen; i++) { + c = cs[i]; + cm = c.margins; + margin = cm.top + cm.bottom; + // Max height for align + maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right); + } + + var innerCtWidth = maxWidth + this.padding.left + this.padding.right; + switch(this.align){ + case 'stretch': + this.innerCt.setSize(w, h); + break; + case 'stretchmax': + case 'left': + this.innerCt.setSize(innerCtWidth, h); + break; + case 'center': + this.innerCt.setSize(w = Math.max(w, innerCtWidth), h); + break; + } + + var availableWidth = Math.max(0, w - this.padding.left - this.padding.right); + // Apply widths + for (i = 0 ; i < csLen; i++) { + c = cs[i]; + cm = c.margins; + if(this.align == 'stretch'){ + c.setWidth(((w - (this.padding.left + this.padding.right)) - (cm.left + cm.right)).constrain( + c.minWidth || 0, c.maxWidth || 1000000)); + }else if(this.align == 'stretchmax'){ + c.setWidth((maxWidth - (cm.left + cm.right)).constrain( + c.minWidth || 0, c.maxWidth || 1000000)); + }else if(isStart && c.flex){ + c.setWidth(); + } + + } + + // Height calculations + for (i = 0 ; i < csLen; i++) { + c = cs[i]; + // Total of all the flex values + totalFlex += c.flex || 0; + // Don't run height calculations on flexed items + if (!c.flex) { + // Render and layout sub-containers without a flex or height, once + if (!c.height && !c.hasLayout && c.doLayout) { + c.doLayout(); + } + ch = c.getHeight(); + } else { + ch = 0; + } + + cm = c.margins; + // Determine how much height is available to flex + extraHeight += ch + cm.top + cm.bottom; + } + // Final avail height calc + availHeight = Math.max(0, (h - extraHeight - this.padding.top - this.padding.bottom)); + + var leftOver = availHeight; + for (i = 0 ; i < csLen; i++) { + c = cs[i]; + if(isStart && c.flex){ + ch = Math.floor(availHeight * (c.flex / totalFlex)); + leftOver -= ch; + heights.push(ch); + } + } + if(this.pack == 'center'){ + t += availHeight ? availHeight / 2 : 0; + }else if(this.pack == 'end'){ + t += availHeight; + } + idx = 0; + // Apply heights + for (i = 0 ; i < csLen; i++) { + c = cs[i]; + cm = c.margins; + t += cm.top; + aw = availableWidth; + cl = l + cm.left // default left pos + + // Adjust left pos for centering + if(this.align == 'center'){ + if((diff = availableWidth - (c.getWidth() + cm.left + cm.right)) > 0){ + cl += (diff/2); + aw -= diff; + } + } + + c.setPosition(cl, t); + if(isStart && c.flex){ + ch = Math.max(0, heights[idx++] + (leftOver-- > 0 ? 1 : 0)); + c.setSize(aw, ch); + }else{ + ch = c.getHeight(); + } + t += ch + cm.bottom; + } + // Putting a box layout into an overflowed container is NOT correct and will make a second layout pass necessary. + if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { + var ts = this.getLayoutTargetSize(); + if (ts.width != size.width || ts.height != size.height){ + this.adjustmentPass = true; + this.onLayout(ct, target); + } + } + delete this.adjustmentPass; + } +}); + +Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout; + +/** + * @class Ext.layout.HBoxLayout + * @extends Ext.layout.BoxLayout + *
A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal + * space between child items containing a numeric flex configuration.
+ * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option. + */ +Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, { + /** + * @cfg {String} align + * Controls how the child items of the container are aligned. Acceptable configuration values for this + * property are: + *
+ *
top : Default
child items are aligned vertically + * at the top of the container
+ *
middle :
child items are aligned vertically in the + * middle of the container
+ *
stretch :
child items are stretched vertically to fill + * the height of the container
+ *
stretchmax :
child items are stretched vertically to + * the height of the largest item.
+ */ + align : 'top', // top, middle, stretch, strechmax + type: 'hbox', + /** + * @cfg {String} pack + * Controls how the child items of the container are packed together. Acceptable configuration values + * for this property are: + *
+ *
start : Default
child items are packed together at + * left side of container
+ *
center :
child items are packed together at + * mid-width of container
+ *
end :
child items are packed together at right + * side of container
+ *
+ */ + /** + * @cfg {Number} flex + * This configuation option is to be applied to child items of the container managed + * by this layout. Each child item with a flex property will be flexed horizontally + * according to each item's relative flex value compared to the sum of all items with + * a flex value specified. Any child items that have either a flex = 0 or + * flex = undefined will not be 'flexed' (the initial size will not be changed). + */ + + // private + onLayout : function(ct, target){ + Ext.layout.HBoxLayout.superclass.onLayout.call(this, ct, target); + + var cs = this.getRenderedItems(ct), csLen = cs.length, + c, i, cm, cw, ch, diff, availWidth, + size = this.getLayoutTargetSize(), + w = size.width - this.scrollOffset, + h = size.height, + l = this.padding.left, + t = this.padding.top, + isStart = this.pack == 'start', + isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1, + extraWidth = 0, + maxHeight = 0, + totalFlex = 0, + usedWidth = 0; + + for (i = 0 ; i < csLen; i++) { + c = cs[i]; + // Total of all the flex values + totalFlex += c.flex || 0; + // Don't run width calculations on flexed items + if (!c.flex) { + // Render and layout sub-containers without a flex or width, once + if (!c.width && !c.hasLayout && c.doLayout) { + c.doLayout(); + } + cw = c.getWidth(); + } else { + cw = 0; + } + cm = c.margins; + // Determine how much width is available to flex + extraWidth += cw + cm.left + cm.right; + // Max height for align + maxHeight = Math.max(maxHeight, c.getHeight() + cm.top + cm.bottom); + } + // Final avail width calc + availWidth = Math.max(0, (w - extraWidth - this.padding.left - this.padding.right)); + + var innerCtHeight = maxHeight + this.padding.top + this.padding.bottom; + switch(this.align){ + case 'stretch': + this.innerCt.setSize(w, h); + break; + case 'stretchmax': + case 'top': + this.innerCt.setSize(w, innerCtHeight); + break; + case 'middle': + this.innerCt.setSize(w, h = Math.max(h, innerCtHeight)); + break; + } + + var leftOver = availWidth, + widths = [], + restore = [], + idx = 0, + availableHeight = Math.max(0, h - this.padding.top - this.padding.bottom); + + for (i = 0 ; i < csLen; i++) { + c = cs[i]; + if(isStart && c.flex){ + cw = Math.floor(availWidth * (c.flex / totalFlex)); + leftOver -= cw; + widths.push(cw); + } + } + + if(this.pack == 'center'){ + l += availWidth ? availWidth / 2 : 0; + }else if(this.pack == 'end'){ + l += availWidth; + } + for (i = 0 ; i < csLen; i++) { + c = cs[i]; + cm = c.margins; + l += cm.left; + c.setPosition(l, t + cm.top); + if(isStart && c.flex){ + cw = Math.max(0, widths[idx++] + (leftOver-- > 0 ? 1 : 0)); + if(isRestore){ + restore.push(c.getHeight()); + } + c.setSize(cw, availableHeight); + }else{ + cw = c.getWidth(); + } + l += cw + cm.right; + } + + idx = 0; + for (i = 0 ; i < csLen; i++) { + c = cs[i]; + cm = c.margins; + ch = c.getHeight(); + if(isStart && c.flex){ + ch = restore[idx++]; + } + if(this.align == 'stretch'){ + c.setHeight(((h - (this.padding.top + this.padding.bottom)) - (cm.top + cm.bottom)).constrain( + c.minHeight || 0, c.maxHeight || 1000000)); + }else if(this.align == 'stretchmax'){ + c.setHeight((maxHeight - (cm.top + cm.bottom)).constrain( + c.minHeight || 0, c.maxHeight || 1000000)); + }else{ + if(this.align == 'middle'){ + diff = availableHeight - (ch + cm.top + cm.bottom); + ch = t + cm.top + (diff/2); + if(diff > 0){ + c.setPosition(c.x, ch); + } + } + if(isStart && c.flex){ + c.setHeight(ch); + } + } + } + // Putting a box layout into an overflowed container is NOT correct and will make a second layout pass necessary. + if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { + var ts = this.getLayoutTargetSize(); + if (ts.width != size.width || ts.height != size.height){ + this.adjustmentPass = true; + this.onLayout(ct, target); + } + } + delete this.adjustmentPass; + } +}); + +Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout; +/** + * @class Ext.layout.ToolbarLayout + * @extends Ext.layout.ContainerLayout + * Layout manager implicitly used by Ext.Toolbar. + */ +Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, { + monitorResize : true, + triggerWidth : 18, + lastOverflow : false, + + noItemsMenuText : '
(None)
', + + // private + onLayout : function(ct, target){ + if(!this.leftTr){ + var align = ct.buttonAlign == 'center' ? 'center' : 'left'; + target.addClass('x-toolbar-layout-ct'); + target.insertHtml('beforeEnd', + '
'); + this.leftTr = target.child('tr.x-toolbar-left-row', true); + this.rightTr = target.child('tr.x-toolbar-right-row', true); + this.extrasTr = target.child('tr.x-toolbar-extras-row', true); + } + + var side = ct.buttonAlign == 'right' ? this.rightTr : this.leftTr, + pos = 0, + items = ct.items.items; + + for(var i = 0, len = items.length, c; i < len; i++, pos++) { + c = items[i]; + if(c.isFill){ + side = this.rightTr; + pos = -1; + }else if(!c.rendered){ + c.render(this.insertCell(c, side, pos)); + }else{ + if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){ + var td = this.insertCell(c, side, pos); + td.appendChild(c.getPositionEl().dom); + c.container = Ext.get(td); + } + } + } + //strip extra empty cells + this.cleanup(this.leftTr); + this.cleanup(this.rightTr); + this.cleanup(this.extrasTr); + this.fitToSize(target); + }, + + cleanup : function(row){ + var cn = row.childNodes, i, c; + for(i = cn.length-1; i >= 0 && (c = cn[i]); i--){ + if(!c.firstChild){ + row.removeChild(c); + } + } + }, + + insertCell : function(c, side, pos){ + var td = document.createElement('td'); + td.className='x-toolbar-cell'; + side.insertBefore(td, side.childNodes[pos]||null); + return td; + }, + + hideItem : function(item){ + var h = (this.hiddens = this.hiddens || []); + h.push(item); + item.xtbHidden = true; + item.xtbWidth = item.getPositionEl().dom.parentNode.offsetWidth; + item.hide(); + }, + + unhideItem : function(item){ + item.show(); + item.xtbHidden = false; + this.hiddens.remove(item); + if(this.hiddens.length < 1){ + delete this.hiddens; + } + }, + + getItemWidth : function(c){ + return c.hidden ? (c.xtbWidth || 0) : c.getPositionEl().dom.parentNode.offsetWidth; + }, + + fitToSize : function(t){ + if(this.container.enableOverflow === false){ + return; + } + var w = t.dom.clientWidth, + lw = this.lastWidth || 0, + iw = t.dom.firstChild.offsetWidth, + clipWidth = w - this.triggerWidth, + hideIndex = -1; + + this.lastWidth = w; + + if(iw > w || (this.hiddens && w >= lw)){ + var i, items = this.container.items.items, + len = items.length, c, + loopWidth = 0; + + for(i = 0; i < len; i++) { + c = items[i]; + if(!c.isFill){ + loopWidth += this.getItemWidth(c); + if(loopWidth > clipWidth){ + if(!(c.hidden || c.xtbHidden)){ + this.hideItem(c); + } + }else if(c.xtbHidden){ + this.unhideItem(c); + } + } + } + } + if(this.hiddens){ + this.initMore(); + if(!this.lastOverflow){ + this.container.fireEvent('overflowchange', this.container, true); + this.lastOverflow = true; + } + }else if(this.more){ + this.clearMenu(); + this.more.destroy(); + delete this.more; + if(this.lastOverflow){ + this.container.fireEvent('overflowchange', this.container, false); + this.lastOverflow = false; + } + } + }, + + createMenuConfig : function(c, hideOnClick){ + var cfg = Ext.apply({}, c.initialConfig), + group = c.toggleGroup; + + Ext.apply(cfg, { + text: c.overflowText || c.text, + iconCls: c.iconCls, + icon: c.icon, + itemId: c.itemId, + disabled: c.disabled, + handler: c.handler, + scope: c.scope, + menu: c.menu, + hideOnClick: hideOnClick + }); + if(group || c.enableToggle){ + Ext.apply(cfg, { + group: group, + checked: c.pressed, + listeners: { + checkchange: function(item, checked){ + c.toggle(checked); + } + } + }); + } + delete cfg.ownerCt; + delete cfg.xtype; + delete cfg.id; + return cfg; + }, + + // private + addComponentToMenu : function(m, c){ + if(c instanceof Ext.Toolbar.Separator){ + m.add('-'); + }else if(Ext.isFunction(c.isXType)){ + if(c.isXType('splitbutton')){ + m.add(this.createMenuConfig(c, true)); + }else if(c.isXType('button')){ + m.add(this.createMenuConfig(c, !c.menu)); + }else if(c.isXType('buttongroup')){ + c.items.each(function(item){ + this.addComponentToMenu(m, item); + }, this); + } + } + }, + + clearMenu : function(){ + var m = this.moreMenu; + if(m && m.items){ + m.items.each(function(item){ + delete item.menu; + }); + } + }, + + // private + beforeMoreShow : function(m){ + var h = this.container.items.items, + len = h.length, + c, + prev, + needsSep = function(group, item){ + return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator); + }; + + this.clearMenu(); + m.removeAll(); + for(var i = 0; i < len; i++){ + c = h[i]; + if(c.xtbHidden){ + if(prev && (needsSep(c, prev) || needsSep(prev, c))){ + m.add('-'); + } + this.addComponentToMenu(m, c); + prev = c; + } + } + // put something so the menu isn't empty + // if no compatible items found + if(m.items.length < 1){ + m.add(this.noItemsMenuText); + } + }, + + initMore : function(){ + if(!this.more){ + this.moreMenu = new Ext.menu.Menu({ + ownerCt : this.container, + listeners: { + beforeshow: this.beforeMoreShow, + scope: this + } + + }); + this.more = new Ext.Button({ + iconCls : 'x-toolbar-more-icon', + cls : 'x-toolbar-more', + menu : this.moreMenu, + ownerCt : this.container + }); + var td = this.insertCell(this.more, this.extrasTr, 100); + this.more.render(td); + } + }, + + destroy : function(){ + Ext.destroy(this.more, this.moreMenu); + delete this.leftTr; + delete this.rightTr; + delete this.extrasTr; + Ext.layout.ToolbarLayout.superclass.destroy.call(this); + } +}); + +Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;/** + * @class Ext.layout.MenuLayout + * @extends Ext.layout.ContainerLayout + *
Layout manager used by {@link Ext.menu.Menu}. Generally this class should not need to be used directly.
+ */ + Ext.layout.MenuLayout = Ext.extend(Ext.layout.ContainerLayout, { + monitorResize : true, + + setContainer : function(ct){ + this.monitorResize = !ct.floating; + // This event is only fired by the menu in IE, used so we don't couple + // the menu with the layout. + ct.on('autosize', this.doAutoSize, this); + Ext.layout.MenuLayout.superclass.setContainer.call(this, ct); + }, + + renderItem : function(c, position, target){ + if (!this.itemTpl) { + this.itemTpl = Ext.layout.MenuLayout.prototype.itemTpl = new Ext.XTemplate( + '
', + '', + '', + '', + '
' + ); + } + + if(c && !c.rendered){ + if(Ext.isNumber(position)){ + position = target.dom.childNodes[position]; + } + var a = this.getItemArgs(c); + +// The Component's positionEl is the
it is rendered into + c.render(c.positionEl = position ? + this.itemTpl.insertBefore(position, a, true) : + this.itemTpl.append(target, a, true)); + +// Link the containing
to the item. + c.positionEl.menuItemId = c.getItemId(); + +// If rendering a regular Component, and it needs an icon, +// move the Component rightwards. + if (!a.isMenuItem && a.needsIcon) { + c.positionEl.addClass('x-menu-list-item-indent'); + } + this.configureItem(c, position); + }else if(c && !this.isValidParent(c, target)){ + if(Ext.isNumber(position)){ + position = target.dom.childNodes[position]; + } + target.dom.insertBefore(c.getActionEl().dom, position || null); + } + }, + + getItemArgs : function(c) { + var isMenuItem = c instanceof Ext.menu.Item; + return { + isMenuItem: isMenuItem, + needsIcon: !isMenuItem && (c.icon || c.iconCls), + icon: c.icon || Ext.BLANK_IMAGE_URL, + iconCls: 'x-menu-item-icon ' + (c.iconCls || ''), + itemId: 'x-menu-el-' + c.id, + itemCls: 'x-menu-list-item ' + }; + }, + + // Valid if the Component is in a
which is part of our target
+ isValidParent : function(c, target) { + return c.el.up('li.x-menu-list-item', 5).dom.parentNode === (target.dom || target); + }, + + onLayout : function(ct, target){ + Ext.layout.MenuLayout.superclass.onLayout.call(this, ct, target); + this.doAutoSize(); + }, + + doAutoSize : function(){ + var ct = this.container, w = ct.width; + if(ct.floating){ + if(w){ + ct.setWidth(w); + }else if(Ext.isIE){ + ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8) ? 'auto' : ct.minWidth); + var el = ct.getEl(), t = el.dom.offsetWidth; // force recalc + ct.setWidth(ct.getLayoutTarget().getWidth() + el.getFrameWidth('lr')); + } + } + } +}); +Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;/** + * @class Ext.Viewport + * @extends Ext.Container + *
A specialized container representing the viewable application area (the browser viewport).
+ *
The Viewport renders itself to the document body, and automatically sizes itself to the size of + * the browser viewport and manages window resizing. There may only be one Viewport created + * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s + * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add} + * method of any of its child Panels may themselves have a layout.
+ *
The Viewport does not provide scrolling, so child Panels within the Viewport should provide + * for scrolling if needed using the {@link #autoScroll} config.
+ *
An example showing a classic application border layout:
+new Ext.Viewport({ + layout: 'border', + items: [{ + region: 'north', + html: '<h1 class="x-panel-header">Page Title</h1>', + autoHeight: true, + border: false, + margins: '0 0 5 0' + }, { + region: 'west', + collapsible: true, + title: 'Navigation', + width: 200 + // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout} + }, { + region: 'south', + title: 'Title for Panel', + collapsible: true, + html: 'Information goes here', + split: true, + height: 100, + minHeight: 100 + }, { + region: 'east', + title: 'Title for the Grid Panel', + collapsible: true, + split: true, + width: 200, + xtype: 'grid', + // remaining grid configuration not shown ... + // notice that the GridPanel is added directly as the region + // it is not "overnested" inside another Panel + }, { + region: 'center', + xtype: 'tabpanel', // TabPanel itself has no title + items: { + title: 'Default Tab', + html: 'The first tab\'s content. Others may be added dynamically' + } + }] +}); +
+ * @constructor + * Create a new Viewport + * @param {Object} config The config object + * @xtype viewport + */ +Ext.Viewport = Ext.extend(Ext.Container, { + /* + * Privatize config options which, if used, would interfere with the + * correct operation of the Viewport as the sole manager of the + * layout of the document body. + */ + /** + * @cfg {Mixed} applyTo @hide + */ + /** + * @cfg {Boolean} allowDomMove @hide + */ + /** + * @cfg {Boolean} hideParent @hide + */ + /** + * @cfg {Mixed} renderTo @hide + */ + /** + * @cfg {Boolean} hideParent @hide + */ + /** + * @cfg {Number} height @hide + */ + /** + * @cfg {Number} width @hide + */ + /** + * @cfg {Boolean} autoHeight @hide + */ + /** + * @cfg {Boolean} autoWidth @hide + */ + /** + * @cfg {Boolean} deferHeight @hide + */ + /** + * @cfg {Boolean} monitorResize @hide + */ + + initComponent : function() { Ext.Viewport.superclass.initComponent.call(this); document.getElementsByTagName('html')[0].className += ' x-viewport'; this.el = Ext.getBody(); @@ -21389,7 +22832,8 @@ Ext.Viewport = Ext.extend(Ext.Container, { this.fireEvent('resize', this, w, h, w, h); } }); -Ext.reg('viewport', Ext.Viewport);/** +Ext.reg('viewport', Ext.Viewport); +/** * @class Ext.Panel * @extends Ext.Container *
Panel is a container that has specific functionality and structural components that make @@ -21744,7 +23188,7 @@ var w = new Ext.Window({ *
event : Ext.EventObject
The click event.
*
toolEl : Ext.Element
The tool Element.
*
panel : Ext.Panel
The host Panel
- *
tc : Ext.Panel
The tool configuration object
+ *
tc : Object
The tool configuration object
*
*
stopEvent : Boolean
Defaults to true. Specify as false to allow click event to propagate.
*
scope : Object
The scope in which to call the handler.
@@ -21829,11 +23273,7 @@ var win = new Ext.Window({ * {@link Ext.layout.BorderLayout.Region BorderLayout.Region} * {@link Ext.layout.BorderLayout.Region#floatable floatable} config option. */ - /** - * @cfg {Boolean} autoScroll - * true to use overflow:'auto' on the panel's body element and show scroll bars automatically when - * necessary, false to clip any overflowing content (defaults to false). - */ + /** * @cfg {Mixed} floating *
This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this @@ -21869,33 +23309,6 @@ var win = new Ext.Window({ * false to disable the iframe shim in browsers which need one (defaults to true). * Note that this option only applies when {@link #floating} = true. */ - /** - * @cfg {String/Object} html - * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the panel's body - * content (defaults to ''). The HTML content is added by the Panel's {@link #afterRender} method, - * and so the document will not contain this HTML at the time the {@link #render} event is fired. - * This content is inserted into the body before any configured {@link #contentEl} is appended. - */ - /** - * @cfg {String} contentEl - *
Optional. Specify an existing HTML element, or the id of an existing HTML element to use as this Panel's - * {@link #body} content.
- *
- *
Description : - *
This config option is used to take an existing HTML element and place it in the body - * of a new panel (it simply moves the specified DOM element into the body element of the Panel - * after the Panel is rendered to use as the content (it is not going to be the actual panel itself).
- *
Notes : - *
The specified HTML element is appended to the Panel's {@link #body} Element by the - * Panel's afterRender method after any configured {@link #html HTML} has - * been inserted, and so the document will not contain this element at the time the - * {@link #render} event is fired.
- *
The specified HTML element used will not participate in any {@link Ext.Container#layout layout} - * scheme that the Panel may use. It is just HTML. Layouts operate on child {@link Ext.Container#items items}.
- *
Add either the x-hidden or the x-hide-display CSS class to - * prevent a brief flicker of the content before it is rendered to the panel.
- *
- */ /** * @cfg {Object/Array} keys * A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding} @@ -22065,7 +23478,16 @@ new Ext.Panel({ * footer, etc.). */ preventBodyReset : false, - + + /** + * @cfg {Number/String} padding + * A shortcut for setting a padding style on the body element. The value can either be + * a number to be applied to all sides, or a normal css string describing padding. + * Defaults to undefined. + * + */ + padding: undefined, + /** @cfg {String} resizeEvent * The event to listen to for resizing in layouts. Defaults to 'bodyresize'. */ @@ -22099,8 +23521,8 @@ new Ext.Panel({ * @event bodyresize * Fires after the Panel has been resized. * @param {Ext.Panel} p the Panel which has been resized. - * @param {Number} width The Panel's new width. - * @param {Number} height The Panel's new height. + * @param {Number} width The Panel body's new width. + * @param {Number} height The Panel body's new height. */ 'bodyresize', /** @@ -22184,19 +23606,18 @@ new Ext.Panel({ this.baseCls = 'x-plain'; } + + this.toolbars = []; // shortcuts if(this.tbar){ this.elements += ',tbar'; - if(Ext.isObject(this.tbar)){ - this.topToolbar = this.tbar; - } + this.topToolbar = this.createToolbar(this.tbar); delete this.tbar; + } if(this.bbar){ this.elements += ',bbar'; - if(Ext.isObject(this.bbar)){ - this.bottomToolbar = this.bbar; - } + this.bottomToolbar = this.createToolbar(this.bbar); delete this.bbar; } @@ -22213,33 +23634,59 @@ new Ext.Panel({ } if(this.buttons){ - this.elements += ',footer'; - var btns = this.buttons; - /** - * This Panel's Array of buttons as created from the {@link #buttons} - * config property. Read only. - * @type Array - * @property buttons - */ - this.buttons = []; - Ext.each(btns, function(btn){ - if(btn.render){ // button instance - this.buttons.push(btn); - }else if(btn.xtype){ - this.buttons.push(Ext.create(btn, 'button')); - }else{ - this.addButton(btn); - } - }, this); + this.fbar = this.buttons; + delete this.buttons; } if(this.fbar){ - this.elements += ',footer'; + this.createFbar(this.fbar); } if(this.autoLoad){ this.on('render', this.doAutoLoad, this, {delay:10}); } }, + // private + createFbar : function(fbar){ + var min = this.minButtonWidth; + this.elements += ',footer'; + this.fbar = this.createToolbar(fbar, { + buttonAlign: this.buttonAlign, + toolbarCls: 'x-panel-fbar', + enableOverflow: false, + defaults: function(c){ + return { + minWidth: c.minWidth || min + }; + } + }); + //@compat addButton and buttons could possibly be removed + //@target 4.0 + /** + * This Panel's Array of buttons as created from the {@link #buttons} + * config property. Read only. + * @type Array + * @property buttons + */ + this.fbar.items.each(function(c){ + c.minWidth = c.minWidth || this.minButtonWidth; + }, this); + this.buttons = this.fbar.items.items; + }, + + // private + createToolbar: function(tb, options){ + var result; + // Convert array to proper toolbar config + if(Ext.isArray(tb)){ + tb = { + items: tb + }; + } + result = tb.events ? Ext.apply(tb, options) : this.createComponent(Ext.apply({}, tb, options), 'toolbar'); + this.toolbars.push(result); + return result; + }, + // private createElement : function(name, pnode){ if(this[name]){ @@ -22273,23 +23720,23 @@ new Ext.Panel({ d = el.dom, bw, ts; - - + + if(this.collapsible && !this.hideCollapseTool){ this.tools = this.tools ? this.tools.slice(0) : []; this.tools[this.collapseFirst?'unshift':'push']({ id: 'toggle', handler : this.toggleCollapse, scope: this - }); + }); } - + if(this.tools){ ts = this.tools; this.elements += (this.header !== false) ? ',header' : ''; } this.tools = {}; - + el.addClass(this.baseCls); if(d.firstChild){ // existing markup this.header = el.down('.'+this.headerCls); @@ -22342,7 +23789,7 @@ new Ext.Panel({ * b) The last element is reported incorrectly when using a loadmask */ this.ft = Ext.get(this.bwrap.dom.lastChild); - this.mc = Ext.get(this.bwrap.dom.firstChild.firstChild.firstChild); + this.mc = Ext.get(mc); }else{ this.createElement('header', d); this.createElement('bwrap', d); @@ -22415,49 +23862,20 @@ new Ext.Panel({ this.addTool.apply(this, ts); } - if(this.buttons && this.buttons.length > 0){ - this.fbar = new Ext.Toolbar({ - items: this.buttons, - toolbarCls: 'x-panel-fbar' - }); - } - this.toolbars = []; + // Render Toolbars. if(this.fbar){ - this.fbar = Ext.create(this.fbar, 'toolbar'); - this.fbar.enableOverflow = false; - if(this.fbar.items){ - this.fbar.items.each(function(c){ - c.minWidth = c.minWidth || this.minButtonWidth; - }, this); - } - this.fbar.toolbarCls = 'x-panel-fbar'; - - var bct = this.footer.createChild({cls: 'x-panel-btns x-panel-btns-'+this.buttonAlign}); + this.footer.addClass('x-panel-btns'); this.fbar.ownerCt = this; - this.fbar.render(bct); - bct.createChild({cls:'x-clear'}); - this.toolbars.push(this.fbar); + this.fbar.render(this.footer); + this.footer.createChild({cls:'x-clear'}); } - if(this.tbar && this.topToolbar){ - if(Ext.isArray(this.topToolbar)){ - this.topToolbar = new Ext.Toolbar(this.topToolbar); - }else if(!this.topToolbar.events){ - this.topToolbar = Ext.create(this.topToolbar, 'toolbar'); - } this.topToolbar.ownerCt = this; this.topToolbar.render(this.tbar); - this.toolbars.push(this.topToolbar); } if(this.bbar && this.bottomToolbar){ - if(Ext.isArray(this.bottomToolbar)){ - this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar); - }else if(!this.bottomToolbar.events){ - this.bottomToolbar = Ext.create(this.bottomToolbar, 'toolbar'); - } this.bottomToolbar.ownerCt = this; this.bottomToolbar.render(this.bbar); - this.toolbars.push(this.bottomToolbar); } }, @@ -22491,14 +23909,12 @@ new Ext.Panel({ // private makeFloating : function(cfg){ this.floating = true; - this.el = new Ext.Layer( - Ext.isObject(cfg) ? cfg : { - shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides', - shadowOffset: this.shadowOffset, - constrain:false, - shim: this.shim === false ? false : undefined - }, this.el - ); + this.el = new Ext.Layer(Ext.apply({}, cfg, { + shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides', + shadowOffset: this.shadowOffset, + constrain:false, + shim: this.shim === false ? false : undefined + }), this.el); }, /** @@ -22523,27 +23939,23 @@ new Ext.Panel({ * @param {String/Object} config A valid {@link Ext.Button} config. A string will become the text for a default * button config, an object will be treated as a button config object. * @param {Function} handler The function to be called on button {@link Ext.Button#click} - * @param {Object} scope The scope to use for the button handler function + * @param {Object} scope The scope (this reference) in which the button handler function is executed. Defaults to the Button. * @return {Ext.Button} The button that was added */ addButton : function(config, handler, scope){ - var bc = { - handler: handler, - scope: scope, - minWidth: this.minButtonWidth, - hideParent:true - }; - if(Ext.isString(config)){ - bc.text = config; - }else{ - Ext.apply(bc, config); + if(!this.fbar){ + this.createFbar([]); } - var btn = new Ext.Button(bc); - if(!this.buttons){ - this.buttons = []; + if(handler){ + if(Ext.isString(config)){ + config = {text: config}; + } + config = Ext.apply({ + handler: handler, + scope: scope + }, config) } - this.buttons.push(btn); - return btn; + return this.fbar.add(config); }, // private @@ -22574,7 +23986,7 @@ new Ext.Panel({ var tc = a[i]; if(!this.tools[tc.id]){ var overCls = 'x-tool-'+tc.id+'-over'; - var t = this.toolTemplate.insertFirst((tc.align !== 'left') ? this[this.toolTarget] : this[this.toolTarget].child('span'), tc, true); + var t = this.toolTemplate.insertFirst(this[this.toolTarget], tc, true); this.tools[tc.id] = t; t.enableDisplayMode('block'); this.mon(t, 'click', this.createToolHandler(t, tc, overCls, this)); @@ -22599,6 +24011,7 @@ new Ext.Panel({ }, onLayout : function(shallow, force){ + Ext.Panel.superclass.onLayout.apply(this, arguments); if(this.hasLayout && this.toolbars.length > 0){ Ext.each(this.toolbars, function(tb){ tb.doLayout(undefined, force); @@ -22610,13 +24023,14 @@ new Ext.Panel({ syncHeight : function(){ var h = this.toolbarHeight, bd = this.body, - lsh = this.lastSize.height; - + lsh = this.lastSize.height, + sz; + if(this.autoHeight || !Ext.isDefined(lsh) || lsh == 'auto'){ return; } - - + + if(h != this.getToolbarHeight()){ h = Math.max(0, this.adjustBodyHeight(lsh - this.getFrameHeight())); bd.setHeight(h); @@ -22663,36 +24077,14 @@ new Ext.Panel({ if(this.title){ this.setTitle(this.title); } - this.setAutoScroll(); - if(this.html){ - this.body.update(Ext.isObject(this.html) ? - Ext.DomHelper.markup(this.html) : - this.html); - delete this.html; - } - if(this.contentEl){ - var ce = Ext.getDom(this.contentEl); - Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); - this.body.dom.appendChild(ce); - } - if(this.collapsed){ + Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last + if (this.collapsed) { this.collapsed = false; this.collapse(false); } - Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last this.initEvents(); }, - // private - setAutoScroll : function(){ - if(this.rendered && this.autoScroll){ - var el = this.body || this.el; - if(el){ - el.setOverflow('auto'); - } - } - }, - // private getKeyMap : function(){ if(!this.keyMap){ @@ -22718,10 +24110,9 @@ new Ext.Panel({ remove: this.syncHeight }); }, this); - if(!this.ownerCt){ - this.syncHeight(); - } + this.syncHeight(); } + }, // private @@ -22846,7 +24237,8 @@ new Ext.Panel({ afterExpand : function(anim){ this.collapsed = false; this.afterEffect(anim); - if(Ext.isDefined(this.deferLayout)){ + if (this.deferLayout) { + delete this.deferLayout; this.doLayout(true); } this.fireEvent('expand', this); @@ -22883,49 +24275,43 @@ new Ext.Panel({ onResize : function(w, h){ if(Ext.isDefined(w) || Ext.isDefined(h)){ if(!this.collapsed){ + // First, set the the Panel's body width. + // If we have auto-widthed it, get the resulting full offset width so we can size the Toolbars to match + // The Toolbars must not buffer this resize operation because we need to know their heights. + if(Ext.isNumber(w)){ - w = this.adjustBodyWidth(w - this.getFrameWidth()); - if(this.tbar){ - this.tbar.setWidth(w); - if(this.topToolbar){ - this.topToolbar.setSize(w); - } + this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth())); + } else if (w == 'auto') { + w = this.body.setWidth('auto').dom.offsetWidth; + } else { + w = this.body.dom.offsetWidth; + } + + if(this.tbar){ + this.tbar.setWidth(w); + if(this.topToolbar){ + this.topToolbar.setSize(w); } - if(this.bbar){ - this.bbar.setWidth(w); - if(this.bottomToolbar){ - this.bottomToolbar.setSize(w); + } + if(this.bbar){ + this.bbar.setWidth(w); + if(this.bottomToolbar){ + this.bottomToolbar.setSize(w); + // The bbar does not move on resize without this. + if (Ext.isIE) { + this.bbar.setStyle('position', 'static'); + this.bbar.setStyle('position', ''); } } + } + if(this.footer){ + this.footer.setWidth(w); if(this.fbar){ - var f = this.fbar, - fWidth = 1, - strict = Ext.isStrict; - if(this.buttonAlign == 'left'){ - fWidth = w - f.container.getFrameWidth('lr'); - }else{ - //center/right alignment off in webkit - if(Ext.isIE || Ext.isWebKit){ - //center alignment ok on webkit. - //right broken in both, center on IE - if(!(this.buttonAlign == 'center' && Ext.isWebKit) && (!strict || (!Ext.isIE8 && strict))){ - (function(){ - f.setWidth(f.getEl().child('.x-toolbar-ct').getWidth()); - }).defer(1); - }else{ - fWidth = 'auto'; - } - }else{ - fWidth = 'auto'; - } - } - f.setWidth(fWidth); + this.fbar.setSize(Ext.isIE ? (w - this.footer.getFrameWidth('lr')) : 'auto'); } - this.body.setWidth(w); - }else if(w == 'auto'){ - this.body.setWidth(w); } + // At this point, the Toolbars must be layed out for getFrameHeight to find a result. if(Ext.isNumber(h)){ h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight())); this.body.setHeight(h); @@ -22937,26 +24323,27 @@ new Ext.Panel({ this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight()); } }else{ + // Adds an event to set the correct height afterExpand. This accounts for the deferHeight flag in panel this.queuedBodySize = {width: w, height: h}; if(!this.queuedExpand && this.allowQueuedExpand !== false){ this.queuedExpand = true; this.on('expand', function(){ delete this.queuedExpand; this.onResize(this.queuedBodySize.width, this.queuedBodySize.height); - this.doLayout(); }, this, {single:true}); } } this.onBodyResize(w, h); } this.syncShadow(); + Ext.Panel.superclass.onResize.call(this); }, - + // private onBodyResize: function(w, h){ this.fireEvent('bodyresize', this, w, h); }, - + // private getToolbarHeight: function(){ var h = 0; @@ -23048,6 +24435,11 @@ new Ext.Panel({ return this.body; }, + // private + getContentTarget : function(){ + return this.body; + }, + /** *
Sets the title text for the panel and optionally the {@link #iconCls icon class}.
*
In order to be able to set the title, a header element must have been created @@ -23105,38 +24497,50 @@ panel.load({ // private beforeDestroy : function(){ + Ext.Panel.superclass.beforeDestroy.call(this); if(this.header){ this.header.removeAllListeners(); - if(this.headerAsText){ - Ext.Element.uncache(this.header.child('span')); - } - } - Ext.Element.uncache( - this.ft, - this.mc, - this.header, - this.tbar, - this.bbar, - this.footer, - this.body, - this.bwrap - ); + } if(this.tools){ for(var k in this.tools){ Ext.destroy(this.tools[k]); } } - if(this.buttons){ - for(var b in this.buttons){ - Ext.destroy(this.buttons[b]); + if(this.toolbars.length > 0){ + Ext.each(this.toolbars, function(tb){ + tb.un('afterlayout', this.syncHeight, this); + tb.un('remove', this.syncHeight, this); + }, this); + } + if(Ext.isArray(this.buttons)){ + while(this.buttons.length) { + Ext.destroy(this.buttons[0]); } } if(this.rendered){ - Ext.destroy(this.toolbars); + Ext.destroy( + this.ft, + this.header, + this.footer, + this.toolbars, + this.tbar, + this.bbar, + this.body, + this.mc, + this.bwrap + ); + if (this.fbar) { + Ext.destroy( + this.fbar, + this.fbar.el + ); + } }else{ - Ext.destroy(this.topToolbar, this.bottomToolbar); + Ext.destroy( + this.topToolbar, + this.bottomToolbar + ); } - Ext.Panel.superclass.beforeDestroy.call(this); }, // private @@ -23256,6 +24660,11 @@ Ext.extend(Ext.Editor, Ext.Component, { * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?"). */ alignment: "c-c?", + /** + * @cfg {Array} offsets + * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to [0, 0]. + */ + offsets: [0, 0], /** * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" * for bottom-right shadow (defaults to "frame") @@ -23389,7 +24798,7 @@ Ext.extend(Ext.Editor, Ext.Component, { this.cancelEdit(); } if(field.triggerBlur){ - field.triggerBlur(); + field.triggerBlur(); } } this.fireEvent('specialkey', field, e); @@ -23412,9 +24821,9 @@ Ext.extend(Ext.Editor, Ext.Component, { } if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){ this.startValue = v; + this.field.reset(); this.field.setValue(v); - this.doAutoSize(); - this.el.alignTo(this.boundEl, this.alignment); + this.realign(true); this.editing = true; this.show(); } @@ -23461,9 +24870,13 @@ Ext.extend(Ext.Editor, Ext.Component, { /** * Realigns the editor to the bound field based on the current alignment config value. + * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element. */ - realign : function(){ - this.el.alignTo(this.boundEl, this.alignment); + realign : function(autoSize){ + if(autoSize === true){ + this.doAutoSize(); + } + this.el.alignTo(this.boundEl, this.alignment, this.offsets); }, /** @@ -23519,7 +24932,7 @@ Ext.extend(Ext.Editor, Ext.Component, { this.fireEvent("canceledit", this, v, this.startValue); } }, - + // private hideEdit: function(remainVisible){ if(remainVisible !== true){ @@ -23530,7 +24943,8 @@ Ext.extend(Ext.Editor, Ext.Component, { // private onBlur : function(){ - if(this.allowBlur !== true && this.editing){ + // selectSameEditor flag allows the same editor to be started without onBlur firing on itself + if(this.allowBlur !== true && this.editing && this.selectSameEditor !== true){ this.completeEdit(); } }, @@ -23568,11 +24982,14 @@ Ext.extend(Ext.Editor, Ext.Component, { }, beforeDestroy : function(){ - Ext.destroy(this.field); - this.field = null; + Ext.destroyMembers(this, 'field'); + + delete this.parentEl; + delete this.boundEl; } }); -Ext.reg('editor', Ext.Editor);/** +Ext.reg('editor', Ext.Editor); +/** * @class Ext.ColorPalette * @extends Ext.Component * Simple color palette class for choosing colors. The palette can be rendered to any container.
@@ -23590,23 +25007,7 @@ cp.on('select', function(palette, selColor){ * @param {Object} config The config object * @xtype colorpalette */ -Ext.ColorPalette = function(config){ - Ext.ColorPalette.superclass.constructor.call(this, config); - this.addEvents( - /** - * @event select - * Fires when a color is selected - * @param {ColorPalette} this - * @param {String} color The 6-digit color hex code (without the # symbol) - */ - 'select' - ); - - if(this.handler){ - this.on('select', this.handler, this.scope, true); - } -}; -Ext.extend(Ext.ColorPalette, Ext.Component, { +Ext.ColorPalette = Ext.extend(Ext.Component, { /** * @cfg {String} tpl An existing XTemplate instance to be used in place of the default template for rendering the component. */ @@ -23621,6 +25022,11 @@ Ext.extend(Ext.ColorPalette, Ext.Component, { * the hex codes are case-sensitive. */ value : null, + /** + * @cfg {String} clickEvent + * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu). + * Defaults to 'click'. + */ clickEvent :'click', // private ctype : 'Ext.ColorPalette', @@ -23669,18 +25075,36 @@ cp.colors = ['000000', '993300', '333300']; * The scope (this reference) in which the {@link #handler} * function will be called. Defaults to this ColorPalette instance. */ + + // private + initComponent : function(){ + Ext.ColorPalette.superclass.initComponent.call(this); + this.addEvents( + /** + * @event select + * Fires when a color is selected + * @param {ColorPalette} this + * @param {String} color The 6-digit color hex code (without the # symbol) + */ + 'select' + ); + + if(this.handler){ + this.on('select', this.handler, this.scope, true); + } + }, // private onRender : function(container, position){ + this.autoEl = { + tag: 'div', + cls: this.itemCls + }; + Ext.ColorPalette.superclass.onRender.call(this, container, position); var t = this.tpl || new Ext.XTemplate( ' ' ); - var el = document.createElement('div'); - el.id = this.getId(); - el.className = this.itemCls; - t.overwrite(el, this.colors); - container.dom.insertBefore(el, position); - this.el = Ext.get(el); + t.overwrite(this.el, this.colors); this.mon(this.el, this.clickEvent, this.handleClick, this, {delegate: 'a'}); if(this.clickEvent != 'click'){ this.mon(this.el, 'click', Ext.emptyFn, this, {delegate: 'a', preventDefault: true}); @@ -23728,841 +25152,860 @@ cp.colors = ['000000', '993300', '333300']; */ }); Ext.reg('colorpalette', Ext.ColorPalette); -/** - * @class Ext.DatePicker - * @extends Ext.Component - * Simple date picker class. - * @constructor - * Create a new DatePicker - * @param {Object} config The config object - * @xtype datepicker - */ -Ext.DatePicker = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {String} todayText - * The text to display on the button that selects the current date (defaults to 'Today') - */ - todayText : 'Today', - /** - * @cfg {String} okText - * The text to display on the ok button (defaults to ' OK ' to give the user extra clicking room) - */ - okText : ' OK ', - /** - * @cfg {String} cancelText - * The text to display on the cancel button (defaults to 'Cancel') - */ - cancelText : 'Cancel', - /** - * @cfg {Function} handler - * Optional. A function that will handle the select event of this picker. - * The handler is passed the following parameters:
- *
picker : DatePicker
The Ext.DatePicker.
- *
date : Date
The selected date.
- *
- */ - /** - * @cfg {Object} scope - * The scope (this reference) in which the {@link #handler} - * function will be called. Defaults to this DatePicker instance. - */ - /** - * @cfg {String} todayTip - * The tooltip to display for the button that selects the current date (defaults to '{current date} (Spacebar)') - */ - todayTip : '{0} (Spacebar)', - /** - * @cfg {String} minText - * The error text to display if the minDate validation fails (defaults to 'This date is before the minimum date') - */ - minText : 'This date is before the minimum date', - /** - * @cfg {String} maxText - * The error text to display if the maxDate validation fails (defaults to 'This date is after the maximum date') - */ - maxText : 'This date is after the maximum date', - /** - * @cfg {String} format - * The default date format string which can be overriden for localization support. The format must be - * valid according to {@link Date#parseDate} (defaults to 'm/d/y'). - */ - format : 'm/d/y', - /** - * @cfg {String} disabledDaysText - * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled') - */ - disabledDaysText : 'Disabled', - /** - * @cfg {String} disabledDatesText - * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled') - */ - disabledDatesText : 'Disabled', - /** - * @cfg {Array} monthNames - * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames) - */ - monthNames : Date.monthNames, - /** - * @cfg {Array} dayNames - * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames) - */ - dayNames : Date.dayNames, - /** - * @cfg {String} nextText - * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)') - */ - nextText : 'Next Month (Control+Right)', - /** - * @cfg {String} prevText - * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)') - */ - prevText : 'Previous Month (Control+Left)', - /** - * @cfg {String} monthYearText - * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)') - */ - monthYearText : 'Choose a month (Control+Up/Down to move years)', - /** - * @cfg {Number} startDay - * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday) - */ - startDay : 0, - /** - * @cfg {Boolean} showToday - * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar - * that selects the current date (defaults to true). - */ - showToday : true, - /** - * @cfg {Date} minDate - * Minimum allowable date (JavaScript date object, defaults to null) - */ - /** - * @cfg {Date} maxDate - * Maximum allowable date (JavaScript date object, defaults to null) - */ - /** - * @cfg {Array} disabledDays - * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null). - */ - /** - * @cfg {RegExp} disabledDatesRE - * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates} - * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the - * disabledDates value. - */ - /** - * @cfg {Array} disabledDates - * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular - * expression so they are very powerful. Some examples: - *
- *
['03/08/2003', '09/16/2003'] would disable those exact dates
- *
['03/08', '09/16'] would disable those days for every year
- *
['^03/08'] would only match the beginning (useful if you are using short years)
- *
['03/../2006'] would disable every day in March 2006
- *
['^03'] would disable every day in every March
- *
- * Note that the format of the dates included in the array should exactly match the {@link #format} config. - * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to - * escape the dot when restricting dates. For example: ['03\\.08\\.03']. - */ - - // private - initComponent : function(){ - Ext.DatePicker.superclass.initComponent.call(this); - - this.value = this.value ? - this.value.clearTime(true) : new Date().clearTime(); - - this.addEvents( - /** - * @event select - * Fires when a date is selected - * @param {DatePicker} this - * @param {Date} date The selected date - */ - 'select' - ); - - if(this.handler){ - this.on('select', this.handler, this.scope || this); - } - - this.initDisabledDays(); - }, - - // private - initDisabledDays : function(){ - if(!this.disabledDatesRE && this.disabledDates){ - var dd = this.disabledDates, - len = dd.length - 1, - re = '(?:'; - - Ext.each(dd, function(d, i){ - re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i]; - if(i != len){ - re += '|'; - } - }, this); - this.disabledDatesRE = new RegExp(re + ')'); - } - }, - - /** - * Replaces any existing disabled dates with new values and refreshes the DatePicker. - * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config - * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates. - */ - setDisabledDates : function(dd){ - if(Ext.isArray(dd)){ - this.disabledDates = dd; - this.disabledDatesRE = null; - }else{ - this.disabledDatesRE = dd; - } - this.initDisabledDays(); - this.update(this.value, true); - }, - - /** - * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker. - * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config - * for details on supported values. - */ - setDisabledDays : function(dd){ - this.disabledDays = dd; - this.update(this.value, true); - }, - - /** - * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker. - * @param {Date} value The minimum date that can be selected - */ - setMinDate : function(dt){ - this.minDate = dt; - this.update(this.value, true); - }, - - /** - * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker. - * @param {Date} value The maximum date that can be selected - */ - setMaxDate : function(dt){ - this.maxDate = dt; - this.update(this.value, true); - }, - - /** - * Sets the value of the date field - * @param {Date} value The date to set - */ - setValue : function(value){ - this.value = value.clearTime(true); - this.update(this.value); - }, - - /** - * Gets the current selected value of the date field - * @return {Date} The selected date - */ - getValue : function(){ - return this.value; - }, - - // private - focus : function(){ - this.update(this.activeDate); - }, - - // private - onEnable: function(initial){ - Ext.DatePicker.superclass.onEnable.call(this); - this.doDisabled(false); - this.update(initial ? this.value : this.activeDate); - if(Ext.isIE){ - this.el.repaint(); - } - - }, - - // private - onDisable : function(){ - Ext.DatePicker.superclass.onDisable.call(this); - this.doDisabled(true); - if(Ext.isIE && !Ext.isIE8){ - /* Really strange problem in IE6/7, when disabled, have to explicitly - * repaint each of the nodes to get them to display correctly, simply - * calling repaint on the main element doesn't appear to be enough. - */ - Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){ - Ext.fly(el).repaint(); - }); - } - }, - - // private - doDisabled : function(disabled){ - this.keyNav.setDisabled(disabled); - this.prevRepeater.setDisabled(disabled); - this.nextRepeater.setDisabled(disabled); - if(this.showToday){ - this.todayKeyListener.setDisabled(disabled); - this.todayBtn.setDisabled(disabled); - } - }, - - // private - onRender : function(container, position){ - var m = [ - '', - '', - '', - this.showToday ? '' : '', - '

'], - dn = this.dayNames, - i; - for(i = 0; i < 7; i++){ - var d = this.startDay+i; - if(d > 6){ - d = d-7; - } - m.push(''); - } - m[m.length] = ''; - for(i = 0; i < 42; i++) { - if(i % 7 === 0 && i !== 0){ - m[m.length] = ''; - } - m[m.length] = ''; - } - m.push('
', dn[d].substr(0,1), '
'); - - var el = document.createElement('div'); - el.className = 'x-date-picker'; - el.innerHTML = m.join(''); - - container.dom.insertBefore(el, position); - - this.el = Ext.get(el); - this.eventEl = Ext.get(el.firstChild); - - this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), { - handler: this.showPrevMonth, - scope: this, - preventDefault:true, - stopDefault:true - }); - - this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), { - handler: this.showNextMonth, - scope: this, - preventDefault:true, - stopDefault:true - }); - - this.monthPicker = this.el.down('div.x-date-mp'); - this.monthPicker.enableDisplayMode('block'); - - this.keyNav = new Ext.KeyNav(this.eventEl, { - 'left' : function(e){ - if(e.ctrlKey){ - this.showPrevMonth(); - }else{ - this.update(this.activeDate.add('d', -1)); - } - }, - - 'right' : function(e){ - if(e.ctrlKey){ - this.showNextMonth(); - }else{ - this.update(this.activeDate.add('d', 1)); - } - }, - - 'up' : function(e){ - if(e.ctrlKey){ - this.showNextYear(); - }else{ - this.update(this.activeDate.add('d', -7)); - } - }, - - 'down' : function(e){ - if(e.ctrlKey){ - this.showPrevYear(); - }else{ - this.update(this.activeDate.add('d', 7)); - } - }, - - 'pageUp' : function(e){ - this.showNextMonth(); - }, - - 'pageDown' : function(e){ - this.showPrevMonth(); - }, - - 'enter' : function(e){ - e.stopPropagation(); - return true; - }, - - scope : this - }); - - this.el.unselectable(); - - this.cells = this.el.select('table.x-date-inner tbody td'); - this.textNodes = this.el.query('table.x-date-inner tbody span'); - - this.mbtn = new Ext.Button({ - text: ' ', - tooltip: this.monthYearText, - renderTo: this.el.child('td.x-date-middle', true) - }); - this.mbtn.el.child('em').addClass('x-btn-arrow'); - - if(this.showToday){ - this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday, this); - var today = (new Date()).dateFormat(this.format); - this.todayBtn = new Ext.Button({ - renderTo: this.el.child('td.x-date-bottom', true), - text: String.format(this.todayText, today), - tooltip: String.format(this.todayTip, today), - handler: this.selectToday, - scope: this - }); - } - this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this); - this.mon(this.eventEl, 'click', this.handleDateClick, this, {delegate: 'a.x-date-date'}); - this.mon(this.mbtn, 'click', this.showMonthPicker, this); - this.onEnable(true); - }, - - // private - createMonthPicker : function(){ - if(!this.monthPicker.dom.firstChild){ - var buf = ['']; - for(var i = 0; i < 6; i++){ - buf.push( - '', - '', - i === 0 ? - '' : - '' - ); - } - buf.push( - '', - '
', Date.getShortMonthName(i), ' ', Date.getShortMonthName(i + 6), '
' - ); - this.monthPicker.update(buf.join('')); - - this.mon(this.monthPicker, 'click', this.onMonthClick, this); - this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this); - - this.mpMonths = this.monthPicker.select('td.x-date-mp-month'); - this.mpYears = this.monthPicker.select('td.x-date-mp-year'); - - this.mpMonths.each(function(m, a, i){ - i += 1; - if((i%2) === 0){ - m.dom.xmonth = 5 + Math.round(i * 0.5); - }else{ - m.dom.xmonth = Math.round((i-1) * 0.5); - } - }); - } - }, - - // private - showMonthPicker : function(){ - if(!this.disabled){ - this.createMonthPicker(); - var size = this.el.getSize(); - this.monthPicker.setSize(size); - this.monthPicker.child('table').setSize(size); - - this.mpSelMonth = (this.activeDate || this.value).getMonth(); - this.updateMPMonth(this.mpSelMonth); - this.mpSelYear = (this.activeDate || this.value).getFullYear(); - this.updateMPYear(this.mpSelYear); - - this.monthPicker.slideIn('t', {duration:0.2}); - } - }, - - // private - updateMPYear : function(y){ - this.mpyear = y; - var ys = this.mpYears.elements; - for(var i = 1; i <= 10; i++){ - var td = ys[i-1], y2; - if((i%2) === 0){ - y2 = y + Math.round(i * 0.5); - td.firstChild.innerHTML = y2; - td.xyear = y2; - }else{ - y2 = y - (5-Math.round(i * 0.5)); - td.firstChild.innerHTML = y2; - td.xyear = y2; - } - this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel'); - } - }, - - // private - updateMPMonth : function(sm){ - this.mpMonths.each(function(m, a, i){ - m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel'); - }); - }, - - // private - selectMPMonth : function(m){ - - }, - - // private - onMonthClick : function(e, t){ - e.stopEvent(); - var el = new Ext.Element(t), pn; - if(el.is('button.x-date-mp-cancel')){ - this.hideMonthPicker(); - } - else if(el.is('button.x-date-mp-ok')){ - var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()); - if(d.getMonth() != this.mpSelMonth){ - // 'fix' the JS rolling date conversion if needed - d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth(); - } - this.update(d); - this.hideMonthPicker(); - } - else if((pn = el.up('td.x-date-mp-month', 2))){ - this.mpMonths.removeClass('x-date-mp-sel'); - pn.addClass('x-date-mp-sel'); - this.mpSelMonth = pn.dom.xmonth; - } - else if((pn = el.up('td.x-date-mp-year', 2))){ - this.mpYears.removeClass('x-date-mp-sel'); - pn.addClass('x-date-mp-sel'); - this.mpSelYear = pn.dom.xyear; - } - else if(el.is('a.x-date-mp-prev')){ - this.updateMPYear(this.mpyear-10); - } - else if(el.is('a.x-date-mp-next')){ - this.updateMPYear(this.mpyear+10); - } - }, - - // private - onMonthDblClick : function(e, t){ - e.stopEvent(); - var el = new Ext.Element(t), pn; - if((pn = el.up('td.x-date-mp-month', 2))){ - this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate())); - this.hideMonthPicker(); - } - else if((pn = el.up('td.x-date-mp-year', 2))){ - this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate())); - this.hideMonthPicker(); - } - }, - - // private - hideMonthPicker : function(disableAnim){ - if(this.monthPicker){ - if(disableAnim === true){ - this.monthPicker.hide(); - }else{ - this.monthPicker.slideOut('t', {duration:0.2}); - } - } - }, - - // private - showPrevMonth : function(e){ - this.update(this.activeDate.add('mo', -1)); - }, - - // private - showNextMonth : function(e){ - this.update(this.activeDate.add('mo', 1)); - }, - - // private - showPrevYear : function(){ - this.update(this.activeDate.add('y', -1)); - }, - - // private - showNextYear : function(){ - this.update(this.activeDate.add('y', 1)); - }, - - // private - handleMouseWheel : function(e){ - e.stopEvent(); - if(!this.disabled){ - var delta = e.getWheelDelta(); - if(delta > 0){ - this.showPrevMonth(); - } else if(delta < 0){ - this.showNextMonth(); - } - } - }, - - // private - handleDateClick : function(e, t){ - e.stopEvent(); - if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){ - this.setValue(new Date(t.dateValue)); - this.fireEvent('select', this, this.value); - } - }, - - // private - selectToday : function(){ - if(this.todayBtn && !this.todayBtn.disabled){ - this.setValue(new Date().clearTime()); - this.fireEvent('select', this, this.value); - } - }, - - // private - update : function(date, forceRefresh){ - if(this.rendered){ - var vd = this.activeDate, vis = this.isVisible(); - this.activeDate = date; - if(!forceRefresh && vd && this.el){ - var t = date.getTime(); - if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){ - this.cells.removeClass('x-date-selected'); - this.cells.each(function(c){ - if(c.dom.firstChild.dateValue == t){ - c.addClass('x-date-selected'); - if(vis){ - Ext.fly(c.dom.firstChild).focus(50); - } - return false; - } - }); - return; - } - } - var days = date.getDaysInMonth(), - firstOfMonth = date.getFirstDateOfMonth(), - startingPos = firstOfMonth.getDay()-this.startDay; - - if(startingPos < 0){ - startingPos += 7; - } - days += startingPos; - - var pm = date.add('mo', -1), - prevStart = pm.getDaysInMonth()-startingPos, - cells = this.cells.elements, - textEls = this.textNodes, - // convert everything to numbers so it's fast - day = 86400000, - d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(), - today = new Date().clearTime().getTime(), - sel = date.clearTime(true).getTime(), - min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY, - max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY, - ddMatch = this.disabledDatesRE, - ddText = this.disabledDatesText, - ddays = this.disabledDays ? this.disabledDays.join('') : false, - ddaysText = this.disabledDaysText, - format = this.format; - - if(this.showToday){ - var td = new Date().clearTime(), - disable = (td < min || td > max || - (ddMatch && format && ddMatch.test(td.dateFormat(format))) || - (ddays && ddays.indexOf(td.getDay()) != -1)); - - if(!this.disabled){ - this.todayBtn.setDisabled(disable); - this.todayKeyListener[disable ? 'disable' : 'enable'](); - } - } - - var setCellClass = function(cal, cell){ - cell.title = ''; - var t = d.getTime(); - cell.firstChild.dateValue = t; - if(t == today){ - cell.className += ' x-date-today'; - cell.title = cal.todayText; - } - if(t == sel){ - cell.className += ' x-date-selected'; - if(vis){ - Ext.fly(cell.firstChild).focus(50); - } - } - // disabling - if(t < min) { - cell.className = ' x-date-disabled'; - cell.title = cal.minText; - return; - } - if(t > max) { - cell.className = ' x-date-disabled'; - cell.title = cal.maxText; - return; - } - if(ddays){ - if(ddays.indexOf(d.getDay()) != -1){ - cell.title = ddaysText; - cell.className = ' x-date-disabled'; - } - } - if(ddMatch && format){ - var fvalue = d.dateFormat(format); - if(ddMatch.test(fvalue)){ - cell.title = ddText.replace('%0', fvalue); - cell.className = ' x-date-disabled'; - } - } - }; - - var i = 0; - for(; i < startingPos; i++) { - textEls[i].innerHTML = (++prevStart); - d.setDate(d.getDate()+1); - cells[i].className = 'x-date-prevday'; - setCellClass(this, cells[i]); - } - for(; i < days; i++){ - var intDay = i - startingPos + 1; - textEls[i].innerHTML = (intDay); - d.setDate(d.getDate()+1); - cells[i].className = 'x-date-active'; - setCellClass(this, cells[i]); - } - var extraDays = 0; - for(; i < 42; i++) { - textEls[i].innerHTML = (++extraDays); - d.setDate(d.getDate()+1); - cells[i].className = 'x-date-nextday'; - setCellClass(this, cells[i]); - } - - this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear()); - - if(!this.internalRender){ - var main = this.el.dom.firstChild, - w = main.offsetWidth; - this.el.setWidth(w + this.el.getBorderWidth('lr')); - Ext.fly(main).setWidth(w); - this.internalRender = true; - // opera does not respect the auto grow header center column - // then, after it gets a width opera refuses to recalculate - // without a second pass - if(Ext.isOpera && !this.secondPass){ - main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px'; - this.secondPass = true; - this.update.defer(10, this, [date]); - } - } - } - }, - - // private - beforeDestroy : function() { - if(this.rendered){ - this.keyNav.disable(); - this.keyNav = null; - Ext.destroy( - this.leftClickRpt, - this.rightClickRpt, - this.monthPicker, - this.eventEl, - this.mbtn, - this.todayBtn - ); - } - } - - /** - * @cfg {String} autoEl @hide - */ -}); - -Ext.reg('datepicker', Ext.DatePicker); /** - * @class Ext.LoadMask - * A simple utility class for generically masking elements while loading data. If the {@link #store} - * config option is specified, the masking will be automatically synchronized with the store's loading - * process and the mask element will be cached for reuse. For all other elements, this mask will replace the - * element's Updater load indicator and will be destroyed after the initial load. - *
Example usage:
- *
-// Basic mask: -var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); -myMask.show(); -
+ * @class Ext.DatePicker + * @extends Ext.Component + *
A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class + * to allow browsing and selection of valid dates.
+ *
All the string values documented below may be overridden by including an Ext locale file in + * your page.
* @constructor - * Create a new LoadMask - * @param {Mixed} el The element or DOM node, or its id + * Create a new DatePicker * @param {Object} config The config object + * @xtype datepicker */ -Ext.LoadMask = function(el, config){ - this.el = Ext.get(el); - Ext.apply(this, config); - if(this.store){ - this.store.on('beforeload', this.onBeforeLoad, this); - this.store.on('load', this.onLoad, this); - this.store.on('exception', this.onLoad, this); - this.removeMask = Ext.value(this.removeMask, false); - }else{ - var um = this.el.getUpdater(); - um.showLoadIndicator = false; // disable the default indicator - um.on('beforeupdate', this.onBeforeLoad, this); - um.on('update', this.onLoad, this); - um.on('failure', this.onLoad, this); - this.removeMask = Ext.value(this.removeMask, true); - } -}; - -Ext.LoadMask.prototype = { +Ext.DatePicker = Ext.extend(Ext.BoxComponent, { /** - * @cfg {Ext.data.Store} store - * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and - * hidden on either load sucess, or load fail. + * @cfg {String} todayText + * The text to display on the button that selects the current date (defaults to 'Today') */ + todayText : 'Today', /** - * @cfg {Boolean} removeMask - * True to create a single-use mask that is automatically destroyed after loading (useful for page loads), - * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false. + * @cfg {String} okText + * The text to display on the ok button (defaults to ' OK ' to give the user extra clicking room) */ + okText : ' OK ', /** - * @cfg {String} msg - * The text to display in a centered loading message box (defaults to 'Loading...') + * @cfg {String} cancelText + * The text to display on the cancel button (defaults to 'Cancel') */ - msg : 'Loading...', + cancelText : 'Cancel', /** - * @cfg {String} msgCls - * The CSS class to apply to the loading message element (defaults to "x-mask-loading") + * @cfg {Function} handler + * Optional. A function that will handle the select event of this picker. + * The handler is passed the following parameters:
+ *
picker : DatePicker
This DatePicker.
+ *
date : Date
The selected date.
+ *
*/ - msgCls : 'x-mask-loading', - /** - * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false) - * @type Boolean + * @cfg {Object} scope + * The scope (this reference) in which the {@link #handler} + * function will be called. Defaults to this DatePicker instance. + */ + /** + * @cfg {String} todayTip + * A string used to format the message for displaying in a tooltip over the button that + * selects the current date. Defaults to '{0} (Spacebar)' where + * the {0} token is replaced by today's date. */ - disabled: false, + todayTip : '{0} (Spacebar)', + /** + * @cfg {String} minText + * The error text to display if the minDate validation fails (defaults to 'This date is before the minimum date') + */ + minText : 'This date is before the minimum date', + /** + * @cfg {String} maxText + * The error text to display if the maxDate validation fails (defaults to 'This date is after the maximum date') + */ + maxText : 'This date is after the maximum date', + /** + * @cfg {String} format + * The default date format string which can be overriden for localization support. The format must be + * valid according to {@link Date#parseDate} (defaults to 'm/d/y'). + */ + format : 'm/d/y', + /** + * @cfg {String} disabledDaysText + * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled') + */ + disabledDaysText : 'Disabled', + /** + * @cfg {String} disabledDatesText + * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled') + */ + disabledDatesText : 'Disabled', + /** + * @cfg {Array} monthNames + * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames) + */ + monthNames : Date.monthNames, + /** + * @cfg {Array} dayNames + * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames) + */ + dayNames : Date.dayNames, + /** + * @cfg {String} nextText + * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)') + */ + nextText : 'Next Month (Control+Right)', + /** + * @cfg {String} prevText + * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)') + */ + prevText : 'Previous Month (Control+Left)', + /** + * @cfg {String} monthYearText + * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)') + */ + monthYearText : 'Choose a month (Control+Up/Down to move years)', + /** + * @cfg {Number} startDay + * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday) + */ + startDay : 0, + /** + * @cfg {Boolean} showToday + * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar + * that selects the current date (defaults to true). + */ + showToday : true, + /** + * @cfg {Date} minDate + * Minimum allowable date (JavaScript date object, defaults to null) + */ + /** + * @cfg {Date} maxDate + * Maximum allowable date (JavaScript date object, defaults to null) + */ + /** + * @cfg {Array} disabledDays + * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null). + */ + /** + * @cfg {RegExp} disabledDatesRE + * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates} + * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the + * disabledDates value. + */ + /** + * @cfg {Array} disabledDates + * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular + * expression so they are very powerful. Some examples: + *
+ *
['03/08/2003', '09/16/2003'] would disable those exact dates
+ *
['03/08', '09/16'] would disable those days for every year
+ *
['^03/08'] would only match the beginning (useful if you are using short years)
+ *
['03/../2006'] would disable every day in March 2006
+ *
['^03'] would disable every day in every March
+ *
+ * Note that the format of the dates included in the array should exactly match the {@link #format} config. + * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to + * escape the dot when restricting dates. For example: ['03\\.08\\.03']. + */ + + // private + // Set by other components to stop the picker focus being updated when the value changes. + focusOnSelect: true, + + // private + initComponent : function(){ + Ext.DatePicker.superclass.initComponent.call(this); + + this.value = this.value ? + this.value.clearTime(true) : new Date().clearTime(); + + this.addEvents( + /** + * @event select + * Fires when a date is selected + * @param {DatePicker} this DatePicker + * @param {Date} date The selected date + */ + 'select' + ); + + if(this.handler){ + this.on('select', this.handler, this.scope || this); + } + + this.initDisabledDays(); + }, + + // private + initDisabledDays : function(){ + if(!this.disabledDatesRE && this.disabledDates){ + var dd = this.disabledDates, + len = dd.length - 1, + re = '(?:'; + + Ext.each(dd, function(d, i){ + re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i]; + if(i != len){ + re += '|'; + } + }, this); + this.disabledDatesRE = new RegExp(re + ')'); + } + }, + + /** + * Replaces any existing disabled dates with new values and refreshes the DatePicker. + * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config + * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates. + */ + setDisabledDates : function(dd){ + if(Ext.isArray(dd)){ + this.disabledDates = dd; + this.disabledDatesRE = null; + }else{ + this.disabledDatesRE = dd; + } + this.initDisabledDays(); + this.update(this.value, true); + }, + + /** + * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker. + * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config + * for details on supported values. + */ + setDisabledDays : function(dd){ + this.disabledDays = dd; + this.update(this.value, true); + }, + + /** + * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker. + * @param {Date} value The minimum date that can be selected + */ + setMinDate : function(dt){ + this.minDate = dt; + this.update(this.value, true); + }, + + /** + * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker. + * @param {Date} value The maximum date that can be selected + */ + setMaxDate : function(dt){ + this.maxDate = dt; + this.update(this.value, true); + }, + + /** + * Sets the value of the date field + * @param {Date} value The date to set + */ + setValue : function(value){ + this.value = value.clearTime(true); + this.update(this.value); + }, + + /** + * Gets the current selected value of the date field + * @return {Date} The selected date + */ + getValue : function(){ + return this.value; + }, + + // private + focus : function(){ + this.update(this.activeDate); + }, + + // private + onEnable: function(initial){ + Ext.DatePicker.superclass.onEnable.call(this); + this.doDisabled(false); + this.update(initial ? this.value : this.activeDate); + if(Ext.isIE){ + this.el.repaint(); + } + + }, + + // private + onDisable : function(){ + Ext.DatePicker.superclass.onDisable.call(this); + this.doDisabled(true); + if(Ext.isIE && !Ext.isIE8){ + /* Really strange problem in IE6/7, when disabled, have to explicitly + * repaint each of the nodes to get them to display correctly, simply + * calling repaint on the main element doesn't appear to be enough. + */ + Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){ + Ext.fly(el).repaint(); + }); + } + }, + + // private + doDisabled : function(disabled){ + this.keyNav.setDisabled(disabled); + this.prevRepeater.setDisabled(disabled); + this.nextRepeater.setDisabled(disabled); + if(this.showToday){ + this.todayKeyListener.setDisabled(disabled); + this.todayBtn.setDisabled(disabled); + } + }, + + // private + onRender : function(container, position){ + var m = [ + '', + '', + '', + this.showToday ? '' : '', + '

'], + dn = this.dayNames, + i; + for(i = 0; i < 7; i++){ + var d = this.startDay+i; + if(d > 6){ + d = d-7; + } + m.push(''); + } + m[m.length] = ''; + for(i = 0; i < 42; i++) { + if(i % 7 === 0 && i !== 0){ + m[m.length] = ''; + } + m[m.length] = ''; + } + m.push('
', dn[d].substr(0,1), '
'); + + var el = document.createElement('div'); + el.className = 'x-date-picker'; + el.innerHTML = m.join(''); + + container.dom.insertBefore(el, position); + + this.el = Ext.get(el); + this.eventEl = Ext.get(el.firstChild); + + this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), { + handler: this.showPrevMonth, + scope: this, + preventDefault:true, + stopDefault:true + }); + + this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), { + handler: this.showNextMonth, + scope: this, + preventDefault:true, + stopDefault:true + }); + + this.monthPicker = this.el.down('div.x-date-mp'); + this.monthPicker.enableDisplayMode('block'); + + this.keyNav = new Ext.KeyNav(this.eventEl, { + 'left' : function(e){ + if(e.ctrlKey){ + this.showPrevMonth(); + }else{ + this.update(this.activeDate.add('d', -1)); + } + }, + + 'right' : function(e){ + if(e.ctrlKey){ + this.showNextMonth(); + }else{ + this.update(this.activeDate.add('d', 1)); + } + }, + + 'up' : function(e){ + if(e.ctrlKey){ + this.showNextYear(); + }else{ + this.update(this.activeDate.add('d', -7)); + } + }, + + 'down' : function(e){ + if(e.ctrlKey){ + this.showPrevYear(); + }else{ + this.update(this.activeDate.add('d', 7)); + } + }, + + 'pageUp' : function(e){ + this.showNextMonth(); + }, + + 'pageDown' : function(e){ + this.showPrevMonth(); + }, + + 'enter' : function(e){ + e.stopPropagation(); + return true; + }, + + scope : this + }); + + this.el.unselectable(); + + this.cells = this.el.select('table.x-date-inner tbody td'); + this.textNodes = this.el.query('table.x-date-inner tbody span'); + + this.mbtn = new Ext.Button({ + text: ' ', + tooltip: this.monthYearText, + renderTo: this.el.child('td.x-date-middle', true) + }); + this.mbtn.el.child('em').addClass('x-btn-arrow'); + + if(this.showToday){ + this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday, this); + var today = (new Date()).dateFormat(this.format); + this.todayBtn = new Ext.Button({ + renderTo: this.el.child('td.x-date-bottom', true), + text: String.format(this.todayText, today), + tooltip: String.format(this.todayTip, today), + handler: this.selectToday, + scope: this + }); + } + this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this); + this.mon(this.eventEl, 'click', this.handleDateClick, this, {delegate: 'a.x-date-date'}); + this.mon(this.mbtn, 'click', this.showMonthPicker, this); + this.onEnable(true); + }, + + // private + createMonthPicker : function(){ + if(!this.monthPicker.dom.firstChild){ + var buf = ['']; + for(var i = 0; i < 6; i++){ + buf.push( + '', + '', + i === 0 ? + '' : + '' + ); + } + buf.push( + '', + '
', Date.getShortMonthName(i), ' ', Date.getShortMonthName(i + 6), '
' + ); + this.monthPicker.update(buf.join('')); + + this.mon(this.monthPicker, 'click', this.onMonthClick, this); + this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this); + + this.mpMonths = this.monthPicker.select('td.x-date-mp-month'); + this.mpYears = this.monthPicker.select('td.x-date-mp-year'); + + this.mpMonths.each(function(m, a, i){ + i += 1; + if((i%2) === 0){ + m.dom.xmonth = 5 + Math.round(i * 0.5); + }else{ + m.dom.xmonth = Math.round((i-1) * 0.5); + } + }); + } + }, + + // private + showMonthPicker : function(){ + if(!this.disabled){ + this.createMonthPicker(); + var size = this.el.getSize(); + this.monthPicker.setSize(size); + this.monthPicker.child('table').setSize(size); + + this.mpSelMonth = (this.activeDate || this.value).getMonth(); + this.updateMPMonth(this.mpSelMonth); + this.mpSelYear = (this.activeDate || this.value).getFullYear(); + this.updateMPYear(this.mpSelYear); + + this.monthPicker.slideIn('t', {duration:0.2}); + } + }, + + // private + updateMPYear : function(y){ + this.mpyear = y; + var ys = this.mpYears.elements; + for(var i = 1; i <= 10; i++){ + var td = ys[i-1], y2; + if((i%2) === 0){ + y2 = y + Math.round(i * 0.5); + td.firstChild.innerHTML = y2; + td.xyear = y2; + }else{ + y2 = y - (5-Math.round(i * 0.5)); + td.firstChild.innerHTML = y2; + td.xyear = y2; + } + this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel'); + } + }, + + // private + updateMPMonth : function(sm){ + this.mpMonths.each(function(m, a, i){ + m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel'); + }); + }, + + // private + selectMPMonth : function(m){ + + }, + + // private + onMonthClick : function(e, t){ + e.stopEvent(); + var el = new Ext.Element(t), pn; + if(el.is('button.x-date-mp-cancel')){ + this.hideMonthPicker(); + } + else if(el.is('button.x-date-mp-ok')){ + var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()); + if(d.getMonth() != this.mpSelMonth){ + // 'fix' the JS rolling date conversion if needed + d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth(); + } + this.update(d); + this.hideMonthPicker(); + } + else if((pn = el.up('td.x-date-mp-month', 2))){ + this.mpMonths.removeClass('x-date-mp-sel'); + pn.addClass('x-date-mp-sel'); + this.mpSelMonth = pn.dom.xmonth; + } + else if((pn = el.up('td.x-date-mp-year', 2))){ + this.mpYears.removeClass('x-date-mp-sel'); + pn.addClass('x-date-mp-sel'); + this.mpSelYear = pn.dom.xyear; + } + else if(el.is('a.x-date-mp-prev')){ + this.updateMPYear(this.mpyear-10); + } + else if(el.is('a.x-date-mp-next')){ + this.updateMPYear(this.mpyear+10); + } + }, + + // private + onMonthDblClick : function(e, t){ + e.stopEvent(); + var el = new Ext.Element(t), pn; + if((pn = el.up('td.x-date-mp-month', 2))){ + this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate())); + this.hideMonthPicker(); + } + else if((pn = el.up('td.x-date-mp-year', 2))){ + this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate())); + this.hideMonthPicker(); + } + }, + + // private + hideMonthPicker : function(disableAnim){ + if(this.monthPicker){ + if(disableAnim === true){ + this.monthPicker.hide(); + }else{ + this.monthPicker.slideOut('t', {duration:0.2}); + } + } + }, + + // private + showPrevMonth : function(e){ + this.update(this.activeDate.add('mo', -1)); + }, + + // private + showNextMonth : function(e){ + this.update(this.activeDate.add('mo', 1)); + }, + + // private + showPrevYear : function(){ + this.update(this.activeDate.add('y', -1)); + }, + + // private + showNextYear : function(){ + this.update(this.activeDate.add('y', 1)); + }, + + // private + handleMouseWheel : function(e){ + e.stopEvent(); + if(!this.disabled){ + var delta = e.getWheelDelta(); + if(delta > 0){ + this.showPrevMonth(); + } else if(delta < 0){ + this.showNextMonth(); + } + } + }, + + // private + handleDateClick : function(e, t){ + e.stopEvent(); + if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){ + this.cancelFocus = this.focusOnSelect === false; + this.setValue(new Date(t.dateValue)); + delete this.cancelFocus; + this.fireEvent('select', this, this.value); + } + }, + + // private + selectToday : function(){ + if(this.todayBtn && !this.todayBtn.disabled){ + this.setValue(new Date().clearTime()); + this.fireEvent('select', this, this.value); + } + }, + + // private + update : function(date, forceRefresh){ + if(this.rendered){ + var vd = this.activeDate, vis = this.isVisible(); + this.activeDate = date; + if(!forceRefresh && vd && this.el){ + var t = date.getTime(); + if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){ + this.cells.removeClass('x-date-selected'); + this.cells.each(function(c){ + if(c.dom.firstChild.dateValue == t){ + c.addClass('x-date-selected'); + if(vis && !this.cancelFocus){ + Ext.fly(c.dom.firstChild).focus(50); + } + return false; + } + }, this); + return; + } + } + var days = date.getDaysInMonth(), + firstOfMonth = date.getFirstDateOfMonth(), + startingPos = firstOfMonth.getDay()-this.startDay; + + if(startingPos < 0){ + startingPos += 7; + } + days += startingPos; + + var pm = date.add('mo', -1), + prevStart = pm.getDaysInMonth()-startingPos, + cells = this.cells.elements, + textEls = this.textNodes, + // convert everything to numbers so it's fast + day = 86400000, + d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(), + today = new Date().clearTime().getTime(), + sel = date.clearTime(true).getTime(), + min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY, + max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY, + ddMatch = this.disabledDatesRE, + ddText = this.disabledDatesText, + ddays = this.disabledDays ? this.disabledDays.join('') : false, + ddaysText = this.disabledDaysText, + format = this.format; + + if(this.showToday){ + var td = new Date().clearTime(), + disable = (td < min || td > max || + (ddMatch && format && ddMatch.test(td.dateFormat(format))) || + (ddays && ddays.indexOf(td.getDay()) != -1)); + + if(!this.disabled){ + this.todayBtn.setDisabled(disable); + this.todayKeyListener[disable ? 'disable' : 'enable'](); + } + } + + var setCellClass = function(cal, cell){ + cell.title = ''; + var t = d.getTime(); + cell.firstChild.dateValue = t; + if(t == today){ + cell.className += ' x-date-today'; + cell.title = cal.todayText; + } + if(t == sel){ + cell.className += ' x-date-selected'; + if(vis){ + Ext.fly(cell.firstChild).focus(50); + } + } + // disabling + if(t < min) { + cell.className = ' x-date-disabled'; + cell.title = cal.minText; + return; + } + if(t > max) { + cell.className = ' x-date-disabled'; + cell.title = cal.maxText; + return; + } + if(ddays){ + if(ddays.indexOf(d.getDay()) != -1){ + cell.title = ddaysText; + cell.className = ' x-date-disabled'; + } + } + if(ddMatch && format){ + var fvalue = d.dateFormat(format); + if(ddMatch.test(fvalue)){ + cell.title = ddText.replace('%0', fvalue); + cell.className = ' x-date-disabled'; + } + } + }; + + var i = 0; + for(; i < startingPos; i++) { + textEls[i].innerHTML = (++prevStart); + d.setDate(d.getDate()+1); + cells[i].className = 'x-date-prevday'; + setCellClass(this, cells[i]); + } + for(; i < days; i++){ + var intDay = i - startingPos + 1; + textEls[i].innerHTML = (intDay); + d.setDate(d.getDate()+1); + cells[i].className = 'x-date-active'; + setCellClass(this, cells[i]); + } + var extraDays = 0; + for(; i < 42; i++) { + textEls[i].innerHTML = (++extraDays); + d.setDate(d.getDate()+1); + cells[i].className = 'x-date-nextday'; + setCellClass(this, cells[i]); + } + + this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear()); + + if(!this.internalRender){ + var main = this.el.dom.firstChild, + w = main.offsetWidth; + this.el.setWidth(w + this.el.getBorderWidth('lr')); + Ext.fly(main).setWidth(w); + this.internalRender = true; + // opera does not respect the auto grow header center column + // then, after it gets a width opera refuses to recalculate + // without a second pass + if(Ext.isOpera && !this.secondPass){ + main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px'; + this.secondPass = true; + this.update.defer(10, this, [date]); + } + } + } + }, + + // private + beforeDestroy : function() { + if(this.rendered){ + Ext.destroy( + this.keyNav, + this.monthPicker, + this.eventEl, + this.mbtn, + this.nextRepeater, + this.prevRepeater, + this.cells.el, + this.todayBtn + ); + delete this.textNodes; + delete this.cells.elements; + } + } + + /** + * @cfg {String} autoEl @hide + */ +}); + +Ext.reg('datepicker', Ext.DatePicker); +/** + * @class Ext.LoadMask + * A simple utility class for generically masking elements while loading data. If the {@link #store} + * config option is specified, the masking will be automatically synchronized with the store's loading + * process and the mask element will be cached for reuse. For all other elements, this mask will replace the + * element's Updater load indicator and will be destroyed after the initial load. + *
Example usage:
+ *
+// Basic mask: +var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); +myMask.show(); +
+ * @constructor + * Create a new LoadMask + * @param {Mixed} el The element or DOM node, or its id + * @param {Object} config The config object + */ +Ext.LoadMask = function(el, config){ + this.el = Ext.get(el); + Ext.apply(this, config); + if(this.store){ + this.store.on({ + scope: this, + beforeload: this.onBeforeLoad, + load: this.onLoad, + exception: this.onLoad + }); + this.removeMask = Ext.value(this.removeMask, false); + }else{ + var um = this.el.getUpdater(); + um.showLoadIndicator = false; // disable the default indicator + um.on({ + scope: this, + beforeupdate: this.onBeforeLoad, + update: this.onLoad, + failure: this.onLoad + }); + this.removeMask = Ext.value(this.removeMask, true); + } +}; + +Ext.LoadMask.prototype = { + /** + * @cfg {Ext.data.Store} store + * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and + * hidden on either load sucess, or load fail. + */ + /** + * @cfg {Boolean} removeMask + * True to create a single-use mask that is automatically destroyed after loading (useful for page loads), + * False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false. + */ + /** + * @cfg {String} msg + * The text to display in a centered loading message box (defaults to 'Loading...') + */ + msg : 'Loading...', + /** + * @cfg {String} msgCls + * The CSS class to apply to the loading message element (defaults to "x-mask-loading") + */ + msgCls : 'x-mask-loading', + + /** + * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false) + * @type Boolean + */ + disabled: false, /** * Disables the mask to prevent it from being displayed @@ -24635,20 +26078,20 @@ new Ext.Slider({ */ Ext.Slider = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {Number} value The value to initialize the slider with. Defaults to minValue. - */ - /** - * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false. - */ + /** + * @cfg {Number} value The value to initialize the slider with. Defaults to minValue. + */ + /** + * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false. + */ vertical: false, - /** - * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0. - */ + /** + * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0. + */ minValue: 0, - /** - * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100. - */ + /** + * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100. + */ maxValue: 100, /** * @cfg {Number/Boolean} decimalPrecision. @@ -24656,23 +26099,23 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { *
To disable rounding, configure as false.
*/ decimalPrecision: 0, - /** - * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead. - */ + /** + * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead. + */ keyIncrement: 1, - /** - * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'. - */ + /** + * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'. + */ increment: 0, - // private + // private clickRange: [5,15], - /** - * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true - */ + /** + * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true + */ clickToChange : true, - /** - * @cfg {Boolean} animate Turn on or off animation. Defaults to true - */ + /** + * @cfg {Boolean} animate Turn on or off animation. Defaults to true + */ animate: true, /** @@ -24693,54 +26136,54 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { * @event beforechange * Fires before the slider value is changed. By returning false from an event handler, * you can cancel the event and prevent the slider from changing. - * @param {Ext.Slider} slider The slider - * @param {Number} newValue The new value which the slider is being changed to. - * @param {Number} oldValue The old value which the slider was previously. + * @param {Ext.Slider} slider The slider + * @param {Number} newValue The new value which the slider is being changed to. + * @param {Number} oldValue The old value which the slider was previously. + */ + 'beforechange', + /** + * @event change + * Fires when the slider value is changed. + * @param {Ext.Slider} slider The slider + * @param {Number} newValue The new value which the slider has been changed to. + */ + 'change', + /** + * @event changecomplete + * Fires when the slider value is changed by the user and any drag operations have completed. + * @param {Ext.Slider} slider The slider + * @param {Number} newValue The new value which the slider has been changed to. */ - 'beforechange', - /** - * @event change - * Fires when the slider value is changed. - * @param {Ext.Slider} slider The slider - * @param {Number} newValue The new value which the slider has been changed to. - */ - 'change', - /** - * @event changecomplete - * Fires when the slider value is changed by the user and any drag operations have completed. - * @param {Ext.Slider} slider The slider - * @param {Number} newValue The new value which the slider has been changed to. - */ - 'changecomplete', - /** - * @event dragstart + 'changecomplete', + /** + * @event dragstart * Fires after a drag operation has started. - * @param {Ext.Slider} slider The slider - * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker - */ - 'dragstart', - /** - * @event drag + * @param {Ext.Slider} slider The slider + * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker + */ + 'dragstart', + /** + * @event drag * Fires continuously during the drag operation while the mouse is moving. - * @param {Ext.Slider} slider The slider - * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker - */ - 'drag', - /** - * @event dragend + * @param {Ext.Slider} slider The slider + * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker + */ + 'drag', + /** + * @event dragend * Fires after the drag operation has completed. - * @param {Ext.Slider} slider The slider - * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker - */ - 'dragend' - ); + * @param {Ext.Slider} slider The slider + * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker + */ + 'dragend' + ); if(this.vertical){ Ext.apply(this, Ext.Slider.Vertical); } }, - // private override + // private override onRender : function(){ this.autoEl = { cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'), @@ -24755,7 +26198,7 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { this.initEvents(); }, - // private override + // private override initEvents : function(){ this.thumb.addClassOnOver('x-slider-thumb-over'); this.mon(this.el, { @@ -24775,12 +26218,13 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { autoStart: 300 }); this.tracker.initEl(this.thumb); - this.on('beforedestroy', this.tracker.destroy, this.tracker); }, - // private override + // private override onMouseDown : function(e){ - if(this.disabled) {return;} + if(this.disabled){ + return; + } if(this.clickToChange && e.target != this.thumb.dom){ var local = this.innerEl.translatePoints(e.getXY()); this.onClickChange(local); @@ -24788,14 +26232,14 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { this.focus(); }, - // private + // private onClickChange : function(local){ if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){ this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true); } }, - // private + // private onKeyDown : function(e){ if(this.disabled){e.preventDefault();return;} var k = e.getKey(); @@ -24823,13 +26267,14 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private doSnap : function(value){ - if(!this.increment || this.increment == 1 || !value) { + if(!(this.increment && value)){ return value; } - var newValue = value, inc = this.increment; - var m = value % inc; + var newValue = value, + inc = this.increment, + m = value % inc; if(m != 0){ newValue -= m; if(m * 2 > inc){ @@ -24841,7 +26286,7 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { return newValue.constrain(this.minValue, this.maxValue); }, - // private + // private afterRender : function(){ Ext.Slider.superclass.afterRender.apply(this, arguments); if(this.value !== undefined){ @@ -24855,27 +26300,53 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private getRatio : function(){ - var w = this.innerEl.getWidth(); - var v = this.maxValue - this.minValue; + var w = this.innerEl.getWidth(), + v = this.maxValue - this.minValue; return v == 0 ? w : (w/v); }, - // private + // private normalizeValue : function(v){ v = this.doSnap(v); v = Ext.util.Format.round(v, this.decimalPrecision); v = v.constrain(this.minValue, this.maxValue); return v; }, + + /** + * Sets the minimum value for the slider instance. If the current value is less than the + * minimum value, the current value will be changed. + * @param {Number} val The new minimum value + */ + setMinValue : function(val){ + this.minValue = val; + this.syncThumb(); + if(this.value < val){ + this.setValue(val); + } + }, + + /** + * Sets the maximum value for the slider instance. If the current value is more than the + * maximum value, the current value will be changed. + * @param {Number} val The new maximum value + */ + setMaxValue : function(val){ + this.maxValue = val; + this.syncThumb(); + if(this.value > val){ + this.setValue(val); + } + }, - /** - * Programmatically sets the value of the Slider. Ensures that the value is constrained within - * the minValue and maxValue. - * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue) - * @param {Boolean} animate Turn on or off animation, defaults to true - */ + /** + * Programmatically sets the value of the Slider. Ensures that the value is constrained within + * the minValue and maxValue. + * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue) + * @param {Boolean} animate Turn on or off animation, defaults to true + */ setValue : function(v, animate, changeComplete){ v = this.normalizeValue(v); if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){ @@ -24888,18 +26359,18 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private translateValue : function(v){ var ratio = this.getRatio(); - return (v * ratio)-(this.minValue * ratio)-this.halfThumb; + return (v * ratio) - (this.minValue * ratio) - this.halfThumb; }, - reverseValue : function(pos){ + reverseValue : function(pos){ var ratio = this.getRatio(); - return (pos+this.halfThumb+(this.minValue * ratio))/ratio; + return (pos + (this.minValue * ratio)) / ratio; }, - // private + // private moveThumb: function(v, animate){ if(!animate || this.animate === false){ this.thumb.setLeft(v); @@ -24908,17 +26379,17 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private focus : function(){ this.focusEl.focus(10); }, - // private + // private onBeforeDragStart : function(e){ return !this.disabled; }, - // private + // private onDragStart: function(e){ this.thumb.addClass('x-slider-thumb-drag'); this.dragging = true; @@ -24926,14 +26397,14 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { this.fireEvent('dragstart', this, e); }, - // private + // private onDrag: function(e){ var pos = this.innerEl.translatePoints(this.tracker.getXY()); this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false); this.fireEvent('drag', this, e); }, - // private + // private onDragEnd: function(e){ this.thumb.removeClass('x-slider-thumb-drag'); this.dragging = false; @@ -24943,12 +26414,13 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - // private + // private onResize : function(w, h){ this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r'))); this.syncThumb(); + Ext.Slider.superclass.onResize.apply(this, arguments); }, - + //private onDisable: function(){ Ext.Slider.superclass.onDisable.call(this); @@ -24960,26 +26432,26 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { this.thumb.hide(); this.innerEl.addClass(this.disabledClass).dom.disabled = true; if (!this.thumbHolder){ - this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass}); + this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass}); } this.thumbHolder.show().setXY(xy); } }, - + //private onEnable: function(){ Ext.Slider.superclass.onEnable.call(this); this.thumb.removeClass(this.disabledClass); if(Ext.isIE){ this.innerEl.removeClass(this.disabledClass).dom.disabled = false; - if (this.thumbHolder){ + if(this.thumbHolder){ this.thumbHolder.hide(); } this.thumb.show(); this.syncThumb(); } }, - + /** * Synchronizes the thumb position to the proper proportion of the total component width based * on the current slider {@link #value}. This will be called automatically when the Slider @@ -24992,12 +26464,18 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, { } }, - /** - * Returns the current value of the slider - * @return {Number} The current value of the slider - */ + /** + * Returns the current value of the slider + * @return {Number} The current value of the slider + */ getValue : function(){ return this.value; + }, + + // private + beforeDestroy : function(){ + Ext.destroyMembers(this, 'endEl', 'innerEl', 'thumb', 'halfThumb', 'focusEl', 'tracker', 'thumbHolder'); + Ext.Slider.superclass.beforeDestroy.call(this); } }); Ext.reg('slider', Ext.Slider); @@ -25010,8 +26488,8 @@ Ext.Slider.Vertical = { }, getRatio : function(){ - var h = this.innerEl.getHeight(); - var v = this.maxValue - this.minValue; + var h = this.innerEl.getHeight(), + v = this.maxValue - this.minValue; return h/v; }, @@ -25024,15 +26502,15 @@ Ext.Slider.Vertical = { }, onDrag: function(e){ - var pos = this.innerEl.translatePoints(this.tracker.getXY()); - var bottom = this.innerEl.getHeight()-pos.top; + var pos = this.innerEl.translatePoints(this.tracker.getXY()), + bottom = this.innerEl.getHeight()-pos.top; this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false); this.fireEvent('drag', this, e); }, onClickChange : function(local){ if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){ - var bottom = this.innerEl.getHeight()-local.top; + var bottom = this.innerEl.getHeight() - local.top; this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true); } } @@ -25152,7 +26630,7 @@ Ext.ProgressBar = Ext.extend(Ext.BoxComponent, { if(text){ this.updateText(text); } - if(this.rendered){ + if(this.rendered && !this.isDestroyed){ var w = Math.floor(value*this.el.dom.firstChild.offsetWidth); this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate)); if(this.textTopEl){ @@ -25308,17 +26786,33 @@ myAction.on('complete', function(){ if(this.textTopEl){ this.textTopEl.addClass('x-hidden'); } + this.clearTimer(); + if(hide === true){ + this.hide(); + } + return this; + }, + + // private + clearTimer : function(){ if(this.waitTimer){ this.waitTimer.onStop = null; //prevent recursion Ext.TaskMgr.stop(this.waitTimer); this.waitTimer = null; } - if(hide === true){ - this.hide(); - } - return this; - } -}); + }, + + onDestroy: function(){ + this.clearTimer(); + if(this.rendered){ + if(this.textEl.isComposite){ + this.textEl.clear(); + } + Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl'); + } + Ext.ProgressBar.superclass.onDestroy.call(this); + } +}); Ext.reg('progress', Ext.ProgressBar);/* * These classes are derivatives of the similarly named classes in the YUI Library. * The original license: @@ -25834,14 +27328,15 @@ Ext.dd.DragDrop.prototype = { * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders) */ constrainTo : function(constrainTo, pad, inContent){ - if(typeof pad == "number"){ + if(Ext.isNumber(pad)){ pad = {left: pad, right:pad, top:pad, bottom:pad}; } pad = pad || this.defaultPadding; - var b = Ext.get(this.getEl()).getBox(); - var ce = Ext.get(constrainTo); - var s = ce.getScroll(); - var c, cd = ce.dom; + var b = Ext.get(this.getEl()).getBox(), + ce = Ext.get(constrainTo), + s = ce.getScroll(), + c, + cd = ce.dom; if(cd == document.body){ c = { x: s.left, y: s.top, width: Ext.lib.Dom.getViewWidth(), height: Ext.lib.Dom.getViewHeight()}; }else{ @@ -25850,8 +27345,8 @@ Ext.dd.DragDrop.prototype = { } - var topSpace = b.y - c.y; - var leftSpace = b.x - c.x; + var topSpace = b.y - c.y, + leftSpace = b.x - c.x; this.resetConstraints(); this.setXConstraint(leftSpace - (pad.left||0), // left @@ -26751,7 +28246,7 @@ Ext.dd.DragDropMgr = function() { /** * The number of milliseconds after the mousedown event to initiate the - * drag if we don't get a mouseup event. Default=1000 + * drag if we don't get a mouseup event. Default=350 * @property clickTimeThresh * @type int * @static @@ -27582,7 +29077,7 @@ Ext.dd.DragDropMgr = function() { /** * Inner class for cached elements - * @class DragDropMgr.ElementWrapper + * @class Ext.dd.DragDropMgr.ElementWrapper * @for DragDropMgr * @private * @deprecated @@ -28301,63 +29796,177 @@ Ext.dd.DDTarget = function(id, sGroup, config) { // Ext.dd.DDTarget.prototype = new Ext.dd.DragDrop(); Ext.extend(Ext.dd.DDTarget, Ext.dd.DragDrop, { + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + getDragEl: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + isValidHandleChild: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + startDrag: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + endDrag: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + onDrag: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + onDragDrop: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + onDragEnter: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + onDragOut: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + onDragOver: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + onInvalidDrop: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + onMouseDown: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + onMouseUp: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + setXConstraint: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + setYConstraint: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + resetConstraints: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + clearConstraints: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + clearTicks: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + setInitPosition: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + setDragElId: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + setHandleElId: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + setOuterHandleElId: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + addInvalidHandleClass: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + addInvalidHandleId: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + addInvalidHandleType: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + removeInvalidHandleClass: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + removeInvalidHandleId: Ext.emptyFn, + /** + * @hide + * Overridden and disabled. A DDTarget does not support being dragged. + * @method + */ + removeInvalidHandleType: Ext.emptyFn, + toString: function() { return ("DDTarget " + this.id); } -}); -/** +});/** * @class Ext.dd.DragTracker * @extends Ext.util.Observable */ -Ext.dd.DragTracker = function(config){ - Ext.apply(this, config); - this.addEvents( - /** - * @event mousedown - * @param {Object} this - * @param {Object} e event object - */ - 'mousedown', - /** - * @event mouseup - * @param {Object} this - * @param {Object} e event object - */ - 'mouseup', - /** - * @event mousemove - * @param {Object} this - * @param {Object} e event object - */ - 'mousemove', - /** - * @event dragstart - * @param {Object} this - * @param {Object} startXY the page coordinates of the event - */ - 'dragstart', - /** - * @event dragend - * @param {Object} this - * @param {Object} e event object - */ - 'dragend', - /** - * @event drag - * @param {Object} this - * @param {Object} e event object - */ - 'drag' - ); - - this.dragRegion = new Ext.lib.Region(0,0,0,0); - - if(this.el){ - this.initEl(this.el); - } -} - -Ext.extend(Ext.dd.DragTracker, Ext.util.Observable, { +Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { /** * @cfg {Boolean} active * Defaults to false. @@ -28374,6 +29983,55 @@ Ext.extend(Ext.dd.DragTracker, Ext.util.Observable, { * Specify a Number for the number of milliseconds to defer trigger start. */ autoStart: false, + + constructor : function(config){ + Ext.apply(this, config); + this.addEvents( + /** + * @event mousedown + * @param {Object} this + * @param {Object} e event object + */ + 'mousedown', + /** + * @event mouseup + * @param {Object} this + * @param {Object} e event object + */ + 'mouseup', + /** + * @event mousemove + * @param {Object} this + * @param {Object} e event object + */ + 'mousemove', + /** + * @event dragstart + * @param {Object} this + * @param {Object} startXY the page coordinates of the event + */ + 'dragstart', + /** + * @event dragend + * @param {Object} this + * @param {Object} e event object + */ + 'dragend', + /** + * @event drag + * @param {Object} this + * @param {Object} e event object + */ + 'drag' + ); + + this.dragRegion = new Ext.lib.Region(0,0,0,0); + + if(this.el){ + this.initEl(this.el); + } + Ext.dd.DragTracker.superclass.constructor.call(this, config); + }, initEl: function(el){ this.el = Ext.get(el); @@ -28962,8 +30620,8 @@ Ext.dd.StatusProxy.prototype = { * Causes the proxy to return to its position of origin via an animation. Should be called after an * invalid drop operation by the item being dragged. * @param {Array} xy The XY position of the element ([x, y]) - * @param {Function} callback The function to call after the repair is complete - * @param {Object} scope The scope in which to execute the callback + * @param {Function} callback The function to call after the repair is complete. + * @param {Object} scope The scope (this reference) in which the callback function is executed. Defaults to the browser window. */ repair : function(xy, callback, scope){ this.callback = callback; @@ -28992,6 +30650,10 @@ Ext.dd.StatusProxy.prototype = { } this.callback = null; this.scope = null; + }, + + destroy: function(){ + Ext.destroy(this.ghost, this.el); } };/** * @class Ext.dd.DragSource @@ -29350,7 +31012,12 @@ Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, { // private - pin to cursor autoOffset : function(x, y) { this.setDelta(-12, -20); - } + }, + + destroy: function(){ + Ext.dd.DragSource.superclass.destroy.call(this); + Ext.destroy(this.proxy); + } });/** * @class Ext.dd.DropTarget * @extends Ext.dd.DDTarget @@ -29476,8 +31143,8 @@ Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, { * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a * {@link Ext.DomQuery} selector. For example, to make the nodes of a DataView draggable, use the following * technique. Knowledge of the use of the DataView is required:
-myDataView.on('render', function() { - myDataView.dragZone = new Ext.dd.DragZone(myDataView.getEl(), { +myDataView.on('render', function(v) { + myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), { // On receipt of a mousedown event, see if it is within a DataView node. // Return a drag data object if so. @@ -29485,7 +31152,7 @@ myDataView.on('render', function() { // Use the DataView's own itemSelector (a mandatory property) to // test if the mousedown is within one of the DataView's nodes. - var sourceEl = e.getTarget(myDataView.itemSelector, 10); + var sourceEl = e.getTarget(v.itemSelector, 10); // If the mousedown is within a DataView node, clone the node to produce // a ddel element for use by the drag proxy. Also add application data @@ -29497,8 +31164,8 @@ myDataView.on('render', function() { ddel: d, sourceEl: sourceEl, repairXY: Ext.fly(sourceEl).getXY(), - sourceStore: myDataView.store, - draggedRecord: v.getRecord(sourceEl) + sourceStore: v.store, + draggedRecord: v.{@link Ext.DataView#getRecord getRecord}(sourceEl) } } }, @@ -30044,7 +31711,8 @@ new Ext.data.HttpProxy({ proxy.api[action] = proxy.api[action] || proxy.url || proxy.directFn; if (typeof(proxy.api[action]) == 'string') { proxy.api[action] = { - url: proxy.api[action] + url: proxy.api[action], + method: (proxy.restful === true) ? Ext.data.Api.restActions[action] : undefined }; } } @@ -30058,7 +31726,8 @@ new Ext.data.HttpProxy({ restify : function(proxy) { proxy.restful = true; for (var verb in this.restActions) { - proxy.api[this.actions[verb]].method = this.restActions[verb]; + proxy.api[this.actions[verb]].method || + (proxy.api[this.actions[verb]].method = this.restActions[verb]); } // TODO: perhaps move this interceptor elsewhere? like into DataProxy, perhaps? Placed here // to satisfy initial 3.0 final release of REST features. @@ -30070,16 +31739,18 @@ new Ext.data.HttpProxy({ }); switch (response.status) { - case 200: // standard 200 response, send control back to HttpProxy#onWrite + case 200: // standard 200 response, send control back to HttpProxy#onWrite by returning true from this intercepted #onWrite return true; break; case 201: // entity created but no response returned - //res[reader.meta.successProperty] = true; - res.success = true; + if (Ext.isEmpty(res.raw.responseText)) { + res.success = true; + } else { + //if the response contains data, treat it like a 200 + return true; + } break; case 204: // no-content. Create a fake response. - //res[reader.meta.successProperty] = true; - //res[reader.meta.root] = null; res.success = true; res.data = null; break; @@ -30087,13 +31758,6 @@ new Ext.data.HttpProxy({ return true; break; } - /* - if (res[reader.meta.successProperty] === true) { - this.fireEvent("write", this, action, res[reader.meta.root], res, rs, o.request.arg); - } else { - this.fireEvent('exception', this, 'remote', action, o, res, rs); - } - */ if (res.success === true) { this.fireEvent("write", this, action, res.data, res, rs, o.request.arg); } else { @@ -30130,7 +31794,7 @@ Ext.data.Response.prototype = { return this.success; }, getStatus : function() { - return this.status + return this.status; }, getRoot : function() { return this.root; @@ -30269,10 +31933,11 @@ Ext.data.SortTypes = { * @param {Object} data (Optional) An object, the properties of which provide values for the new Record's * fields. If not specified the {@link Ext.data.Field#defaultValue defaultValue} * for each field will be assigned. - * @param {Object} id (Optional) The id of the Record. This id should be unique, and is used by the - * {@link Ext.data.Store} object which owns the Record to index its collection of Records. If - * an id is not specified a {@link #phantom} Record will be created - * with an {@link #Record.id automatically generated id}. + * @param {Object} id (Optional) The id of the Record. The id is used by the + * {@link Ext.data.Store} object which owns the Record to index its collection + * of Records (therefore this id should be unique within each store). If an + * id is not specified a {@link #phantom} + * Record will be created with an {@link #Record.id automatically generated id}. */ Ext.data.Record = function(data, id){ // if no id, call the auto id method @@ -30378,22 +32043,34 @@ Ext.data.Record.prototype = { * @property id * @type {Object} */ + /** + * Only present if this Record was created by an {@link Ext.data.XmlReader XmlReader}. + * The XML element which was the source of the data for this Record. + * @property node + * @type {XMLElement} + */ + /** + * Only present if this Record was created by an {@link Ext.data.ArrayReader ArrayReader} or a {@link Ext.data.JsonReader JsonReader}. + * The Array or object which was the source of the data for this Record. + * @property json + * @type {Array|Object} + */ /** * Readonly flag - true if this Record has been modified. * @type Boolean */ dirty : false, editing : false, - error: null, + error : null, /** * This object contains a key and value storing the original values of all modified * fields or is null if no fields have been modified. * @property modified * @type {Object} */ - modified: null, + modified : null, /** - * false when the record does not yet exist in a server-side database (see + * true when the record does not yet exist in a server-side database (see * {@link #markDirty}). Any record which has a real database pk set as its id property * is NOT a phantom -- it's real. * @property phantom @@ -30431,7 +32108,7 @@ rec.{@link #commit}(); // update the record in the store, bypass setting dirty flag, // and do not store the change in the {@link Ext.data.Store#getModifiedRecords modified records} -rec.{@link #data}['firstname'] = 'Wilma'); // updates record, but not the view +rec.{@link #data}['firstname'] = 'Wilma'; // updates record, but not the view rec.{@link #commit}(); // updates the view *
* Notes:
@@ -30443,20 +32120,18 @@ rec.{@link #commit}(); // updates the view * event fire. *
* @param {String} name The {@link Ext.data.Field#name name of the field} to set. - * @param {Object} value The value to set the field to. + * @param {String/Object/Array} value The value to set the field to. */ set : function(name, value){ - var isObj = (typeof value === 'object'); - if(!isObj && String(this.data[name]) === String(value)){ - return; - } else if (isObj && Ext.encode(this.data[name]) === Ext.encode(value)) { + var encode = Ext.isPrimitive(value) ? String : Ext.encode; + if(encode(this.data[name]) == encode(value)) { return; - } + } this.dirty = true; if(!this.modified){ this.modified = {}; } - if(typeof this.modified[name] == 'undefined'){ + if(this.modified[name] === undefined){ this.modified[name] = this.data[name]; } this.data[name] = value; @@ -30466,21 +32141,21 @@ rec.{@link #commit}(); // updates the view }, // private - afterEdit: function(){ + afterEdit : function(){ if(this.store){ this.store.afterEdit(this); } }, // private - afterReject: function(){ + afterReject : function(){ if(this.store){ this.store.afterReject(this); } }, // private - afterCommit: function(){ + afterCommit : function(){ if(this.store){ this.store.afterCommit(this); } @@ -30590,10 +32265,13 @@ rec.{@link #commit}(); // updates the view }, /** - * Creates a copy of this Record. - * @param {String} id (optional) A new Record id, defaults to {@link #Record.id autogenerating an id}. - * Note: if an id is not specified the copy created will be a - * {@link #phantom} Record. + * Creates a copy (clone) of this Record. + * @param {String} id (optional) A new Record id, defaults to the id + * of the record being copied. See {@link #id}. + * To generate a phantom record with a new id use:
+var rec = record.copy(); // clone the record +Ext.data.Record.id(rec); // automatically generate a unique sequential id + *
* @return {Record} */ copy : function(newId) { @@ -30640,7 +32318,8 @@ rec.{@link #commit}(); // updates the view this.modified[f.name] = this.data[f.name]; },this); } -};/** +}; +/** * @class Ext.StoreMgr * @extends Ext.util.MixedCollection * The default global group of stores. @@ -30777,282 +32456,7 @@ myStore.{@link #insert}(0, r); // insert a new record into the store (also see { * and read the data into Records. * @xtype store */ -Ext.data.Store = function(config){ - this.data = new Ext.util.MixedCollection(false); - this.data.getKey = function(o){ - return o.id; - }; - /** - * See the {@link #baseParams corresponding configuration option} - * for a description of this property. - * To modify this property see {@link #setBaseParam}. - * @property - */ - this.baseParams = {}; - - // temporary removed-records cache - this.removed = []; - - if(config && config.data){ - this.inlineData = config.data; - delete config.data; - } - - Ext.apply(this, config); - - this.paramNames = Ext.applyIf(this.paramNames || {}, this.defaultParamNames); - - if(this.url && !this.proxy){ - this.proxy = new Ext.data.HttpProxy({url: this.url}); - } - // If Store is RESTful, so too is the DataProxy - if (this.restful === true && this.proxy) { - // When operating RESTfully, a unique transaction is generated for each record. - this.batch = false; - Ext.data.Api.restify(this.proxy); - } - - if(this.reader){ // reader passed - if(!this.recordType){ - this.recordType = this.reader.recordType; - } - if(this.reader.onMetaChange){ - //this.reader.onMetaChange = this.onMetaChange.createDelegate(this); - this.reader.onMetaChange = this.reader.onMetaChange.createSequence(this.onMetaChange, this); - } - if (this.writer) { // writer passed - this.writer.meta = this.reader.meta; - this.pruneModifiedRecords = true; - } - } - - /** - * The {@link Ext.data.Record Record} constructor as supplied to (or created by) the - * {@link Ext.data.DataReader Reader}. Read-only. - *
If the Reader was constructed by passing in an Array of {@link Ext.data.Field} definition objects, - * instead of a Record constructor, it will implicitly create a Record constructor from that Array (see - * {@link Ext.data.Record}.{@link Ext.data.Record#create create} for additional details).
- *
This property may be used to create new Records of the type held in this Store, for example:
-// create the data store -var store = new Ext.data.ArrayStore({ - autoDestroy: true, - fields: [ - {name: 'company'}, - {name: 'price', type: 'float'}, - {name: 'change', type: 'float'}, - {name: 'pctChange', type: 'float'}, - {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} - ] -}); -store.loadData(myData); - -// create the Grid -var grid = new Ext.grid.EditorGridPanel({ - store: store, - colModel: new Ext.grid.ColumnModel({ - columns: [ - {id:'company', header: 'Company', width: 160, dataIndex: 'company'}, - {header: 'Price', renderer: 'usMoney', dataIndex: 'price'}, - {header: 'Change', renderer: change, dataIndex: 'change'}, - {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'}, - {header: 'Last Updated', width: 85, - renderer: Ext.util.Format.dateRenderer('m/d/Y'), - dataIndex: 'lastChange'} - ], - defaults: { - sortable: true, - width: 75 - } - }), - autoExpandColumn: 'company', // match the id specified in the column model - height:350, - width:600, - title:'Array Grid', - tbar: [{ - text: 'Add Record', - handler : function(){ - var defaultData = { - change: 0, - company: 'New Company', - lastChange: (new Date()).clearTime(), - pctChange: 0, - price: 10 - }; - var recId = 3; // provide unique id - var p = new store.recordType(defaultData, recId); // create new record - grid.stopEditing(); - store.{@link #insert}(0, p); // insert a new record into the store (also see {@link #add}) - grid.startEditing(0, 0); - } - }] -}); - *
- * @property recordType - * @type Function - */ - - if(this.recordType){ - /** - * A {@link Ext.util.MixedCollection MixedCollection} containing the defined {@link Ext.data.Field Field}s - * for the {@link Ext.data.Record Records} stored in this Store. Read-only. - * @property fields - * @type Ext.util.MixedCollection - */ - this.fields = this.recordType.prototype.fields; - } - this.modified = []; - - this.addEvents( - /** - * @event datachanged - * Fires when the data cache has changed in a bulk manner (e.g., it has been sorted, filtered, etc.) and a - * widget that is using this Store as a Record cache should refresh its view. - * @param {Store} this - */ - 'datachanged', - /** - * @event metachange - * Fires when this store's reader provides new metadata (fields). This is currently only supported for JsonReaders. - * @param {Store} this - * @param {Object} meta The JSON metadata - */ - 'metachange', - /** - * @event add - * Fires when Records have been {@link #add}ed to the Store - * @param {Store} this - * @param {Ext.data.Record[]} records The array of Records added - * @param {Number} index The index at which the record(s) were added - */ - 'add', - /** - * @event remove - * Fires when a Record has been {@link #remove}d from the Store - * @param {Store} this - * @param {Ext.data.Record} record The Record that was removed - * @param {Number} index The index at which the record was removed - */ - 'remove', - /** - * @event update - * Fires when a Record has been updated - * @param {Store} this - * @param {Ext.data.Record} record The Record that was updated - * @param {String} operation The update operation being performed. Value may be one of: - *
- Ext.data.Record.EDIT - Ext.data.Record.REJECT - Ext.data.Record.COMMIT - *
- */ - 'update', - /** - * @event clear - * Fires when the data cache has been cleared. - * @param {Store} this - * @param {Record[]} The records that were cleared. - */ - 'clear', - /** - * @event exception - *
Fires if an exception occurs in the Proxy during a remote request. - * This event is relayed through the corresponding {@link Ext.data.DataProxy}. - * See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#exception exception} - * for additional details. - * @param {misc} misc See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#exception exception} - * for description. - */ - 'exception', - /** - * @event beforeload - * Fires before a request is made for a new data object. If the beforeload handler returns - * false the {@link #load} action will be canceled. - * @param {Store} this - * @param {Object} options The loading options that were specified (see {@link #load} for details) - */ - 'beforeload', - /** - * @event load - * Fires after a new set of Records has been loaded. - * @param {Store} this - * @param {Ext.data.Record[]} records The Records that were loaded - * @param {Object} options The loading options that were specified (see {@link #load} for details) - */ - 'load', - /** - * @event loadexception - *
This event is deprecated in favor of the catch-all {@link #exception} - * event instead.
- *
This event is relayed through the corresponding {@link Ext.data.DataProxy}. - * See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#loadexception loadexception} - * for additional details. - * @param {misc} misc See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#loadexception loadexception} - * for description. - */ - 'loadexception', - /** - * @event beforewrite - * @param {Ext.data.Store} store - * @param {String} action [Ext.data.Api.actions.create|update|destroy] - * @param {Record/Array[Record]} rs - * @param {Object} options The loading options that were specified. Edit options.params to add Http parameters to the request. (see {@link #save} for details) - * @param {Object} arg The callback's arg object passed to the {@link #request} function - */ - 'beforewrite', - /** - * @event write - * Fires if the server returns 200 after an Ext.data.Api.actions CRUD action. - * Success of the action is determined in the result['successProperty']property (NOTE for RESTful stores, - * a simple 20x response is sufficient for the actions "destroy" and "update". The "create" action should should return 200 along with a database pk). - * @param {Ext.data.Store} store - * @param {String} action [Ext.data.Api.actions.create|update|destroy] - * @param {Object} result The 'data' picked-out out of the response for convenience. - * @param {Ext.Direct.Transaction} res - * @param {Record/Record[]} rs Store's records, the subject(s) of the write-action - */ - 'write' - ); - - if(this.proxy){ - this.relayEvents(this.proxy, ['loadexception', 'exception']); - } - // With a writer set for the Store, we want to listen to add/remove events to remotely create/destroy records. - if (this.writer) { - this.on({ - scope: this, - add: this.createRecords, - remove: this.destroyRecord, - update: this.updateRecord, - clear: this.onClear - }); - } - - this.sortToggle = {}; - if(this.sortField){ - this.setDefaultSort(this.sortField, this.sortDir); - }else if(this.sortInfo){ - this.setDefaultSort(this.sortInfo.field, this.sortInfo.direction); - } - - Ext.data.Store.superclass.constructor.call(this); - - if(this.id){ - this.storeId = this.id; - delete this.id; - } - if(this.storeId){ - Ext.StoreMgr.register(this); - } - if(this.inlineData){ - this.loadData(this.inlineData); - delete this.inlineData; - }else if(this.autoLoad){ - this.load.defer(10, this, [ - typeof this.autoLoad == 'object' ? - this.autoLoad : undefined]); - } -}; -Ext.extend(Ext.data.Store, Ext.util.Observable, { +Ext.data.Store = Ext.extend(Ext.util.Observable, { /** * @cfg {String} storeId If passed, the id to use to register with the {@link Ext.StoreMgr StoreMgr}. *
Note: if a (deprecated) {@link #id} is specified it will supersede the storeId @@ -31234,6 +32638,334 @@ sortInfo: { dir : 'dir' }, + // private + batchKey : '_ext_batch_', + + constructor : function(config){ + this.data = new Ext.util.MixedCollection(false); + this.data.getKey = function(o){ + return o.id; + }; + + + // temporary removed-records cache + this.removed = []; + + if(config && config.data){ + this.inlineData = config.data; + delete config.data; + } + + Ext.apply(this, config); + + /** + * See the {@link #baseParams corresponding configuration option} + * for a description of this property. + * To modify this property see {@link #setBaseParam}. + * @property + */ + this.baseParams = Ext.isObject(this.baseParams) ? this.baseParams : {}; + + this.paramNames = Ext.applyIf(this.paramNames || {}, this.defaultParamNames); + + if((this.url || this.api) && !this.proxy){ + this.proxy = new Ext.data.HttpProxy({url: this.url, api: this.api}); + } + // If Store is RESTful, so too is the DataProxy + if (this.restful === true && this.proxy) { + // When operating RESTfully, a unique transaction is generated for each record. + // TODO might want to allow implemention of faux REST where batch is possible using RESTful routes only. + this.batch = false; + Ext.data.Api.restify(this.proxy); + } + + if(this.reader){ // reader passed + if(!this.recordType){ + this.recordType = this.reader.recordType; + } + if(this.reader.onMetaChange){ + this.reader.onMetaChange = this.reader.onMetaChange.createSequence(this.onMetaChange, this); + } + if (this.writer) { // writer passed + if (this.writer instanceof(Ext.data.DataWriter) === false) { // <-- config-object instead of instance. + this.writer = this.buildWriter(this.writer); + } + this.writer.meta = this.reader.meta; + this.pruneModifiedRecords = true; + } + } + + /** + * The {@link Ext.data.Record Record} constructor as supplied to (or created by) the + * {@link Ext.data.DataReader Reader}. Read-only. + *
If the Reader was constructed by passing in an Array of {@link Ext.data.Field} definition objects, + * instead of a Record constructor, it will implicitly create a Record constructor from that Array (see + * {@link Ext.data.Record}.{@link Ext.data.Record#create create} for additional details).
+ *
This property may be used to create new Records of the type held in this Store, for example:
+ // create the data store + var store = new Ext.data.ArrayStore({ + autoDestroy: true, + fields: [ + {name: 'company'}, + {name: 'price', type: 'float'}, + {name: 'change', type: 'float'}, + {name: 'pctChange', type: 'float'}, + {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} + ] + }); + store.loadData(myData); + + // create the Grid + var grid = new Ext.grid.EditorGridPanel({ + store: store, + colModel: new Ext.grid.ColumnModel({ + columns: [ + {id:'company', header: 'Company', width: 160, dataIndex: 'company'}, + {header: 'Price', renderer: 'usMoney', dataIndex: 'price'}, + {header: 'Change', renderer: change, dataIndex: 'change'}, + {header: '% Change', renderer: pctChange, dataIndex: 'pctChange'}, + {header: 'Last Updated', width: 85, + renderer: Ext.util.Format.dateRenderer('m/d/Y'), + dataIndex: 'lastChange'} + ], + defaults: { + sortable: true, + width: 75 + } + }), + autoExpandColumn: 'company', // match the id specified in the column model + height:350, + width:600, + title:'Array Grid', + tbar: [{ + text: 'Add Record', + handler : function(){ + var defaultData = { + change: 0, + company: 'New Company', + lastChange: (new Date()).clearTime(), + pctChange: 0, + price: 10 + }; + var recId = 3; // provide unique id + var p = new store.recordType(defaultData, recId); // create new record + grid.stopEditing(); + store.{@link #insert}(0, p); // insert a new record into the store (also see {@link #add}) + grid.startEditing(0, 0); + } + }] + }); + *
+ * @property recordType + * @type Function + */ + + if(this.recordType){ + /** + * A {@link Ext.util.MixedCollection MixedCollection} containing the defined {@link Ext.data.Field Field}s + * for the {@link Ext.data.Record Records} stored in this Store. Read-only. + * @property fields + * @type Ext.util.MixedCollection + */ + this.fields = this.recordType.prototype.fields; + } + this.modified = []; + + this.addEvents( + /** + * @event datachanged + * Fires when the data cache has changed in a bulk manner (e.g., it has been sorted, filtered, etc.) and a + * widget that is using this Store as a Record cache should refresh its view. + * @param {Store} this + */ + 'datachanged', + /** + * @event metachange + * Fires when this store's reader provides new metadata (fields). This is currently only supported for JsonReaders. + * @param {Store} this + * @param {Object} meta The JSON metadata + */ + 'metachange', + /** + * @event add + * Fires when Records have been {@link #add}ed to the Store + * @param {Store} this + * @param {Ext.data.Record[]} records The array of Records added + * @param {Number} index The index at which the record(s) were added + */ + 'add', + /** + * @event remove + * Fires when a Record has been {@link #remove}d from the Store + * @param {Store} this + * @param {Ext.data.Record} record The Record that was removed + * @param {Number} index The index at which the record was removed + */ + 'remove', + /** + * @event update + * Fires when a Record has been updated + * @param {Store} this + * @param {Ext.data.Record} record The Record that was updated + * @param {String} operation The update operation being performed. Value may be one of: + *
+ Ext.data.Record.EDIT + Ext.data.Record.REJECT + Ext.data.Record.COMMIT + *
+ */ + 'update', + /** + * @event clear + * Fires when the data cache has been cleared. + * @param {Store} this + * @param {Record[]} The records that were cleared. + */ + 'clear', + /** + * @event exception + *
Fires if an exception occurs in the Proxy during a remote request. + * This event is relayed through the corresponding {@link Ext.data.DataProxy}. + * See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#exception exception} + * for additional details. + * @param {misc} misc See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#exception exception} + * for description. + */ + 'exception', + /** + * @event beforeload + * Fires before a request is made for a new data object. If the beforeload handler returns + * false the {@link #load} action will be canceled. + * @param {Store} this + * @param {Object} options The loading options that were specified (see {@link #load} for details) + */ + 'beforeload', + /** + * @event load + * Fires after a new set of Records has been loaded. + * @param {Store} this + * @param {Ext.data.Record[]} records The Records that were loaded + * @param {Object} options The loading options that were specified (see {@link #load} for details) + */ + 'load', + /** + * @event loadexception + *
This event is deprecated in favor of the catch-all {@link #exception} + * event instead.
+ *
This event is relayed through the corresponding {@link Ext.data.DataProxy}. + * See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#loadexception loadexception} + * for additional details. + * @param {misc} misc See {@link Ext.data.DataProxy}.{@link Ext.data.DataProxy#loadexception loadexception} + * for description. + */ + 'loadexception', + /** + * @event beforewrite + * @param {Ext.data.Store} store + * @param {String} action [Ext.data.Api.actions.create|update|destroy] + * @param {Record/Array[Record]} rs + * @param {Object} options The loading options that were specified. Edit options.params to add Http parameters to the request. (see {@link #save} for details) + * @param {Object} arg The callback's arg object passed to the {@link #request} function + */ + 'beforewrite', + /** + * @event write + * Fires if the server returns 200 after an Ext.data.Api.actions CRUD action. + * Success of the action is determined in the result['successProperty']property (NOTE for RESTful stores, + * a simple 20x response is sufficient for the actions "destroy" and "update". The "create" action should should return 200 along with a database pk). + * @param {Ext.data.Store} store + * @param {String} action [Ext.data.Api.actions.create|update|destroy] + * @param {Object} result The 'data' picked-out out of the response for convenience. + * @param {Ext.Direct.Transaction} res + * @param {Record/Record[]} rs Store's records, the subject(s) of the write-action + */ + 'write', + /** + * @event beforesave + * Fires before a save action is called. A save encompasses destroying records, updating records and creating records. + * @param {Ext.data.Store} store + * @param {Object} data An object containing the data that is to be saved. The object will contain a key for each appropriate action, + * with an array of records for each action. + */ + 'beforesave', + /** + * @event save + * Fires after a save is completed. A save encompasses destroying records, updating records and creating records. + * @param {Ext.data.Store} store + * @param {Number} batch The identifier for the batch that was saved. + * @param {Object} data An object containing the data that is to be saved. The object will contain a key for each appropriate action, + * with an array of records for each action. + */ + 'save' + + ); + + if(this.proxy){ + // TODO remove deprecated loadexception with ext-3.0.1 + this.relayEvents(this.proxy, ['loadexception', 'exception']); + } + // With a writer set for the Store, we want to listen to add/remove events to remotely create/destroy records. + if (this.writer) { + this.on({ + scope: this, + add: this.createRecords, + remove: this.destroyRecord, + update: this.updateRecord, + clear: this.onClear + }); + } + + this.sortToggle = {}; + if(this.sortField){ + this.setDefaultSort(this.sortField, this.sortDir); + }else if(this.sortInfo){ + this.setDefaultSort(this.sortInfo.field, this.sortInfo.direction); + } + + Ext.data.Store.superclass.constructor.call(this); + + if(this.id){ + this.storeId = this.id; + delete this.id; + } + if(this.storeId){ + Ext.StoreMgr.register(this); + } + if(this.inlineData){ + this.loadData(this.inlineData); + delete this.inlineData; + }else if(this.autoLoad){ + this.load.defer(10, this, [ + typeof this.autoLoad == 'object' ? + this.autoLoad : undefined]); + } + // used internally to uniquely identify a batch + this.batchCounter = 0; + this.batches = {}; + }, + + /** + * builds a DataWriter instance when Store constructor is provided with a writer config-object instead of an instace. + * @param {Object} config Writer configuration + * @return {Ext.data.DataWriter} + * @private + */ + buildWriter : function(config) { + var klass = undefined, + type = (config.format || 'json').toLowerCase(); + switch (type) { + case 'json': + klass = Ext.data.JsonWriter; + break; + case 'xml': + klass = Ext.data.XmlWriter; + break; + default: + klass = Ext.data.JsonWriter; + } + return new klass(config); + }, + /** * Destroys the store. */ @@ -31285,20 +33017,27 @@ sortInfo: { }, /** - * Remove a Record from the Store and fires the {@link #remove} event. - * @param {Ext.data.Record} record The Ext.data.Record object to remove from the cache. + * Remove Records from the Store and fires the {@link #remove} event. + * @param {Ext.data.Record/Ext.data.Record[]} record The record object or array of records to remove from the cache. */ remove : function(record){ + if(Ext.isArray(record)){ + Ext.each(record, function(r){ + this.remove(r); + }, this); + } var index = this.data.indexOf(record); if(index > -1){ record.join(null); this.data.removeAt(index); - if(this.pruneModifiedRecords){ - this.modified.remove(record); - } - if(this.snapshot){ - this.snapshot.remove(record); - } + } + if(this.pruneModifiedRecords){ + this.modified.remove(record); + } + if(this.snapshot){ + this.snapshot.remove(record); + } + if(index > -1){ this.fireEvent('remove', this, record, index); } }, @@ -31313,8 +33052,9 @@ sortInfo: { /** * Remove all Records from the Store and fires the {@link #clear} event. + * @param {Boolean} silent [false] Defaults to false. Set true to not fire clear event. */ - removeAll : function(){ + removeAll : function(silent){ var items = []; this.each(function(rec){ items.push(rec); @@ -31326,7 +33066,9 @@ sortInfo: { if(this.pruneModifiedRecords){ this.modified = []; } - this.fireEvent('clear', this, items); + if (silent !== true) { // <-- prevents write-actions when we just want to clear a store. + this.fireEvent('clear', this, items); + } }, // private @@ -31348,6 +33090,9 @@ sortInfo: { this.data.insert(index, records[i]); records[i].join(this); } + if(this.snapshot){ + this.snapshot.addAll(records); + } this.fireEvent('add', this, records, index); }, @@ -31375,7 +33120,7 @@ sortInfo: { * @return {Ext.data.Record} The Record with the passed id. Returns undefined if not found. */ getById : function(id){ - return this.data.key(id); + return (this.snapshot || this.data).key(id); }, /** @@ -31431,14 +33176,14 @@ sortInfo: { * parameters to a remote data source. Note: params will override any * {@link #baseParams} of the same name.
*
Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.

- *
callback : Function
A function to be called after the Records - * have been loaded. The callback is called after the load event and is passed the following arguments:
- *
r : Ext.data.Record[]
- *
options: Options object from the load call
- *
success: Boolean success indicator
- *
scope : Object
Scope with which to call the callback (defaults + *
callback : Function
A function to be called after the Records + * have been loaded. The callback is called after the load event is fired, and is passed the following arguments:
+ *
r : Ext.data.Record[] An Array of Records loaded.
+ *
options : Options object from the load call.
+ *
success : Boolean success indicator.
+ *
scope : Object
Scope with which to call the callback (defaults * to the Store object)
- *
add : Boolean
Indicator to append loaded records rather than + *
add : Boolean
Indicator to append loaded records rather than * replace the current cache. Note: see note for {@link #loadData}
*

', Date.getShortMonthName(i), '	', Date.getShortMonthName(i + 6), '

CSS Value Selectors: