The DomHelper class provides a layer of abstraction from DOM and transparently supports creating - * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates - * from your DOM building code.
- * - *DomHelper element specification object
- *A specification object is used when creating elements. Attributes of this object - * are assumed to be element attributes, except for 4 special attributes: - *
Insertion methods
- *Commonly used insertion methods: - *
Example
- *This is an example, where an unordered list with 3 children items is appended to an existing
- * element with id 'my-div':
-
-var dh = Ext.DomHelper; // create shorthand alias
-// specification object
-var spec = {
- id: 'my-ul',
- tag: 'ul',
- cls: 'my-list',
- // append children after creating
- children: [ // may also specify 'cn' instead of 'children'
- {tag: 'li', id: 'item0', html: 'List Item 0'},
- {tag: 'li', id: 'item1', html: 'List Item 1'},
- {tag: 'li', id: 'item2', html: 'List Item 2'}
- ]
-};
-var list = dh.append(
- 'my-div', // the context element 'my-div' can either be the id or the actual node
- spec // the specification object
-);
- Element creation specification parameters in this class may also be passed as an Array of - * specification objects. This can be used to insert multiple sibling nodes into an existing - * container very efficiently. For example, to add more list items to the example above:
-dh.append('my-ul', [
- {tag: 'li', id: 'item3', html: 'List Item 3'},
- {tag: 'li', id: 'item4', html: 'List Item 4'}
-]);
- * Templating
- *The real power is in the built-in templating. Instead of creating or appending any elements, - * {@link #createTemplate} returns a Template object which can be used over and over to - * insert new elements. Revisiting the example above, we could utilize templating this time: - *
-// create the node
-var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
-// get template
-var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
+ * @class Ext
+ */
-for(var i = 0; i < 5, i++){
- tpl.append(list, [i]); // use template to append to the actual node
-}
- * An example using a template:
-var html = '{2}';
-
-var tpl = new Ext.DomHelper.createTemplate(html);
-tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
-tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
- * The same example using named parameters:
-var html = '{text}';
-
-var tpl = new Ext.DomHelper.createTemplate(html);
-tpl.append('blog-roll', {
- id: 'link1',
- url: 'http://www.jackslocum.com/',
- text: "Jack's Site"
-});
-tpl.append('blog-roll', {
- id: 'link2',
- url: 'http://www.dustindiaz.com/',
- text: "Dustin's Site"
-});
- * Compiling Templates
- *Templates are applied using regular expressions. The performance is great, but if - * you are adding a bunch of DOM elements using the same template, you can increase - * performance even further by {@link Ext.Template#compile "compiling"} the template. - * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and - * broken up at the different variable points and a dynamic function is created and eval'ed. - * The generated function performs string concatenation of these parts and the passed - * variables instead of using regular expressions. - *
-var html = '{text}';
+Ext.ns("Ext.grid", "Ext.list", "Ext.dd", "Ext.tree", "Ext.form", "Ext.menu",
+ "Ext.state", "Ext.layout", "Ext.app", "Ext.ux", "Ext.chart", "Ext.direct");
+ /**
+ * Namespace alloted for extensions to the framework.
+ * @property ux
+ * @type Object
+ */
-var tpl = new Ext.DomHelper.createTemplate(html);
-tpl.compile();
+Ext.apply(Ext, function(){
+ var E = Ext,
+ idSeed = 0,
+ scrollWidth = null;
-//... use template like normal
- * Performance Boost
- *DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead - * of DOM can significantly boost performance.
- *Element creation specification parameters may also be strings. If {@link #useDom} is false, - * then the string is used as innerHTML. If {@link #useDom} is true, a string specification - * results in the creation of a text node. Usage:
- *
-Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
- * Utility method for returning a default value if the passed value is empty.
+ *The value is deemed to be empty if it is
+Ext.addBehaviors({
+ // add a listener for click on all anchors in element with id foo
+ '#foo a@click' : function(e, t){
+ // do something
+ },
- if (tag == 'td' || (tag == 'tr' && (where == beforeend || where == afterbegin))) {
- node = ieTable(4, trs, html, tre);
- } else if ((tag == 'tbody' && (where == beforeend || where == afterbegin)) ||
- (tag == 'tr' && (where == beforebegin || where == afterend))) {
- node = ieTable(3, tbs, html, tbe);
- } else {
- node = ieTable(2, ts, html, te);
- }
- el.insertBefore(node, before);
- return node;
+ // add the same listener to multiple selectors (separated by comma BEFORE the @)
+ '#foo a, #bar span.some-class@mouseover' : function(){
+ // do something
}
+});
+ * example:
+ImageComponent = Ext.extend(Ext.BoxComponent, {
+ initComponent: function() {
+ this.autoEl = { tag: 'img' };
+ MyComponent.superclass.initComponent.apply(this, arguments);
+ this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
+ }
+});
+ *
+// Example 1:
+Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]
+
+// Example 2:
+Ext.partition(
+ Ext.query("p"),
+ function(val){
+ return val.className == "class1"
+ }
+);
+// true are those paragraph elements with a className of "class1",
+// false set are those that do not have that className.
+ *
+// Example:
+Ext.invoke(Ext.query("p"), "getAttribute", "id");
+// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
+ *
+// Example:
+Ext.pluck(Ext.query("p"), "className"); // [el1.className, el2.className, ..., elN.className]
+ * Zips N sets together.
+ *
+// Example 1:
+Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
+// Example 2:
+Ext.zip(
+ [ "+", "-", "+"],
+ [ 12, 10, 22],
+ [ 43, 15, 96],
+ function(a, b, c){
+ return "$" + a + "" + b + "." + c
+ }
+); // ["$+12.43", "$-10.15", "$+22.96"]
+ *
+var sayHi = function(name){
+ alert('Hi, ' + name);
+}
+
+sayHi('Fred'); // alerts "Hi, Fred"
+
+var sayGoodbye = sayHi.createSequence(function(name){
+ alert('Bye, ' + name);
+});
+
+sayGoodbye('Fred'); // both alerts show
+this reference) in which the passed function is executed.
+ * If omitted, defaults to the scope in which the original function is called or the browser window.
+ * @return {Function} The new function
+ */
+ createSequence : function(fcn, scope){
+ var method = this;
+ return (typeof fcn != 'function') ?
+ this :
+ function(){
+ var retval = method.apply(this || window, arguments);
+ fcn.apply(scope || this || window, arguments);
+ return retval;
+ };
+ }
+});
+
+
+/**
+ * @class String
+ * These functions are available as static methods on the JavaScript String object.
+ */
+Ext.applyIf(String, {
+
+ /**
+ * Escapes the passed string for ' and \
+ * @param {String} string The string to escape
+ * @return {String} The escaped string
+ * @static
+ */
+ escape : function(string) {
+ return string.replace(/('|\\)/g, "\\$1");
+ },
+
+ /**
+ * Pads the left side of a string with a specified character. This is especially useful
+ * for normalizing number and date strings. Example usage:
+ *
+var s = String.leftPad('123', 5, '0');
+// s now contains the string: '00123'
+ *
+// alternate sort directions
+sort = sort.toggle('ASC', 'DESC');
+
+// instead of conditional logic:
+sort = (sort == 'ASC' ? 'DESC' : 'ASC');
+
+var s = ' foo bar ';
+alert('-' + s + '-'); //alerts "- foo bar -"
+alert('-' + s.trim() + '-'); //alerts "-foo bar-"
+Represents an HTML fragment template. Templates may be {@link #compile precompiled} - * for greater performance.
- *For example usage {@link #Template see the constructor}.
- * - * @constructor - * An instance of this class may be created by passing to the constructor either - * a single argument, or multiple arguments: - *
-var t = new Ext.Template("<div>Hello {0}.</div>");
-t.{@link #append}('some-element', ['foo']);
- * join('').
-
-var t = new Ext.Template([
- '<div name="{id}">',
- '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
- '</div>',
-]);
-t.{@link #compile}();
-t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
-join('').
- *
-var t = new Ext.Template(
- '<div name="{id}">',
- '<span class="{cls}">{name} {value}</span>',
- '</div>',
- // a configuration object:
- {
- compiled: true, // {@link #compile} immediately
- disableFormats: true // See Notes below.
- }
-);
- * Notes:
- *disableFormats are not applicable for Ext Core.disableFormats reduces {@link #apply} time
- * when no formatting is required.{@link #compile}).
- * Defaults to false.
- */
- if (me.compiled) {
- me.compile();
- }
-};
-Ext.Template.prototype = {
- /**
- * @cfg {RegExp} re The regular expression used to match template variables.
- * Defaults to:
- * re : /\{([\w-]+)\}/g // for Ext Core
- * re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g // for Ext JS
- * {@link #re}.
- * @type RegExp
- * @property re
- */
-
- /**
- * Returns an HTML fragment of this template with the specified values applied.
- * @param {Object/Array} values
- * The template values. Can be an array if the params are numeric (i.e. {0})
- * or an object (i.e. {foo: 'bar'}).
- * @return {String} The HTML fragment
- */
- applyTemplate : function(values){
- var me = this;
-
- return me.compiled ?
- me.compiled(values) :
- me.html.replace(me.re, function(m, name){
- return values[name] !== undefined ? values[name] : "";
- });
- },
-
- /**
- * Sets the HTML used as the template and optionally compiles it.
- * @param {String} html
- * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
- * @return {Ext.Template} this
- */
- set : function(html, compile){
- var me = this;
- me.html = html;
- me.compiled = null;
- return compile ? me.compile() : me;
- },
-
- /**
- * Compiles the template into an internal function, eliminating the RegEx overhead.
- * @return {Ext.Template} this
- */
- compile : function(){
- var me = this,
- sep = Ext.isGecko ? "+" : ",";
-
- function fn(m, name){
- name = "values['" + name + "']";
- return "'"+ sep + '(' + name + " == undefined ? '' : " + name + ')' + sep + "'";
- }
-
- eval("this.compiled = function(values){ return " + (Ext.isGecko ? "'" : "['") +
- me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
- (Ext.isGecko ? "';};" : "'].join('');};"));
- return me;
- },
-
- /**
- * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
- * @param {Mixed} el The context element
- * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
- * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- insertFirst: function(el, values, returnElement){
- return this.doInsert('afterBegin', el, values, returnElement);
- },
-
- /**
- * Applies the supplied values to the template and inserts the new node(s) before el.
- * @param {Mixed} el The context element
- * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
- * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- insertBefore: function(el, values, returnElement){
- return this.doInsert('beforeBegin', el, values, returnElement);
- },
-
- /**
- * Applies the supplied values to the template and inserts the new node(s) after el.
- * @param {Mixed} el The context element
- * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
- * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- insertAfter : function(el, values, returnElement){
- return this.doInsert('afterEnd', el, values, returnElement);
- },
-
- /**
- * Applies the supplied values to the template and appends
- * the new node(s) to the specified el.
- * For example usage {@link #Template see the constructor}.
- * @param {Mixed} el The context element - * @param {Object/Array} values - * The template values. Can be an array if the params are numeric (i.e.{0})
- * or an object (i.e. {foo: 'bar'}).
- * @param {Boolean} returnElement (optional) true to return an Ext.Element (defaults to undefined)
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- append : function(el, values, returnElement){
- return this.doInsert('beforeEnd', el, values, returnElement);
- },
-
- doInsert : function(where, el, values, returnEl){
- el = Ext.getDom(el);
- var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values));
- return returnEl ? Ext.get(newNode, true) : newNode;
- },
-
- /**
- * Applies the supplied values to the template and overwrites the content of el with the new node(s).
- * @param {Mixed} el The context element
- * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
- * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
- * @return {HTMLElement/Ext.Element} The new node or Element
- */
- overwrite : function(el, values, returnElement){
- el = Ext.getDom(el);
- el.innerHTML = this.applyTemplate(values);
- return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
- }
-};
-/**
- * Alias for {@link #applyTemplate}
- * Returns an HTML fragment of this template with the specified values applied.
- * @param {Object/Array} values
- * The template values. Can be an array if the params are numeric (i.e. {0})
- * or an object (i.e. {foo: 'bar'}).
- * @return {String} The HTML fragment
- * @member Ext.Template
- * @method apply
- */
-Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate;
-
-/**
- * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
- * @param {String/HTMLElement} el A DOM element or its id
- * @param {Object} config A configuration object
- * @return {Ext.Template} The created template
- * @static
- */
-Ext.Template.from = function(el, config){
- el = Ext.getDom(el);
- return new Ext.Template(el.value || el.innerHTML, config || '');
-};
/**
* @class Ext.Template
*/
@@ -940,8286 +1052,2291 @@ var t = new Ext.Template(
}
});
Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate;
-/*
- * This is code is also distributed under MIT license for use
- * with jQuery and prototype JavaScript libraries.
- */
/**
- * @class Ext.DomQuery
-Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).
--DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.
- --All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure. -
-The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.
-
+var sayHi = function(name){
+ alert('Hi, ' + name);
+}
+
+sayHi('Fred'); // alerts "Hi, Fred"
+
+// create a new function that validates input without
+// directly modifying the original function:
+var sayHiToFriend = Ext.createInterceptor(sayHi, function(name){
+ return name == 'Brian';
+});
+
+sayHiToFriend('Fred'); // no alert
+sayHiToFriend('Brian'); // alerts "Hi, Brian"
+ this reference) in which the passed function is executed.
+ * If omitted, defaults to the scope in which the original function is called or the browser window.
+ * @return {Function} The new function
+ */
+ createInterceptor: function(origFn, newFn, scope) {
+ var method = origFn;
+ if (!Ext.isFunction(newFn)) {
+ return origFn;
+ }
+ else {
+ return function() {
+ var me = this,
+ args = arguments;
+ newFn.target = me;
+ newFn.method = origFn;
+ return (newFn.apply(scope || me || window, args) !== false) ?
+ origFn.apply(me || window, args) :
+ null;
+ };
}
- return null;
- }
+ },
- // retrieve the next element node
- function next(n){
- while((n = n.nextSibling) && n.nodeType != 1);
- return n;
- }
+ /**
+ * Creates a delegate (callback) that sets the scope to obj.
+ * Call directly on any function. Example: Ext.createDelegate(this.myFunction, this, [arg1, arg2])
+ * Will create a function that is automatically scoped to obj so that the this variable inside the
+ * callback points to obj. Example usage:
+ *
+var sayHi = function(name){
+ // Note this use of "this.text" here. This function expects to
+ // execute within a scope that contains a text property. In this
+ // example, the "this" variable is pointing to the btn object that
+ // was passed in createDelegate below.
+ alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');
+}
- // retrieve the previous element node
- function prev(n){
- while((n = n.previousSibling) && n.nodeType != 1);
- return n;
- }
+var btn = new Ext.Button({
+ text: 'Say Hi',
+ renderTo: Ext.getBody()
+});
- // Mark each child node with a nodeIndex skipping and
- // removing empty text nodes.
- function children(parent){
- var n = parent.firstChild,
- nodeIndex = -1,
- nextNode;
- while(n){
- nextNode = n.nextSibling;
- // clean worthless empty nodes.
- if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
- parent.removeChild(n);
- }else{
- // add an expando nodeIndex
- n.nodeIndex = ++nodeIndex;
- }
- n = nextNode;
- }
- return this;
- }
+// This callback will execute in the scope of the
+// button instance. Clicking the button alerts
+// "Hi, Fred. You clicked the "Say Hi" button."
+btn.on('click', Ext.createDelegate(sayHi, btn, ['Fred']));
+ this reference) in which the function is executed.
+ * If omitted, defaults to the browser window.
+ * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
+ * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
+ * if a number the args are inserted at the specified position
+ * @return {Function} The new function
+ */
+ createDelegate: function(fn, obj, args, appendArgs) {
+ if (!Ext.isFunction(fn)) {
+ return fn;
+ }
+ return function() {
+ var callArgs = args || arguments;
+ if (appendArgs === true) {
+ callArgs = Array.prototype.slice.call(arguments, 0);
+ callArgs = callArgs.concat(args);
+ }
+ else if (Ext.isNumber(appendArgs)) {
+ callArgs = Array.prototype.slice.call(arguments, 0);
+ // copy arguments first
+ var applyArgs = [appendArgs, 0].concat(args);
+ // create method call params
+ Array.prototype.splice.apply(callArgs, applyArgs);
+ // splice them in
+ }
+ return fn.apply(obj || window, callArgs);
+ };
+ },
+ /**
+ * Calls this function after the number of millseconds specified, optionally in a specific scope. Example usage:
+ *
+var sayHi = function(name){
+ alert('Hi, ' + name);
+}
- // nodeSet - array of nodes
- // cls - CSS Class
- function byClassName(nodeSet, cls){
- if(!cls){
- return nodeSet;
- }
- var result = [], ri = -1;
- for(var i = 0, ci; ci = nodeSet[i]; i++){
- if((' '+ci.className+' ').indexOf(cls) != -1){
- result[++ri] = ci;
- }
- }
- return result;
- };
+// executes immediately:
+sayHi('Fred');
- function attrValue(n, attr){
- // if its an array, use the first node.
- if(!n.tagName && typeof n.length != "undefined"){
- n = n[0];
- }
- if(!n){
- return null;
- }
+// executes after 2 seconds:
+Ext.defer(sayHi, 2000, this, ['Fred']);
- if(attr == "for"){
- return n.htmlFor;
- }
- if(attr == "class" || attr == "className"){
- return n.className;
+// this syntax is sometimes useful for deferring
+// execution of an anonymous function:
+Ext.defer(function(){
+ alert('Anonymous');
+}, 100);
+ this reference) in which the function is executed.
+ * If omitted, defaults to the browser window.
+ * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
+ * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
+ * if a number the args are inserted at the specified position
+ * @return {Number} The timeout id that can be used with clearTimeout
+ */
+ defer: function(fn, millis, obj, args, appendArgs) {
+ fn = Ext.util.Functions.createDelegate(fn, obj, args, appendArgs);
+ if (millis > 0) {
+ return setTimeout(fn, millis);
}
- return n.getAttribute(attr) || n[attr];
+ fn();
+ return 0;
+ },
- };
+ /**
+ * Create a combined function call sequence of the original function + the passed function.
+ * The resulting function returns the results of the original function.
+ * The passed fcn is called with the parameters of the original function. Example usage:
+ *
- // ns - nodes
- // mode - false, /, >, +, ~
- // tagName - defaults to "*"
- function getNodes(ns, mode, tagName){
- var result = [], ri = -1, cs;
- if(!ns){
- return result;
- }
- tagName = tagName || "*";
- // convert to array
- if(typeof ns.getElementsByTagName != "undefined"){
- ns = [ns];
- }
-
- // no mode specified, grab all elements by tagName
- // at any depth
- if(!mode){
- for(var i = 0, ni; ni = ns[i]; i++){
- cs = ni.getElementsByTagName(tagName);
- for(var j = 0, ci; ci = cs[j]; j++){
- result[++ri] = ci;
- }
- }
- // Direct Child mode (/ or >)
- // E > F or E/F all direct children elements of E that have the tag
- } else if(mode == "/" || mode == ">"){
- var utag = tagName.toUpperCase();
- for(var i = 0, ni, cn; ni = ns[i]; i++){
- cn = ni.childNodes;
- for(var j = 0, cj; cj = cn[j]; j++){
- if(cj.nodeName == utag || cj.nodeName == tagName || tagName == '*'){
- result[++ri] = cj;
- }
- }
- }
- // Immediately Preceding mode (+)
- // E + F all elements with the tag F that are immediately preceded by an element with the tag E
- }else if(mode == "+"){
- var utag = tagName.toUpperCase();
- for(var i = 0, n; n = ns[i]; i++){
- while((n = n.nextSibling) && n.nodeType != 1);
- if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
- result[++ri] = n;
- }
- }
- // Sibling mode (~)
- // E ~ F all elements with the tag F that are preceded by a sibling element with the tag E
- }else if(mode == "~"){
- var utag = tagName.toUpperCase();
- for(var i = 0, n; n = ns[i]; i++){
- while((n = n.nextSibling)){
- if (n.nodeName == utag || n.nodeName == tagName || tagName == '*'){
- result[++ri] = n;
- }
- }
- }
- }
- return result;
- }
+var sayHi = function(name){
+ alert('Hi, ' + name);
+}
- function concat(a, b){
- if(b.slice){
- return a.concat(b);
- }
- for(var i = 0, l = b.length; i < l; i++){
- a[a.length] = b[i];
- }
- return a;
- }
+sayHi('Fred'); // alerts "Hi, Fred"
- function byTag(cs, tagName){
- if(cs.tagName || cs == document){
- cs = [cs];
- }
- if(!tagName){
- return cs;
- }
- var result = [], ri = -1;
- tagName = tagName.toLowerCase();
- for(var i = 0, ci; ci = cs[i]; i++){
- if(ci.nodeType == 1 && ci.tagName.toLowerCase() == tagName){
- result[++ri] = ci;
- }
- }
- return result;
- }
+var sayGoodbye = Ext.createSequence(sayHi, function(name){
+ alert('Bye, ' + name);
+});
- function byId(cs, id){
- if(cs.tagName || cs == document){
- cs = [cs];
- }
- if(!id){
- return cs;
+sayGoodbye('Fred'); // both alerts show
+
+ * @param {Function} origFn The original function.
+ * @param {Function} newFn The function to sequence
+ * @param {Object} scope (optional) The scope (this reference) in which the passed function is executed.
+ * If omitted, defaults to the scope in which the original function is called or the browser window.
+ * @return {Function} The new function
+ */
+ createSequence: function(origFn, newFn, scope) {
+ if (!Ext.isFunction(newFn)) {
+ return origFn;
}
- var result = [], ri = -1;
- for(var i = 0, ci; ci = cs[i]; i++){
- if(ci && ci.id == id){
- result[++ri] = ci;
- return result;
- }
+ else {
+ return function() {
+ var retval = origFn.apply(this || window, arguments);
+ newFn.apply(scope || this || window, arguments);
+ return retval;
+ };
}
- return result;
}
+};
- // operators are =, !=, ^=, $=, *=, %=, |= and ~=
- // custom can be "{"
- function byAttribute(cs, attr, value, op, custom){
- var result = [],
- ri = -1,
- useGetStyle = custom == "{",
- fn = Ext.DomQuery.operators[op],
- a,
- innerHTML;
- for(var i = 0, ci; ci = cs[i]; i++){
- // skip non-element nodes.
- if(ci.nodeType != 1){
- continue;
- }
-
- innerHTML = ci.innerHTML;
- // we only need to change the property names if we're dealing with html nodes, not XML
- if(innerHTML !== null && innerHTML !== undefined){
- if(useGetStyle){
- a = Ext.DomQuery.getStyle(ci, attr);
- } else if (attr == "class" || attr == "className"){
- a = ci.className;
- } else if (attr == "for"){
- a = ci.htmlFor;
- } else if (attr == "href"){
- // getAttribute href bug
- // http://www.glennjones.net/Post/809/getAttributehrefbug.htm
- a = ci.getAttribute("href", 2);
- } else{
- a = ci.getAttribute(attr);
- }
- }else{
- a = ci.getAttribute(attr);
- }
- if((fn && fn(a, value)) || (!fn && a)){
- result[++ri] = ci;
- }
- }
- return result;
- }
+/**
+ * Shorthand for {@link Ext.util.Functions#defer}
+ * @param {Function} fn The function to defer.
+ * @param {Number} millis The number of milliseconds for the setTimeout call (if less than or equal to 0 the function is executed immediately)
+ * @param {Object} scope (optional) The scope (this reference) in which the function is executed.
+ * If omitted, defaults to the browser window.
+ * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
+ * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
+ * if a number the args are inserted at the specified position
+ * @return {Number} The timeout id that can be used with clearTimeout
+ * @member Ext
+ * @method defer
+ */
- function byPseudo(cs, name, value){
- return Ext.DomQuery.pseudos[name](cs, value);
- }
+Ext.defer = Ext.util.Functions.defer;
- function nodupIEXml(cs){
- var d = ++key,
- r;
- cs[0].setAttribute("_nodup", d);
- r = [cs[0]];
- for(var i = 1, len = cs.length; i < len; i++){
- var c = cs[i];
- if(!c.getAttribute("_nodup") != d){
- c.setAttribute("_nodup", d);
- r[r.length] = c;
- }
- }
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i].removeAttribute("_nodup");
- }
- return r;
- }
+/**
+ * Shorthand for {@link Ext.util.Functions#createInterceptor}
+ * @param {Function} origFn The original function.
+ * @param {Function} newFn The function to call before the original
+ * @param {Object} scope (optional) The scope (this reference) in which the passed function is executed.
+ * If omitted, defaults to the scope in which the original function is called or the browser window.
+ * @return {Function} The new function
+ * @member Ext
+ * @method defer
+ */
- function nodup(cs){
- if(!cs){
- return [];
- }
- var len = cs.length, c, i, r = cs, cj, ri = -1;
- if(!len || typeof cs.nodeType != "undefined" || len == 1){
- return cs;
- }
- if(isIE && typeof cs[0].selectSingleNode != "undefined"){
- return nodupIEXml(cs);
- }
- var d = ++key;
- cs[0]._nodup = d;
- for(i = 1; c = cs[i]; i++){
- if(c._nodup != d){
- c._nodup = d;
- }else{
- r = [];
- for(var j = 0; j < i; j++){
- r[++ri] = cs[j];
- }
- for(j = i+1; cj = cs[j]; j++){
- if(cj._nodup != d){
- cj._nodup = d;
- r[++ri] = cj;
- }
- }
- return r;
- }
- }
- return r;
- }
+Ext.createInterceptor = Ext.util.Functions.createInterceptor;
- function quickDiffIEXml(c1, c2){
- var d = ++key,
- r = [];
- for(var i = 0, len = c1.length; i < len; i++){
- c1[i].setAttribute("_qdiff", d);
- }
- for(var i = 0, len = c2.length; i < len; i++){
- if(c2[i].getAttribute("_qdiff") != d){
- r[r.length] = c2[i];
- }
- }
- for(var i = 0, len = c1.length; i < len; i++){
- c1[i].removeAttribute("_qdiff");
- }
- return r;
- }
+/**
+ * Shorthand for {@link Ext.util.Functions#createSequence}
+ * @param {Function} origFn The original function.
+ * @param {Function} newFn The function to sequence
+ * @param {Object} scope (optional) The scope (this reference) in which the passed function is executed.
+ * If omitted, defaults to the scope in which the original function is called or the browser window.
+ * @return {Function} The new function
+ * @member Ext
+ * @method defer
+ */
- function quickDiff(c1, c2){
- var len1 = c1.length,
- d = ++key,
- r = [];
- if(!len1){
- return c2;
- }
- if(isIE && typeof c1[0].selectSingleNode != "undefined"){
- return quickDiffIEXml(c1, c2);
- }
- for(var i = 0; i < len1; i++){
- c1[i]._qdiff = d;
- }
- for(var i = 0, len = c2.length; i < len; i++){
- if(c2[i]._qdiff != d){
- r[r.length] = c2[i];
- }
- }
- return r;
- }
+Ext.createSequence = Ext.util.Functions.createSequence;
- function quickId(ns, mode, root, id){
- if(ns == root){
- var d = root.ownerDocument || root;
- return d.getElementById(id);
- }
- ns = getNodes(ns, mode, "*");
- return byId(ns, id);
- }
+/**
+ * Shorthand for {@link Ext.util.Functions#createDelegate}
+ * @param {Function} fn The function to delegate.
+ * @param {Object} scope (optional) The scope (this reference) in which the function is executed.
+ * If omitted, defaults to the browser window.
+ * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
+ * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
+ * if a number the args are inserted at the specified position
+ * @return {Function} The new function
+ * @member Ext
+ * @method defer
+ */
+Ext.createDelegate = Ext.util.Functions.createDelegate;
+/**
+ * @class Ext.util.Observable
+ */
+Ext.apply(Ext.util.Observable.prototype, function(){
+ // this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)
+ // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
+ // private
+ function getMethodEvent(method){
+ var e = (this.methodEvents = this.methodEvents ||
+ {})[method], returnValue, v, cancel, obj = this;
- return {
- getStyle : function(el, name){
- return Ext.fly(el).getStyle(name);
- },
- /**
- * Compiles a selector/xpath query into a reusable function. The returned function
- * takes one parameter "root" (optional), which is the context node from where the query should start.
- * @param {String} selector The selector/xpath query
- * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
- * @return {Function}
- */
- compile : function(path, type){
- type = type || "select";
-
- // setup fn preamble
- var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"],
- mode,
- lastPath,
- matchers = Ext.DomQuery.matchers,
- matchersLn = matchers.length,
- modeMatch,
- // accept leading mode switch
- lmode = path.match(modeRe);
-
- if(lmode && lmode[1]){
- fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
- path = path.replace(lmode[1], "");
- }
-
- // strip leading slashes
- while(path.substr(0, 1)=="/"){
- path = path.substr(1);
- }
+ if (!e) {
+ this.methodEvents[method] = e = {};
+ e.originalFn = this[method];
+ e.methodName = method;
+ e.before = [];
+ e.after = [];
- while(path && lastPath != path){
- lastPath = path;
- var tokenMatch = path.match(tagTokenRe);
- if(type == "select"){
- if(tokenMatch){
- // ID Selector
- if(tokenMatch[1] == "#"){
- fn[fn.length] = 'n = quickId(n, mode, root, "'+tokenMatch[2]+'");';
+ var makeCall = function(fn, scope, args){
+ if((v = fn.apply(scope || obj, args)) !== undefined){
+ if (typeof v == 'object') {
+ if(v.returnValue !== undefined){
+ returnValue = v.returnValue;
}else{
- fn[fn.length] = 'n = getNodes(n, mode, "'+tokenMatch[2]+'");';
+ returnValue = v;
}
- path = path.replace(tokenMatch[0], "");
- }else if(path.substr(0, 1) != '@'){
- fn[fn.length] = 'n = getNodes(n, mode, "*");';
+ cancel = !!v.cancel;
}
- // type of "simple"
- }else{
- if(tokenMatch){
- if(tokenMatch[1] == "#"){
- fn[fn.length] = 'n = byId(n, "'+tokenMatch[2]+'");';
- }else{
- fn[fn.length] = 'n = byTag(n, "'+tokenMatch[2]+'");';
+ else
+ if (v === false) {
+ cancel = true;
}
- path = path.replace(tokenMatch[0], "");
- }
- }
- while(!(modeMatch = path.match(modeRe))){
- var matched = false;
- for(var j = 0; j < matchersLn; j++){
- var t = matchers[j];
- var m = path.match(t.re);
- if(m){
- fn[fn.length] = t.select.replace(tplRe, function(x, i){
- return m[i];
- });
- path = path.replace(m[0], "");
- matched = true;
- break;
+ else {
+ returnValue = v;
}
- }
- // prevent infinite loop on bad selector
- if(!matched){
- throw 'Error parsing selector, parsing failed at "' + path + '"';
- }
}
- if(modeMatch[1]){
- fn[fn.length] = 'mode="'+modeMatch[1].replace(trimRe, "")+'";';
- path = path.replace(modeMatch[1], "");
- }
- }
- // close fn out
- fn[fn.length] = "return nodup(n);\n}";
-
- // eval fn and return it
- eval(fn.join(""));
- return f;
- },
+ };
- /**
- * Selects a group of elements.
- * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
- * @param {Node/String} root (optional) The start of the query (defaults to document).
- * @return {Array} An Array of DOM elements which match the selector. If there are
- * no matches, and empty Array is returned.
- */
- jsSelect: function(path, root, type){
- // set root to doc if not specified.
- root = root || document;
-
- if(typeof root == "string"){
- root = document.getElementById(root);
- }
- var paths = path.split(","),
- results = [];
-
- // loop over each selector
- for(var i = 0, len = paths.length; i < len; i++){
- var subPath = paths[i].replace(trimRe, "");
- // compile and place in cache
- if(!cache[subPath]){
- cache[subPath] = Ext.DomQuery.compile(subPath);
- if(!cache[subPath]){
- throw subPath + " is not a valid selector";
+ this[method] = function(){
+ var args = Array.prototype.slice.call(arguments, 0),
+ b;
+ returnValue = v = undefined;
+ cancel = false;
+
+ for(var i = 0, len = e.before.length; i < len; i++){
+ b = e.before[i];
+ makeCall(b.fn, b.scope, args);
+ if (cancel) {
+ return returnValue;
}
}
- var result = cache[subPath](root);
- if(result && result != document){
- results = results.concat(result);
+
+ if((v = e.originalFn.apply(obj, args)) !== undefined){
+ returnValue = v;
}
- }
-
- // if there were multiple selectors, make sure dups
- // are eliminated
- if(paths.length > 1){
- return nodup(results);
- }
- return results;
- },
- isXml: function(el) {
- var docEl = (el ? el.ownerDocument || el : 0).documentElement;
- return docEl ? docEl.nodeName !== "HTML" : false;
- },
- select : document.querySelectorAll ? function(path, root, type) {
- root = root || document;
- if (!Ext.DomQuery.isXml(root)) {
- try {
- var cs = root.querySelectorAll(path);
- return Ext.toArray(cs);
- }
- catch (ex) {}
- }
- return Ext.DomQuery.jsSelect.call(this, path, root, type);
- } : function(path, root, type) {
- return Ext.DomQuery.jsSelect.call(this, path, root, type);
- },
- /**
- * Selects a single element.
- * @param {String} selector The selector/xpath query
- * @param {Node} root (optional) The start of the query (defaults to document).
- * @return {Element} The DOM element which matched the selector.
- */
- selectNode : function(path, root){
- return Ext.DomQuery.select(path, root)[0];
- },
+ for(var i = 0, len = e.after.length; i < len; i++){
+ b = e.after[i];
+ makeCall(b.fn, b.scope, args);
+ if (cancel) {
+ return returnValue;
+ }
+ }
+ return returnValue;
+ };
+ }
+ return e;
+ }
- /**
- * Selects the value of a node, optionally replacing null with the defaultValue.
- * @param {String} selector The selector/xpath query
- * @param {Node} root (optional) The start of the query (defaults to document).
- * @param {String} defaultValue
- * @return {String}
- */
- selectValue : function(path, root, defaultValue){
- path = path.replace(trimRe, "");
- if(!valueCache[path]){
- valueCache[path] = Ext.DomQuery.compile(path, "select");
- }
- var n = valueCache[path](root), v;
- n = n[0] ? n[0] : n;
-
- // overcome a limitation of maximum textnode size
- // Rumored to potentially crash IE6 but has not been confirmed.
- // http://reference.sitepoint.com/javascript/Node/normalize
- // https://developer.mozilla.org/En/DOM/Node.normalize
- if (typeof n.normalize == 'function') n.normalize();
-
- v = (n && n.firstChild ? n.firstChild.nodeValue : null);
- return ((v === null||v === undefined||v==='') ? defaultValue : v);
+ return {
+ // these are considered experimental
+ // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
+ // adds an 'interceptor' called before the original method
+ beforeMethod : function(method, fn, scope){
+ getMethodEvent.call(this, method).before.push({
+ fn: fn,
+ scope: scope
+ });
},
- /**
- * Selects the value of a node, parsing integers and floats. Returns the defaultValue, or 0 if none is specified.
- * @param {String} selector The selector/xpath query
- * @param {Node} root (optional) The start of the query (defaults to document).
- * @param {Number} defaultValue
- * @return {Number}
- */
- selectNumber : function(path, root, defaultValue){
- var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0);
- return parseFloat(v);
+ // adds a 'sequence' called after the original method
+ afterMethod : function(method, fn, scope){
+ getMethodEvent.call(this, method).after.push({
+ fn: fn,
+ scope: scope
+ });
},
- /**
- * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
- * @param {String/HTMLElement/Array} el An element id, element or array of elements
- * @param {String} selector The simple selector to test
- * @return {Boolean}
- */
- is : function(el, ss){
- if(typeof el == "string"){
- el = document.getElementById(el);
+ removeMethodListener: function(method, fn, scope){
+ var e = this.getMethodEvent(method);
+ for(var i = 0, len = e.before.length; i < len; i++){
+ if(e.before[i].fn == fn && e.before[i].scope == scope){
+ e.before.splice(i, 1);
+ return;
+ }
}
- var isArray = Ext.isArray(el),
- result = Ext.DomQuery.filter(isArray ? el : [el], ss);
- return isArray ? (result.length == el.length) : (result.length > 0);
- },
-
- /**
- * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
- * @param {Array} el An array of elements to filter
- * @param {String} selector The simple selector to test
- * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
- * the selector instead of the ones that match
- * @return {Array} An Array of DOM elements which match the selector. If there are
- * no matches, and empty Array is returned.
- */
- filter : function(els, ss, nonMatches){
- ss = ss.replace(trimRe, "");
- if(!simpleCache[ss]){
- simpleCache[ss] = Ext.DomQuery.compile(ss, "simple");
+ for(var i = 0, len = e.after.length; i < len; i++){
+ if(e.after[i].fn == fn && e.after[i].scope == scope){
+ e.after.splice(i, 1);
+ return;
+ }
}
- var result = simpleCache[ss](els);
- return nonMatches ? quickDiff(result, els) : result;
},
/**
- * Collection of matching regular expressions and code snippets.
- * Each capture group within () will be replace the {} in the select
- * statement as specified by their index.
+ * Relays selected events from the specified Observable as if the events were fired by this.
+ * @param {Object} o The Observable whose events this object is to relay.
+ * @param {Array} events Array of event names to relay.
*/
- matchers : [{
- re: /^\.([\w-]+)/,
- select: 'n = byClassName(n, " {1} ");'
- }, {
- re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
- select: 'n = byPseudo(n, "{1}", "{2}");'
- },{
- re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
- select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
- }, {
- re: /^#([\w-]+)/,
- select: 'n = byId(n, "{1}");'
- },{
- re: /^@([\w-]+)/,
- select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
+ relayEvents : function(o, events){
+ var me = this;
+ function createHandler(ename){
+ return function(){
+ return me.fireEvent.apply(me, [ename].concat(Array.prototype.slice.call(arguments, 0)));
+ };
}
- ],
-
- /**
- * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
- * New operators can be added as long as the match the format c= where c is any character other than space, > <.
- */
- operators : {
- "=" : function(a, v){
- return a == v;
- },
- "!=" : function(a, v){
- return a != v;
- },
- "^=" : function(a, v){
- return a && a.substr(0, v.length) == v;
- },
- "$=" : function(a, v){
- return a && a.substr(a.length-v.length) == v;
- },
- "*=" : function(a, v){
- return a && a.indexOf(v) !== -1;
- },
- "%=" : function(a, v){
- return (a % v) == 0;
- },
- "|=" : function(a, v){
- return a && (a == v || a.substr(0, v.length+1) == v+'-');
- },
- "~=" : function(a, v){
- return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
+ for(var i = 0, len = events.length; i < len; i++){
+ var ename = events[i];
+ me.events[ename] = me.events[ename] || true;
+ o.on(ename, createHandler(ename), me);
}
},
/**
- * Object hash of "pseudo class" filter functions which are used when filtering selections. Each function is passed - * two parameters:
A filter function returns an Array of DOM elements which conform to the pseudo class.
- *In addition to the provided pseudo classes listed above such as first-child and nth-child,
- * developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.
For example, to filter <a> elements to only return links to external resources:
-Ext.DomQuery.pseudos.external = function(c, v){
- var r = [], ri = -1;
- for(var i = 0, ci; ci = c[i]; i++){
-// Include in result set only if it's a link to an external resource
- if(ci.hostname != location.hostname){
- r[++ri] = ci;
+ * Enables events fired by this Observable to bubble up an owner hierarchy by calling
+ * this.getBubbleTarget() if present. There is no implementation in the Observable base class.
+ * This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component.getBubbleTarget}. The default
+ * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
+ * access the required target more quickly.
+ * Example:
+Ext.override(Ext.form.Field, {
+ // Add functionality to Field's initComponent to enable the change event to bubble
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
+ this.enableBubble('change');
+ }),
+
+ // We know that we want Field's events to bubble directly to the FormPanel.
+ getBubbleTarget : function() {
+ if (!this.formPanel) {
+ this.formPanel = this.findParentByType('form');
}
+ return this.formPanel;
}
- return r;
-};
-var externalLinks = Ext.select("a:external");
-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 (Thethis reference) in which the
- * function is called. If not specified, this will refer to the browser window.
- * @param {Array} args (optional) The default Array of arguments.
- */
-Ext.util.DelayedTask = function(fn, scope, args){
- var me = this,
- id,
- call = function(){
- clearInterval(id);
- id = null;
- fn.apply(scope, args || []);
- };
-
- /**
- * Cancels any pending timeout and queues a new one
- * @param {Number} delay The milliseconds to delay
- * @param {Function} newFn (optional) Overrides function passed to constructor
- * @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
- * is specified, this will refer to the browser window.
- * @param {Array} newArgs (optional) Overrides args passed to constructor
- */
- me.delay = function(delay, newFn, newScope, newArgs){
- me.cancel();
- fn = newFn || fn;
- scope = newScope || scope;
- args = newArgs || args;
- id = setInterval(call, delay);
- };
-
- /**
- * Cancel the last queued timeout
- */
- me.cancel = function(){
- if(id){
- clearInterval(id);
- id = null;
- }
- };
-};(function(){
-
-var EXTUTIL = Ext.util,
- EACH = Ext.each,
- TRUE = true,
- FALSE = false;
-/**
- * @class Ext.util.Observable
- * Base class that provides a common interface for publishing events. Subclasses are expected to
- * to have a property "events" with all the events defined, and, optionally, a property "listeners"
- * with configured listeners defined.
-Employee = Ext.extend(Ext.util.Observable, {
- constructor: function(config){
- this.name = config.name;
- this.addEvents({
- "fired" : true,
- "quit" : true
- });
-
- // Copy configured listeners into *this* object so that the base class's
- // constructor will add them.
- this.listeners = config.listeners;
- // Call our superclass constructor to complete construction process.
- Employee.superclass.constructor.call(this, config)
- }
-});
-
-var newEmployee = new Employee({
- name: employeeName,
+var myForm = new Ext.formPanel({
+ title: 'User Details',
+ items: [{
+ ...
+ }],
listeners: {
- quit: function() {
- // By default, "this" will be the object that fired the event.
- alert(this.name + " has quit!");
+ change: function() {
+ // Title goes red if form has been modified.
+ myForm.header.setStyle('color', 'red');
}
}
});
A config object containing one or more event handlers to be added to this - * object during initialization. This should be a valid listeners config object as specified in the - * {@link #addListener} example for attaching multiple handlers at once.
- *DOM events from ExtJs {@link Ext.Component Components}
- *While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
- * is usually only done when extra value can be added. For example the {@link Ext.DataView DataView}'s
- * {@link Ext.DataView#click click} event passing the node clicked on. To access DOM
- * events directly from a Component's HTMLElement, listeners must be added to the {@link Ext.Component#getEl Element} after the Component
- * has been rendered. A plugin can simplify this step:
-// Plugin is configured with a listeners config object.
-// The Component is appended to the argument list of all handler functions.
-Ext.DomObserver = Ext.extend(Object, {
- constructor: function(config) {
- this.listeners = config.listeners ? config.listeners : config;
- },
-
- // Component passes itself into plugin's init method
- init: function(c) {
- var p, l = this.listeners;
- for (p in l) {
- if (Ext.isFunction(l[p])) {
- l[p] = this.createHandler(l[p], c);
- } else {
- l[p].fn = this.createHandler(l[p].fn, c);
- }
- }
-
- // Add the listeners to the Element immediately following the render call
- c.render = c.render.{@link Function#createSequence createSequence}(function() {
- var e = c.getEl();
- if (e) {
- e.on(l);
- }
- });
- },
-
- createHandler: function(fn, c) {
- return function(e) {
- fn.call(this, e, c);
- };
- }
-});
-
-var combo = new Ext.form.ComboBox({
-
- // Collapse combo when its element is clicked on
- plugins: [ new Ext.DomObserver({
- click: function(evt, comp) {
- comp.collapse();
- }
- })],
- store: myStore,
- typeAhead: true,
- mode: 'local',
- triggerAction: 'all'
-});
- * Fires the specified event with the passed parameters (minus the event name).
- *An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) - * by calling {@link #enableBubble}.
- * @param {String} eventName The name of the event to fire. - * @param {Object...} args Variable number of parameters are passed to handlers. - * @return {Boolean} returns false if any of the handlers return false otherwise it returns true. - */ - fireEvent : function(){ - var a = Array.prototype.slice.call(arguments, 0), - ename = a[0].toLowerCase(), - me = this, - ret = TRUE, - ce = me.events[ename], - cc, - q, - c; - if (me.eventsSuspended === TRUE) { - if (q = me.eventQueue) { - q.push(a); - } - } - else if(typeof ce == 'object') { - if (ce.bubble){ - if(ce.fire.apply(ce, a.slice(1)) === FALSE) { - return FALSE; - } - c = me.getBubbleTarget && me.getBubbleTarget(); - if(c && c.enableBubble) { - cc = c.events[ename]; - if(!cc || typeof cc != 'object' || !cc.bubble) { - c.enableBubble(ename); + * @param {String/Array} events The event name to bubble, or an Array of event names. + */ + enableBubble : function(events){ + var me = this; + if(!Ext.isEmpty(events)){ + events = Ext.isArray(events) ? events : Array.prototype.slice.call(arguments, 0); + for(var i = 0, len = events.length; i < len; i++){ + var ename = events[i]; + ename = ename.toLowerCase(); + var ce = me.events[ename] || true; + if (typeof ce == 'boolean') { + ce = new Ext.util.Event(me, ename); + me.events[ename] = ce; } - return c.fireEvent.apply(c, a); - } - } - else { - a.shift(); - ret = ce.fire.apply(ce, a); - } - } - return ret; - }, - - /** - * Appends an event handler to this object. - * @param {String} eventName The name of the event to listen for. - * @param {Function} handler The method the event invokes. - * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * @param {Object} options (optional) An object containing handler configuration.
- * properties. This may contain any of the following properties:this reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * Combining Options
- * Using the options argument, it is possible to combine different types of listeners:
- *
- * A delayed, one-time listener.
- *
-myDataView.on('click', this.onClick, this, {
-single: true,
-delay: 100
-});
- * 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.
- *
- *
-myGridPanel.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:
- *
-myGridPanel.on({
-'click' : this.onClick,
-'mouseover' : this.onMouseOver,
-'mouseout' : this.onMouseOut,
- scope: this
-});true
- * or the first event name string if multiple event names are being passed as separate parameters.
- * @param {string} Optional. Event name if multiple event names are being passed as separate parameters.
- * Usage:
-this.addEvents('storeloaded', 'storecleared');
-this reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * @param {Object} options (optional) An object containing handler configuration.
- * @method
- */
-OBSERVABLE.on = OBSERVABLE.addListener;
/**
- * Removes an event handler (shorthand for {@link #removeListener}.)
- * @param {String} eventName The type of event the handler was associated with.
- * @param {Function} handler The handler to remove. This must be a reference to the function passed into the {@link #addListener} call.
- * @param {Object} scope (optional) The scope originally specified for the handler.
- * @method
+ * Starts capture on the specified Observable. All events will be passed
+ * to the supplied function with the event name + standard signature of the event
+ * before the event is fired. If the supplied function returns false,
+ * the event will not fire.
+ * @param {Observable} o The Observable to capture events from.
+ * @param {Function} fn The function to call when an event is fired.
+ * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the Observable firing the event.
+ * @static
*/
-OBSERVABLE.un = OBSERVABLE.removeListener;
+Ext.util.Observable.capture = function(o, fn, scope){
+ o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
+};
+
/**
- * Removes all added captures from the Observable.
- * @param {Observable} o The Observable to release
+ * Sets observability on the passed class constructor.+ *
This makes any event fired on any instance of the passed class also fire a single event through + * the class allowing for central handling of events on many instances at once.
+ *Usage:
+Ext.util.Observable.observeClass(Ext.data.Connection);
+Ext.data.Connection.on('beforerequest', function(con, options) {
+ console.log('Ajax request made to ' + options.url);
+});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);
+ },
- var makeCall = function(fn, scope, args){
- if((v = fn.apply(scope || obj, args)) !== undefined){
- if (typeof v == 'object') {
- if(v.returnValue !== undefined){
- returnValue = v.returnValue;
- }else{
- returnValue = v;
- }
- cancel = !!v.cancel;
- }
- else
- if (v === false) {
- cancel = true;
- }
- else {
- returnValue = v;
- }
- }
- };
+ // exposed only to allow manual firing
+ fireWindowResize : function(){
+ if(resizeEvent){
+ resizeTask.delay(100);
+ }
+ },
- this[method] = function(){
- var args = Array.prototype.slice.call(arguments, 0),
- b;
- returnValue = v = undefined;
- cancel = false;
+ /**
+ * 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);
+ },
- for(var i = 0, len = e.before.length; i < len; i++){
- b = e.before[i];
- makeCall(b.fn, b.scope, args);
- if (cancel) {
- return returnValue;
- }
- }
+ /**
+ * 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);
+ }
+ },
- if((v = e.originalFn.apply(obj, args)) !== undefined){
- returnValue = v;
- }
+ // private
+ fireResize : function(){
+ if(resizeEvent){
+ resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
+ }
+ },
- for(var i = 0, len = e.after.length; i < len; i++){
- b = e.after[i];
- makeCall(b.fn, b.scope, args);
- if (cancel) {
- return returnValue;
- }
- }
- return returnValue;
- };
- }
- return e;
- }
+ /**
+ * The frequency, in milliseconds, to check for text resize events (defaults to 50)
+ */
+ textResizeInterval : 50,
- return {
- // these are considered experimental
- // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
- // adds an 'interceptor' called before the original method
- beforeMethod : function(method, fn, scope){
- getMethodEvent.call(this, method).before.push({
- fn: fn,
- scope: scope
- });
- },
+ /**
+ * Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL)
+ */
+ ieDeferSrc : false,
+
+ // protected, short accessor for useKeydown
+ getKeyEvent : function(){
+ return useKeydown ? 'keydown' : 'keypress';
+ },
- // adds a 'sequence' called after the original method
- afterMethod : function(method, fn, scope){
- getMethodEvent.call(this, method).after.push({
- fn: fn,
- scope: scope
- });
- },
+ // protected for use inside the framework
+ // detects whether we should use keydown or keypress based on the browser.
+ useKeydown: useKeydown
+ };
+}());
- removeMethodListener: function(method, fn, scope){
- var e = this.getMethodEvent(method);
- for(var i = 0, len = e.before.length; i < len; i++){
- if(e.before[i].fn == fn && e.before[i].scope == scope){
- e.before.splice(i, 1);
- return;
- }
- }
- for(var i = 0, len = e.after.length; i < len; i++){
- if(e.after[i].fn == fn && e.after[i].scope == scope){
- e.after.splice(i, 1);
- return;
- }
- }
- },
+Ext.EventManager.on = Ext.EventManager.addListener;
- /**
- * Relays selected events from the specified Observable as if the events were fired by this.
- * @param {Object} o The Observable whose events this object is to relay.
- * @param {Array} events Array of event names to relay.
- */
- relayEvents : function(o, events){
- var me = this;
- function createHandler(ename){
- return function(){
- return me.fireEvent.apply(me, [ename].concat(Array.prototype.slice.call(arguments, 0)));
- };
- }
- for(var i = 0, len = events.length; i < len; i++){
- var ename = events[i];
- me.events[ename] = me.events[ename] || true;
- o.on(ename, createHandler(ename), me);
- }
- },
- /**
- * Enables events fired by this Observable to bubble up an owner hierarchy by calling
- * this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component.getBubbleTarget}. The default - * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to - * access the required target more quickly.
- *Example:
-Ext.override(Ext.form.Field, {
- // Add functionality to Field's initComponent to enable the change event to bubble
- initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
- this.enableBubble('change');
- }),
-
- // We know that we want Field's events to bubble directly to the FormPanel.
- getBubbleTarget : function() {
- if (!this.formPanel) {
- this.formPanel = this.findParentByType('form');
- }
- return this.formPanel;
- }
-});
-
-var myForm = new Ext.formPanel({
- title: 'User Details',
- items: [{
- ...
- }],
- listeners: {
- change: function() {
- // Title goes red if form has been modified.
- myForm.header.setStyle('color', 'red');
- }
- }
-});
-this reference) in which the function is executed. Defaults to the Observable firing the event.
- * @static
- */
-Ext.util.Observable.capture = function(o, fn, scope){
- o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
-};
-
-
-/**
- * Sets observability on the passed class constructor.- *
This makes any event fired on any instance of the passed class also fire a single event through - * the class allowing for central handling of events on many instances at once.
- *Usage:
-Ext.util.Observable.observeClass(Ext.data.Connection);
-Ext.data.Connection.on('beforerequest', function(con, options) {
- console.log('Ajax request made to ' + options.url);
-});this reference) in which the handler function is executed. Defaults to the Element.
- * @param {Object} options (optional) An object containing handler configuration properties.
- * This may contain any of the following properties:this reference) in which the handler function is executed. Defaults to the Element.See {@link Ext.Element#addListener} for examples of how to use these options.
- */ - addListener : function(element, eventName, fn, scope, options){ - if(typeof eventName == 'object'){ - var o = eventName, e, val; - for(e in o){ - val = o[e]; - if(!propRe.test(e)){ - if(Ext.isFunction(val)){ - // shared options - listen(element, e, o, val, o.scope); - }else{ - // individual options - listen(element, e, val); - } - } - } - } else { - listen(element, eventName, options, fn, scope); - } - }, - - /** - * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically - * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version. - * @param {String/HTMLElement} el The id or html element from which to remove the listener. - * @param {String} eventName The name of the event. - * @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call. - * @param {Object} scope If a scope (this reference) was specified when the listener was added,
- * then this must refer to the same object.
- */
- removeListener : function(el, eventName, fn, scope){
- el = Ext.getDom(el);
- var id = getId(el),
- f = el && (Ext.elCache[id].events)[eventName] || [],
- wrap, i, l, k, len, fnc;
-
- for (i = 0, len = f.length; i < len; i++) {
-
- /* 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);
-
- // jQuery workaround that should be removed from Ext Core
- if(wrap && el.addEventListener && eventName == "mousewheel"){
- el.removeEventListener("DOMMouseScroll", wrap, false);
- }
-
- // fix stopped mousedowns on the document
- if(wrap && el == DOC && eventName == "mousedown"){
- Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
- }
-
- 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;
- }
- }
- },
-
- /**
- * 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);
-
- // jQuery workaround that should be removed from Ext Core
- if(el.addEventListener && wrap && ename == "mousewheel"){
- el.removeEventListener("DOMMouseScroll", wrap, false);
- }
-
- // 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 = {};
- }
- },
-
- 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;
- }
- },
-
- 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);
- }
- }
- },
-
- _unload : function() {
- var el;
- for (el in Ext.elCache) {
- Ext.EventManager.removeAll(el);
- }
- delete Ext.elCache;
- delete Ext.Element._flyweights;
-
- // Abort any outstanding Ajax requests
- var c,
- conn,
- tid,
- ajax = Ext.lib.Ajax;
- (typeof ajax.conn == 'object') ? conn = ajax.conn : conn = {};
- for (tid in conn) {
- c = conn[tid];
- if (c) {
- ajax.abort({conn: c, tId: tid});
- }
- }
- },
- /**
- * 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(Ext.isReady){ // if it already fired or document.body is present
- docReadyEvent || (docReadyEvent = new Ext.util.Event());
- docReadyEvent.addListener(fn, scope, options);
- docReadyEvent.fire();
- docReadyEvent.listeners = [];
- }else{
- if(!docReadyEvent){
- initDocReady();
- }
- options = options || {};
- options.delay = options.delay || 1;
- docReadyEvent.addListener(fn, scope, options);
- }
- },
-
- /**
- * Forces a document ready state transition for the framework. Used when Ext is loaded
- * into a DOM structure AFTER initial page load (Google API or other dynamic load scenario.
- * Any pending 'onDocumentReady' handlers will be fired (if not already handled).
- */
- fireDocReady : fireDocReady
- };
- /**
- * 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
- */
- pub.un = pub.removeListener;
-
- pub.stoppedMouseDownEvent = new Ext.util.Event();
- return pub;
-}();
-/**
- * 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
- */
-Ext.onReady = Ext.EventManager.onDocumentReady;
-
-
-//Initialize doc classes
-(function(){
-
- 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" : ""];
-
- 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(Ext.isMac){
- cls.push("ext-mac");
- }
- if(Ext.isLinux){
- cls.push("ext-linux");
- }
-
- 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;
- }
-
- if(!initExtCss()){
- Ext.onReady(initExtCss);
- }
-})();
-
-
-/**
- * @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)
- ...
-}
-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);
-
- // Handle click on any child of an element
- Ext.getBody().on('click', function(e){
- if(e.within('some-el')){
- alert('Clicked on a child of some-el!');
- }
- });
-
- // Handle click directly on an element, ignoring clicks on child nodes
- Ext.getBody().on('click', function(e,t){
- if((t.id == 'some-el') && !e.within(t, true)){
- alert('Clicked directly on some-el!');
- }
- });
- 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 <= 46); // Print Screen, Insert, Delete
- },
-
- 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);
-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). - */ -(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; - } - - /** - * 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; - }, - -// 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{ - dom.focus(); - } - }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:this reference) in which the handler function is executed.
- * If omitted, defaults to this Element..
- * @param {Object} options (optional) An object containing handler configuration properties.
- * This may contain any of the following properties:this reference) in which the handler function is executed.
- * If omitted, defaults to this Element.
- * Combining Options
- * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
- * addListener. The two are equivalent. Using the options argument, it is possible to combine different
- * types of listeners:
- *
- * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
- * options object. The options object is available as the third parameter in the handler function.
-el.on('click', this.onClick, this, {
- single: true,
- delay: 100,
- stopEvent : true,
- forumId: 4
-});
- * Attaching multiple handlers in 1 call
- * The method also allows for a single argument to be passed which is a config object containing properties
- * which specify multiple handlers.
- * Code:
-el.on({
- 'click' : {
- fn: this.onClick,
- scope: this,
- delay: 100
- },
- 'mouseover' : {
- fn: this.onMouseOver,
- scope: this
- },
- 'mouseout' : {
- fn: this.onMouseOut,
- scope: this
- }
-});
- * Or a shorthand syntax:
- * Code:
-el.on({
- 'click' : this.onClick,
- 'mouseover' : this.onMouseOver,
- 'mouseout' : this.onMouseOut,
- scope: this
-});
- * delegate
- *This is a configuration option that you can pass along when registering a handler for - * an event to assist with event delegation. Event delegation is a technique that is used to - * reduce memory consumption and prevent exposure to memory-leaks. By registering an event - * for a container element as opposed to each element within a container. By setting this - * configuration option to a simple selector, the target element will be filtered to look for - * a descendant of the target. - * For example:
-// using this markup:
-<div id='elId'>
- <p id='p1'>paragraph one</p>
- <p id='p2' class='clickable'>paragraph two</p>
- <p id='p3'>paragraph three</p>
-</div>
-// utilize event delegation to registering just one handler on the container element:
-el = Ext.get('elId');
-el.on(
- 'click',
- function(e,t) {
- // handle click
- console.info(t.id); // 'p2'
- },
- this,
- {
- // filter the target element to be a descendant with the class 'clickable'
- delegate: '.clickable'
- }
-);
- *
-el.removeListener('click', this.handlerFn);
-// or
-el.un('click', this.handlerFn);
-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){ - // refresh dom element in case no longer valid, - // catch case where it hasn't been appended - - // If an el instance is passed, don't pass to getElementById without some kind of id - if (Ext.isIE && (el.id == undefined || el.id == '')) { - el.dom = el.dom; - } else { - el.dom = DOC.getElementById(el.id) || el.dom; - } - } - return el; - } else if(el.isComposite) { - return el; - } else if(Ext.isArray(el)) { - return El.select(el); - } else if(el == DOC) { - // create a bogus element object representing the document object - if(!docEl){ - var f = function(){}; - f.prototype = El.prototype; - docEl = new f(); - docEl.dom = DOC; - } - return docEl; - } - return null; -}; - -El.addToCache = function(el, id){ - 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; - } - 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]; - } - } - // 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); - -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]; - } - return ret; -}; - -/** - * 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.
- * 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; - -/** - *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 - * @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; - } - 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{ - 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(typeof callback == 'function'){ - 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 = /(?:-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]);
-
-// 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"); }
-});
- * 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");
- * {width: widthValue, height: heightValue}.Returns the dimensions of the element available to lay content out in.
- *
If the element (or any ancestor element) has CSS style display : none, the dimensions will be zero.
- var vpSize = Ext.getBody().getViewSize();
-
- // all Windows created afterwards will have a default value of 90% height and 95% width
- Ext.Window.override({
- width: vpSize.width * 0.9,
- height: vpSize.height * 0.95
- });
- // To handle window resizing you would have to hook onto onWindowResize.
- * 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); - }, - - /** - * Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates. - * @param {Mixed} element The element to get the offsets from. - * @return {Array} The XY page offsets (e.g. [100, -200]) - */ - getOffsetsTo : function(el){ - var o = this.getXY(), - e = Ext.fly(el, '_internal').getXY(); - return [o[0]-e[0],o[1]-e[1]]; - }, - - /** - * Sets the 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). - * @param {Number} The X position of the element - * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object - * @return {Ext.Element} this - */ - setX : function(x, animate){ - return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1)); - }, - - /** - * Sets the 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). - * @param {Number} The Y position of the element - * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object - * @return {Ext.Element} this - */ - setY : function(y, animate){ - return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1)); - }, - - /** - * Sets the element's left position directly using CSS style (instead of {@link #setX}). - * @param {String} left The left CSS property value - * @return {Ext.Element} this - */ - setLeft : function(left){ - this.setStyle(LEFT, this.addUnits(left)); - return this; - }, - - /** - * Sets the element's top position directly using CSS style (instead of {@link #setY}). - * @param {String} top The top CSS property value - * @return {Ext.Element} this - */ - setTop : function(top){ - this.setStyle(TOP, this.addUnits(top)); - return this; - }, - - /** - * Sets the element's CSS right style. - * @param {String} right The right CSS property value - * @return {Ext.Element} this - */ - setRight : function(right){ - this.setStyle(RIGHT, this.addUnits(right)); - return this; - }, - - /** - * Sets the element's CSS bottom style. - * @param {String} bottom The bottom CSS property value - * @return {Ext.Element} this - */ - setBottom : function(bottom){ - this.setStyle(BOTTOM, this.addUnits(bottom)); - return this; - }, - - /** - * Sets the position of the element in page coordinates, regardless of how the element is positioned. - * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). - * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based) - * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object - * @return {Ext.Element} this - */ - setXY : function(pos, animate){ - var me = this; - if(!animate || !me.anim){ - D.setXY(me.dom, pos); - }else{ - me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion'); - } - return me; - }, - - /** - * Sets the position of the element in page coordinates, regardless of how the element is positioned. - * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). - * @param {Number} x X value for new position (coordinates are page-based) - * @param {Number} y Y value for new position (coordinates are page-based) - * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object - * @return {Ext.Element} this - */ - setLocation : function(x, y, animate){ - return this.setXY([x, y], this.animTest(arguments, animate, 2)); - }, - - /** - * Sets the position of the element in page coordinates, regardless of how the element is positioned. - * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). - * @param {Number} x X value for new position (coordinates are page-based) - * @param {Number} y Y value for new position (coordinates are page-based) - * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object - * @return {Ext.Element} this - */ - moveTo : function(x, y, animate){ - return this.setXY([x, y], this.animTest(arguments, animate, 2)); - }, - - /** - * Gets the left X coordinate - * @param {Boolean} local True to get the local css position instead of page coordinate - * @return {Number} - */ - getLeft : function(local){ - return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0; - }, - - /** - * Gets the right X coordinate of the element (element X position + element width) - * @param {Boolean} local True to get the local css position instead of page coordinate - * @return {Number} - */ - getRight : function(local){ - var me = this; - return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0; - }, - - /** - * Gets the top Y coordinate - * @param {Boolean} local True to get the local css position instead of page coordinate - * @return {Number} - */ - getTop : function(local) { - return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0; - }, - - /** - * Gets the bottom Y coordinate of the element (element Y position + element height) - * @param {Boolean} local True to get the local css position instead of page coordinate - * @return {Number} - */ - getBottom : function(local){ - var me = this; - return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0; - }, - - /** - * Initializes positioning on this element. If a desired position is not passed, it will make the - * the element positioned relative IF it is not already positioned. - * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed" - * @param {Number} zIndex (optional) The zIndex to apply - * @param {Number} x (optional) Set the page X position - * @param {Number} y (optional) Set the page Y position - */ - position : function(pos, zIndex, x, y){ - var me = this; - - if(!pos && me.isStyle(POSITION, STATIC)){ - me.setStyle(POSITION, RELATIVE); - } else if(pos) { - me.setStyle(POSITION, pos); - } - if(zIndex){ - me.setStyle(ZINDEX, zIndex); - } - if(x || y) me.setXY([x || false, y || false]); - }, - - /** - * Clear positioning back to the default when the document was loaded - * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'. - * @return {Ext.Element} this - */ - clearPositioning : function(value){ - value = value || ''; - this.setStyle({ - left : value, - right : value, - top : value, - bottom : value, - "z-index" : "", - position : STATIC - }); - return this; - }, - - /** - * Gets an object with all CSS positioning properties. Useful along with setPostioning to get - * snapshot before performing an update and then restoring the element. - * @return {Object} - */ - getPositioning : function(){ - var l = this.getStyle(LEFT); - var t = this.getStyle(TOP); - return { - "position" : this.getStyle(POSITION), - "left" : l, - "right" : l ? "" : this.getStyle(RIGHT), - "top" : t, - "bottom" : t ? "" : this.getStyle(BOTTOM), - "z-index" : this.getStyle(ZINDEX) - }; - }, - - /** - * Set positioning with an object returned by getPositioning(). - * @param {Object} posCfg - * @return {Ext.Element} this - */ - setPositioning : function(pc){ - var me = this, - style = me.dom.style; - - me.setStyle(pc); - - if(pc.right == AUTO){ - style.right = ""; - } - if(pc.bottom == AUTO){ - style.bottom = ""; - } - - return me; - }, - - /** - * Translates the passed page coordinates into left/top css values for this element - * @param {Number/Array} x The page x or an array containing [x, y] - * @param {Number} y (optional) The page y, required if x is not an array - * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)} - */ - translatePoints : function(x, y){ - y = isNaN(x[1]) ? y : x[1]; - x = isNaN(x[0]) ? x : x[0]; - var me = this, - relative = me.isStyle(POSITION, RELATIVE), - o = me.getXY(), - l = parseInt(me.getStyle(LEFT), 10), - t = parseInt(me.getStyle(TOP), 10); - - l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft); - t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop); - - return {left: (x - o[0] + l), top: (y - o[1] + t)}; - }, - - animTest : function(args, animate, i) { - return !!animate && this.preanim ? this.preanim(args, i) : false; - } -}); -})();/** - * @class Ext.Element - */ -Ext.Element.addMethods({ - /** - * Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently. - * @param {Object} box The box to fill {x, y, width, height} - * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically - * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object - * @return {Ext.Element} this - */ - setBox : function(box, adjust, animate){ - var me = this, - w = box.width, - h = box.height; - if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){ - w -= (me.getBorderWidth("lr") + me.getPadding("lr")); - h -= (me.getBorderWidth("tb") + me.getPadding("tb")); - } - me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2)); - return me; - }, - - /** - * 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: <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 Animation Control Object enables gradual transitions for any member of an - * element's style object that takes a numeric value including but not limited to - * these properties:
Each Animation Property is a config object with optional properties:
- ** do not specify both to and by for an animation property
- *The supported animation types:
-var el = Ext.get('complexEl');
-el.animate(
- // animation control object
- {
- borderWidth: {to: 3, from: 0},
- opacity: {to: .3, from: 1},
- height: {to: 50, from: el.getHeight()},
- width: {to: 300, from: el.getWidth()},
- top : {by: - 100, unit: 'px'},
- },
- 0.35, // animation duration
- null, // callback
- 'easeOut', // easing method
- 'run' // animation type ('run','color','motion','scroll')
-);
- * Animates transition of background, text, or border colors.
- *
-el.animate(
- // animation control object
- {
- color: { to: '#06e' },
- backgroundColor: { to: '#e06' }
- },
- 0.35, // animation duration
- null, // callback
- 'easeOut', // easing method
- 'color' // animation type ('run','color','motion','scroll')
-);
- * Animates the motion of an element to/from specific points using optional bezier - * way points during transit.
- *
-el.animate(
- // animation control object
- {
- borderWidth: {to: 3, from: 0},
- opacity: {to: .3, from: 1},
- height: {to: 50, from: el.getHeight()},
- width: {to: 300, from: el.getWidth()},
- top : {by: - 100, unit: 'px'},
- points: {
- to: [50, 100], // go to this point
- control: [ // optional bezier way points
- [ 600, 800],
- [-100, 200]
- ]
}
- },
- 3000, // animation duration (milliseconds!)
- null, // callback
- 'easeOut', // easing method
- 'motion' // animation type ('run','color','motion','scroll')
-);
- * Animate horizontal or vertical scrolling of an overflowing page element.
- *
-el.animate(
- // animation control object
- {
- scroll: {to: [400, 300]}
- },
- 0.35, // animation duration
- null, // callback
- 'easeOut', // easing method
- 'scroll' // animation type ('run','color','motion','scroll')
-);
- * {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 (this reference) in which the specified function is executed. Defaults to this Element.
- * @return {Ext.KeyMap} The KeyMap created
- */
- addKeyListener : function(key, fn, scope){
- var config;
- if(typeof key != 'object' || Ext.isArray(key)){
- config = {
- key: key,
- fn: fn,
- scope: scope
- };
- }else{
- config = {
- key : key.key,
- shift : key.shift,
- ctrl : key.ctrl,
- alt : key.alt,
- fn: fn,
- scope: scope
- };
+ 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;
+ }
+ if (y < scrollY){
+ y = swapY ? r.bottom : scrollY;
+ }
}
- return new Ext.KeyMap(this, config);
+ return [x,y];
},
/**
- * Creates a KeyMap for this element
- * @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details
- * @return {Ext.KeyMap} The KeyMap created
- */
- addKeyMap : function(config){
- return new Ext.KeyMap(this, config);
- }
-});
-(function(){
- // contants
- var NULL = null,
- UNDEFINED = undefined,
- TRUE = true,
- FALSE = false,
- SETX = "setX",
- SETY = "setY",
- SETXY = "setXY",
- LEFT = "left",
- BOTTOM = "bottom",
- TOP = "top",
- RIGHT = "right",
- HEIGHT = "height",
- WIDTH = "width",
- POINTS = "points",
- HIDDEN = "hidden",
- ABSOLUTE = "absolute",
- VISIBLE = "visible",
- MOTION = "motion",
- POSITION = "position",
- EASEOUT = "easeOut",
- /*
- * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element
- */
- flyEl = new Ext.Element.Flyweight(),
- queues = {},
- getObject = function(o){
- return o || {};
- },
- fly = function(dom){
- flyEl.dom = dom;
- flyEl.id = Ext.id(dom);
- return flyEl;
- },
- /*
- * Queueing now stored outside of the element due to closure issues
- */
- getQueue = function(id){
- if(!queues[id]){
- queues[id] = [];
- }
- return queues[id];
- },
- setQueue = function(id, value){
- queues[id] = value;
- };
-
-//Notifies Element that fx methods are available
-Ext.enableFx = TRUE;
-
-/**
- * @class Ext.Fx
- * A class to provide basic animation and visual effects support. Note: This class is automatically applied - * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}. - * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx must be - * {@link Ext#enableFx included} in order for the Element effects to work.
Method Chaining
- *It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that - * they return the Element object itself as the method return value, it is not always possible to mix the two in a single - * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. - * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, - * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the - * expected results and should be done with care. Also see {@link #callback}.
Anchor Options for Motion Effects
- *Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element - * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:
+ * 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: + *Value Description ----- ----------------------------- -tl The top left corner +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- * Note: some Fx methods accept specific custom config parameters. The options shown in the Config Options - * section below are common options that can be passed to any Fx method unless otherwise noted. - * - * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the - * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together - * and called in sequence (see note for Method Chaining above), for example:
- * el.slideIn().highlight();
- * this reference) in which the {@link #callback} function is executed. Defaults to the browser window.
- *
- * @cfg {String} easing A valid Ext.lib.Easing value for the effect:
-// default: slide the element in from the top
-el.slideIn();
+Example Usage:
+
+// align el to other-el using the default positioning ("tl-bl", non-constrained)
+el.alignTo("other-el");
-// custom: slide the element in from the right with a 2-second duration
-el.slideIn('r', { duration: 2 });
+// align the top left corner of el with the top right corner of other-el (constrained to viewport)
+el.alignTo("other-el", "tr?");
-// common config options shown with default values
-el.slideIn('t', {
- easing: 'easeOut',
- duration: .5
-});
+// 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 {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
+ * @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
*/
- slideIn : function(anchor, o){
- o = getObject(o);
- var me = this,
- dom = me.dom,
- st = dom.style,
- xy,
- r,
- b,
- wrap,
- after,
- st,
- args,
- pt,
- bw,
- bh;
-
- anchor = anchor || "t";
+ 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;
+ },
- me.queueFx(o, function(){
- xy = fly(dom).getXY();
- // fix display to visibility
- fly(dom).fixDisplay();
-
- // restore values after effect
- r = fly(dom).getFxRestore();
- b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
- b.right = b.x + b.width;
- b.bottom = b.y + b.height;
-
- // fixed size for slide
- fly(dom).setWidth(b.width).setHeight(b.height);
-
- // wrap if needed
- wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);
-
- st.visibility = VISIBLE;
- st.position = ABSOLUTE;
-
- // clear out temp styles after slide and unwrap
- function after(){
- fly(dom).fxUnwrap(wrap, r.pos, o);
- st.width = r.width;
- st.height = r.height;
- fly(dom).afterFx(o);
- }
-
- // time to calculate the positions
- pt = {to: [b.x, b.y]};
- bw = {to: b.width};
- bh = {to: b.height};
-
- function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){
- var ret = {};
- fly(wrap).setWidth(ww).setHeight(wh);
- if(fly(wrap)[sXY]){
- fly(wrap)[sXY](sXYval);
- }
- style[s1] = style[s2] = "0";
- if(w){
- ret.width = w
- };
- if(h){
- ret.height = h;
- }
- if(p){
- ret.points = p;
+ // 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 ret;
- };
+ }
+
+ var s = el.getScroll();
+
+ vx += offsets.left + s.left;
+ vy += offsets.top + s.top;
+
+ vw -= offsets.right;
+ vh -= offsets.bottom;
+
+ var vr = vx + vw,
+ vb = vy + vh,
+ xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]),
+ x = xy[0], y = xy[1],
+ offset = this.getConstrainOffset(),
+ w = this.dom.offsetWidth + offset,
+ h = this.dom.offsetHeight + offset;
+
+ // 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];
+// }
+// }
- args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
- t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
- l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
- r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],
- b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],
- tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],
- bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
- br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
- tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
- });
-
- st.visibility = VISIBLE;
- fly(wrap).show();
-
- arguments.callee.anim = fly(wrap).fxanim(args,
- o,
- MOTION,
- .5,
- EASEOUT,
- after);
- });
- return me;
+// // 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;
+// },
+
+ // private, used internally
+ getConstrainOffset : function(){
+ return 0;
},
/**
- * Slides the element out of view. An anchor point can be optionally passed to set the end point
- * for the slide effect. When the effect is completed, the element will be hidden (visibility =
- * 'hidden') but block elements will still take up space in the document. The element must be removed
- * from the DOM using the 'remove' config option if desired. This function automatically handles
- * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
- * Usage:
- *
-// default: slide the element out to the top
-el.slideOut();
-
-// custom: slide the element out to the right with a 2-second duration
-el.slideOut('r', { duration: 2 });
-
-// common config options shown with default values
-el.slideOut('t', {
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- slideOut : function(anchor, o){
- o = getObject(o);
- var me = this,
- dom = me.dom,
- st = dom.style,
- xy = me.getXY(),
- wrap,
- r,
- b,
- a,
- zero = {to: 0};
-
- anchor = anchor || "t";
-
- me.queueFx(o, function(){
-
- // restore values after effect
- r = fly(dom).getFxRestore();
- b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
- b.right = b.x + b.width;
- b.bottom = b.y + b.height;
-
- // fixed size for slide
- fly(dom).setWidth(b.width).setHeight(b.height);
-
- // wrap if needed
- wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);
-
- st.visibility = VISIBLE;
- st.position = ABSOLUTE;
- fly(wrap).setWidth(b.width).setHeight(b.height);
-
- function after(){
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
- fly(dom).fxUnwrap(wrap, r.pos, o);
- st.width = r.width;
- st.height = r.height;
- fly(dom).afterFx(o);
- }
-
- function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){
- var ret = {};
-
- style[s1] = style[s2] = "0";
- ret[p1] = v1;
- if(p2){
- ret[p2] = v2;
- }
- if(p3){
- ret[p3] = v3;
- }
-
- return ret;
- };
-
- a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
- t : [st, LEFT, BOTTOM, HEIGHT, zero],
- l : [st, RIGHT, TOP, WIDTH, zero],
- r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],
- b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
- tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],
- bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
- br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],
- tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]
- });
-
- arguments.callee.anim = fly(wrap).fxanim(a,
- o,
- MOTION,
- .5,
- EASEOUT,
- after);
- });
- return me;
+ * 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');
},
/**
- * Fades the element out while slowly expanding it in all directions. When the effect is completed, the
- * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
- * The element must be removed from the DOM using the 'remove' config option if desired.
- * Usage:
- *
-// default
-el.puff();
-
-// common config options shown with default values
-el.puff({
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: 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');
+ }
});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- puff : function(o){
- o = getObject(o);
- var me = this,
- dom = me.dom,
- st = dom.style,
- width,
- height,
- r;
-
- me.queueFx(o, function(){
- width = fly(dom).getWidth();
- height = fly(dom).getHeight();
- fly(dom).clearOpacity();
- fly(dom).show();
-
- // restore values after effect
- r = fly(dom).getFxRestore();
-
- function after(){
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
- fly(dom).clearOpacity();
- fly(dom).setPositioning(r.pos);
- st.width = r.width;
- st.height = r.height;
- st.fontSize = '';
- fly(dom).afterFx(o);
- }
-
- arguments.callee.anim = fly(dom).fxanim({
- width : {to : fly(dom).adjustWidth(width * 2)},
- height : {to : fly(dom).adjustHeight(height * 2)},
- points : {by : [-width * .5, -height * .5]},
- opacity : {to : 0},
- fontSize: {to : 200, unit: "%"}
- },
- o,
- MOTION,
- .5,
- EASEOUT,
- after);
- });
- return me;
- },
-
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods({
/**
- * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
- * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
- * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
- * Usage:
- *
-// default
-el.switchOff();
-
-// all config options shown with default values
-el.switchOff({
- easing: 'easeIn',
- duration: .3,
- remove: false,
- useDisplay: false
-});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
+ * 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
*/
- switchOff : function(o){
- o = getObject(o);
- var me = this,
- dom = me.dom,
- st = dom.style,
- r;
-
- me.queueFx(o, function(){
- fly(dom).clearOpacity();
- fly(dom).clip();
-
- // restore values after effect
- r = fly(dom).getFxRestore();
-
- function after(){
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
- fly(dom).clearOpacity();
- fly(dom).setPositioning(r.pos);
- st.width = r.width;
- st.height = r.height;
- fly(dom).afterFx(o);
- };
-
- fly(dom).fxanim({opacity : {to : 0.3}},
- NULL,
- NULL,
- .1,
- NULL,
- function(){
- fly(dom).clearOpacity();
- (function(){
- fly(dom).fxanim({
- height : {to : 1},
- points : {by : [0, fly(dom).getHeight() * .5]}
- },
- o,
- MOTION,
- 0.3,
- 'easeIn',
- after);
- }).defer(100);
- });
- });
- return me;
- },
-
- /**
- * Highlights the Element by setting a color (applies to the background-color by default, but can be
- * changed using the "attr" config option) and then fading back to the original color. If no original
- * color is available, you should provide the "endColor" config option which will be cleared after the animation.
- * Usage:
-
-// default: highlight background to yellow
-el.highlight();
-
-// custom: highlight foreground text to blue for 2 seconds
-el.highlight("0000ff", { attr: 'color', duration: 2 });
-
-// common config options shown with default values
-el.highlight("ffff9c", {
- attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
- endColor: (current color) or "ffffff",
- easing: 'easeIn',
- duration: 1
-});
-
- * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- highlight : function(color, o){
- o = getObject(o);
- var me = this,
- dom = me.dom,
- attr = o.attr || "backgroundColor",
- a = {},
- restore;
-
- me.queueFx(o, function(){
- fly(dom).clearOpacity();
- fly(dom).show();
-
- function after(){
- dom.style[attr] = restore;
- fly(dom).afterFx(o);
- }
- restore = dom.style[attr];
- a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};
- arguments.callee.anim = fly(dom).fxanim(a,
- o,
- 'color',
- 1,
- 'easeIn',
- after);
- });
- return me;
- },
-
- /**
- * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
- * Usage:
-
-// default: a single light blue ripple
-el.frame();
+ select : function(selector, unique){
+ return Ext.Element.select(selector, unique, this.dom);
+ }
+});/**
+ * @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
+ */
-// custom: 3 red ripples lasting 3 seconds total
-el.frame("ff0000", 3, { duration: 3 });
+// special markup used throughout Ext when box wrapping elements
+Ext.Element.boxMarkup = '';
-// common config options shown with default values
-el.frame("C3DAF9", 1, {
- duration: 1 //duration of each individual ripple.
- // Note: Easing is not configurable and will be ignored if included
-});
-
- * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
- * @param {Number} count (optional) The number of ripples to display (defaults to 1)
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- frame : function(color, count, o){
- o = getObject(o);
- var me = this,
- dom = me.dom,
- proxy,
- active;
-
- me.queueFx(o, function(){
- color = color || '#C3DAF9';
- if(color.length == 6){
- color = '#' + color;
- }
- count = count || 1;
- fly(dom).show();
-
- var xy = fly(dom).getXY(),
- b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},
- queue = function(){
- proxy = fly(document.body || document.documentElement).createChild({
- style:{
- position : ABSOLUTE,
- 'z-index': 35000, // yee haw
- border : '0px solid ' + color
- }
- });
- return proxy.queueFx({}, animFn);
- };
-
-
- arguments.callee.anim = {
- isAnimated: true,
- stop: function() {
- count = 0;
- proxy.stopFx();
- }
- };
-
- function animFn(){
- var scale = Ext.isBorderBox ? 2 : 1;
- active = proxy.anim({
- top : {from : b.y, to : b.y - 20},
- left : {from : b.x, to : b.x - 20},
- borderWidth : {from : 0, to : 10},
- opacity : {from : 1, to : 0},
- height : {from : b.height, to : b.height + 20 * scale},
- width : {from : b.width, to : b.width + 20 * scale}
- },{
- duration: o.duration || 1,
- callback: function() {
- proxy.remove();
- --count > 0 ? queue() : fly(dom).afterFx(o);
- }
- });
- arguments.callee.anim = {
- isAnimated: true,
- stop: function(){
- active.stop();
- }
- };
- };
- queue();
- });
- return me;
- },
+Ext.Element.addMethods(function(){
+ var INTERNAL = "_internal",
+ pxMatch = /(\d+\.?\d+)px/;
+ 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;
+ },
- /**
- * Creates a pause before any subsequent queued effects begin. If there are
- * no effects queued after the pause it will have no effect.
- * Usage:
-
-el.pause(1);
-
- * @param {Number} seconds The length of time to pause (in seconds)
- * @return {Ext.Element} The Element
- */
- pause : function(seconds){
- var dom = this.dom,
- t;
-
- this.queueFx({}, function(){
- t = setTimeout(function(){
- fly(dom).afterFx({});
- }, seconds * 1000);
- arguments.callee.anim = {
- isAnimated: true,
- stop: function(){
- clearTimeout(t);
- fly(dom).afterFx({});
- }
- };
- });
- 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
+ */
+ getStyles : function(){
+ var ret = {};
+ Ext.each(arguments, function(v) {
+ ret[v] = this.getStyle(v);
+ },
+ this);
+ return ret;
+ },
- /**
- * Fade an element in (from transparent to opaque). The ending opacity can be specified
- * using the {@link #endOpacity} config option.
- * Usage:
-
-// default: fade in from opacity 0 to 100%
-el.fadeIn();
+ // 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;
+ }
+ },
-// custom: fade in from opacity 0 to 75% over 2 seconds
-el.fadeIn({ endOpacity: .75, duration: 2});
+ /**
+ * 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();
-// common config options shown with default values
-el.fadeIn({
- endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
- easing: 'easeOut',
- duration: .5
-});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- fadeIn : function(o){
- o = getObject(o);
- var me = this,
- dom = me.dom,
- to = o.endOpacity || 1;
-
- me.queueFx(o, function(){
- fly(dom).setOpacity(0);
- fly(dom).fixDisplay();
- dom.style.visibility = VISIBLE;
- arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},
- o, NULL, .5, EASEOUT, function(){
- if(to == 1){
- fly(dom).clearOpacity();
- }
- fly(dom).afterFx(o);
- });
- });
- return me;
- },
+ // 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;
+ },
- /**
- * Fade an element out (from opaque to transparent). The ending opacity can be specified
- * using the {@link #endOpacity} config option. Note that IE may require
- * {@link #useDisplay}:true in order to redisplay correctly.
- * Usage:
-
-// default: fade out from the element's current opacity to 0
-el.fadeOut();
-
-// custom: fade out from the element's current opacity to 25% over 2 seconds
-el.fadeOut({ endOpacity: .25, duration: 2});
-
-// common config options shown with default values
-el.fadeOut({
- endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- fadeOut : function(o){
- o = getObject(o);
- var me = this,
- dom = me.dom,
- style = dom.style,
- to = o.endOpacity || 0;
-
- me.queueFx(o, function(){
- arguments.callee.anim = fly(dom).fxanim({
- opacity : {to : to}},
- o,
- NULL,
- .5,
- EASEOUT,
- function(){
- if(to == 0){
- Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ?
- style.display = "none" :
- style.visibility = HIDDEN;
-
- fly(dom).clearOpacity();
- }
- fly(dom).afterFx(o);
- });
- });
- return me;
- },
+ /**
+ * 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(typeof width == 'object'){ // 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;
+ },
- /**
- * Animates the transition of an element's dimensions from a starting height/width
- * to an ending height/width. This method is a convenience implementation of {@link shift}.
- * Usage:
-
-// change height and width to 100x100 pixels
-el.scale(100, 100);
-
-// common config options shown with default values. The height and width will default to
-// the element's existing values if passed as null.
-el.scale(
- [element's width],
- [element's height], {
- easing: 'easeOut',
- duration: .35
- }
-);
-
- * @param {Number} width The new width (pass undefined to keep the original width)
- * @param {Number} height The new height (pass undefined to keep the original height)
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- scale : function(w, h, o){
- this.shift(Ext.apply({}, o, {
- width: w,
- height: h
- }));
- return this;
- },
+ /**
+ * 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;
+ },
- /**
- * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
- * Any of these properties not specified in the config object will not be changed. This effect
- * requires that at least one new dimension, position or opacity setting must be passed in on
- * the config object in order for the function to have any effect.
- * Usage:
-
-// slide the element horizontally to x position 200 while changing the height and opacity
-el.shift({ x: 200, height: 50, opacity: .8 });
-
-// common config options shown with default values.
-el.shift({
- width: [element's width],
- height: [element's height],
- x: [element's x position],
- y: [element's y position],
- opacity: [element's opacity],
- easing: 'easeOut',
- duration: .35
-});
-
- * @param {Object} options Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- shift : function(o){
- o = getObject(o);
- var dom = this.dom,
- a = {};
-
- this.queueFx(o, function(){
- for (var prop in o) {
- if (o[prop] != UNDEFINED) {
- a[prop] = {to : o[prop]};
+ /**
+ * 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');
}
- }
-
- a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;
- a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;
-
- if (a.x || a.y || a.xy) {
- a.points = a.xy ||
- {to : [ a.x ? a.x.to : fly(dom).getX(),
- a.y ? a.y.to : fly(dom).getY()]};
}
+ 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));
+ },
- arguments.callee.anim = fly(dom).fxanim(a,
- o,
- MOTION,
- .35,
- EASEOUT,
+ /**
+ * 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(){
- fly(dom).afterFx(o);
- });
- });
- return this;
- },
+ Ext.fly(this, INTERNAL).addClass(className);
+ },
+ function(){
+ Ext.fly(this, INTERNAL).removeClass(className);
+ }
+ );
+ return this;
+ },
- /**
- * Slides the element while fading it out of view. An anchor point can be optionally passed to set the
- * ending point of the effect.
- * Usage:
- *
-// default: slide the element downward while fading out
-el.ghost();
-
-// custom: slide the element out to the right with a 2-second duration
-el.ghost('r', { duration: 2 });
-
-// common config options shown with default values
-el.ghost('b', {
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- ghost : function(anchor, o){
- o = getObject(o);
- var me = this,
- dom = me.dom,
- st = dom.style,
- a = {opacity: {to: 0}, points: {}},
- pt = a.points,
- r,
- w,
- h;
-
- anchor = anchor || "b";
+ /**
+ * 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;
+ },
- me.queueFx(o, function(){
- // restore values after effect
- r = fly(dom).getFxRestore();
- w = fly(dom).getWidth();
- h = fly(dom).getHeight();
-
- function after(){
- o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
- fly(dom).clearOpacity();
- fly(dom).setPositioning(r.pos);
- st.width = r.width;
- st.height = r.height;
- fly(dom).afterFx(o);
- }
-
- pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {
- t : [0, -h],
- l : [-w, 0],
- r : [w, 0],
- b : [0, h],
- tl : [-w, -h],
- bl : [-w, h],
- br : [w, h],
- tr : [w, -h]
+ /**
+ * 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);
});
-
- arguments.callee.anim = fly(dom).fxanim(a,
- o,
- MOTION,
- .5,
- EASEOUT, after);
- });
- return me;
- },
+ return this;
+ },
- /**
- * Ensures that all effects queued after syncFx is called on the element are
- * run concurrently. This is the opposite of {@link #sequenceFx}.
- * @return {Ext.Element} The Element
- */
- syncFx : function(){
- var me = this;
- me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
- block : FALSE,
- concurrent : TRUE,
- stopFx : FALSE
- });
- return me;
- },
+ /**
+ * 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();
- /**
- * Ensures that all effects queued after sequenceFx is called on the element are
- * run in sequence. This is the opposite of {@link #syncFx}.
- * @return {Ext.Element} The Element
- */
- sequenceFx : function(){
- var me = this;
- me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
- block : FALSE,
- concurrent : FALSE,
- stopFx : FALSE
+ // 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
});
- return me;
- },
-
- /* @private */
- nextFx : function(){
- var ef = getQueue(this.dom.id)[0];
- if(ef){
- ef.call(this);
- }
- },
-
- /**
- * Returns true if the element has any effects actively running or queued, else returns false.
- * @return {Boolean} True if element has active effects, else false
- */
- hasActiveFx : function(){
- return getQueue(this.dom.id)[0];
- },
-
- /**
- * Stops any running effects and clears the element's internal effects queue if it contains
- * any additional effects that haven't started yet.
- * @return {Ext.Element} The Element
- */
- stopFx : function(finish){
- var me = this,
- id = me.dom.id;
- if(me.hasActiveFx()){
- var cur = getQueue(id)[0];
- if(cur && cur.anim){
- if(cur.anim.isAnimated){
- setQueue(id, [cur]); //clear
- cur.anim.stop(finish !== undefined ? finish : TRUE);
- }else{
- setQueue(id, []);
- }
- }
- }
- return me;
- },
+ // 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.
+ */
- /* @private */
- beforeFx : function(o){
- if(this.hasActiveFx() && !o.concurrent){
- if(o.stopFx){
- this.stopFx();
- return TRUE;
- }
- return FALSE;
- }
- return TRUE;
- },
+ getViewSize : function(){
+ var doc = document,
+ d = this.dom,
+ isDoc = (d == doc || d == doc.body);
- /**
- * Returns true if the element is currently blocking so that no other effect can be queued
- * until this effect is finished, else returns false if blocking is not set. This is commonly
- * used to ensure that an effect initiated by a user action runs to completion prior to the
- * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
- * @return {Boolean} True if blocking, else false
- */
- hasFxBlock : function(){
- var q = getQueue(this.dom.id);
- return q && q[0] && q[0].block;
- },
+ // If the body, use Ext.lib.Dom
+ if (isDoc) {
+ var extdom = Ext.lib.Dom;
+ return {
+ width : extdom.getViewWidth(),
+ height : extdom.getViewHeight()
+ };
- /* @private */
- queueFx : function(o, fn){
- var me = fly(this.dom);
- if(!me.hasFxBlock()){
- Ext.applyIf(o, me.fxDefaults);
- if(!o.concurrent){
- var run = me.beforeFx(o);
- fn.block = o.block;
- getQueue(me.dom.id).push(fn);
- if(run){
- me.nextFx();
- }
- }else{
- fn.call(me);
+ // Else use clientHeight/clientWidth
+ } else {
+ return {
+ width : d.clientWidth,
+ height : d.clientHeight
+ };
}
- }
- return me;
- },
+ },
+
+ /**
+ * 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;
- /* @private */
- fxWrap : function(pos, o, vis){
- var dom = this.dom,
- wrap,
- wrapXY;
- if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){
- if(o.fixPosition){
- wrapXY = fly(dom).getXY();
+ // If the body, use Ext.lib.Dom
+ if (isDoc) {
+ var extdom = Ext.lib.Dom;
+ return {
+ width : extdom.getViewWidth(),
+ height : extdom.getViewHeight()
+ };
}
- var div = document.createElement("div");
- div.style.visibility = vis;
- wrap = dom.parentNode.insertBefore(div, dom);
- fly(wrap).setPositioning(pos);
- if(fly(wrap).isStyle(POSITION, "static")){
- fly(wrap).position("relative");
+ // Use Styles if they are set
+ if(s.width && s.width != 'auto'){
+ w = parseFloat(s.width);
+ if(me.isBorderBox()){
+ w -= me.getFrameWidth('lr');
+ }
}
- fly(dom).clearPositioning('auto');
- fly(wrap).clip();
- wrap.appendChild(dom);
- if(wrapXY){
- fly(wrap).setXY(wrapXY);
+ // Use Styles if they are set
+ if(s.height && s.height != 'auto'){
+ h = parseFloat(s.height);
+ if(me.isBorderBox()){
+ h -= me.getFrameWidth('tb');
+ }
}
- }
- return wrap;
- },
-
- /* @private */
- fxUnwrap : function(wrap, pos, o){
- var dom = this.dom;
- fly(dom).clearPositioning();
- fly(dom).setPositioning(pos);
- if(!o.wrap){
- var pn = fly(wrap).dom.parentNode;
- pn.insertBefore(dom, wrap);
- fly(wrap).remove();
- }
- },
-
- /* @private */
- getFxRestore : function(){
- var st = this.dom.style;
- return {pos: this.getPositioning(), width: st.width, height : st.height};
- },
+ // Use getWidth/getHeight if style not set.
+ return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
+ },
- /* @private */
- afterFx : function(o){
- var dom = this.dom,
- id = dom.id;
- if(o.afterStyle){
- fly(dom).setStyle(o.afterStyle);
- }
- if(o.afterCls){
- fly(dom).addClass(o.afterCls);
- }
- if(o.remove == TRUE){
- fly(dom).remove();
- }
- if(o.callback){
- o.callback.call(o.scope, fly(dom));
- }
- if(!o.concurrent){
- getQueue(id).shift();
- fly(dom).nextFx();
- }
- },
+ /**
+ * 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)};
+ },
- /* @private */
- fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
- animType = animType || 'run';
- opt = opt || {};
- var anim = Ext.lib.Anim[animType](
- this.dom,
- args,
- (opt.duration || defaultDur) || .35,
- (opt.easing || defaultEase) || EASEOUT,
- cb,
- this
- );
- opt.anim = anim;
- return anim;
- }
-};
+ /**
+ * 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;
+ },
-// backwards compat
-Ext.Fx.resize = Ext.Fx.scale;
+ /**
+ * 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");
+ },
-//When included, Ext.Fx is automatically applied to Element so that all basic
-//effects are available directly via the Element API
-Ext.Element.addMethods(Ext.Fx);
-})();
-/**
- * @class Ext.CompositeElementLite
- *
This class encapsulates a collection of DOM elements, providing methods to filter
- * members, or to perform collective actions upon the whole set.
- * Although they are not listed, this class supports all of the methods of {@link Ext.Element} and
- * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.
- * Example:
-var els = Ext.select("#some-el div.some-class");
-// or select directly from an existing element
-var el = Ext.get('some-el');
-el.select('div.some-class');
+ /**
+ * 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 = {};
-els.setWidth(100); // all elements become 100 width
-els.hide(true); // all elements fade out and hide
-// or
-els.setWidth(100).hide(true);
-
- */
-Ext.CompositeElementLite = function(els, root){
- /**
- * The Array of DOM elements which this CompositeElement encapsulates. Read-only.
- * This will not usually be accessed in developers' code, but developers wishing
- * to augment the capabilities of the CompositeElementLite class may use it when adding
- * methods to the class.
- * For example to add the nextAll method to the class to add all
- * following siblings of selected elements, the code would be
-Ext.override(Ext.CompositeElementLite, {
- nextAll: function() {
- var els = this.elements, i, l = els.length, n, r = [], ri = -1;
-
-// Loop through all elements in this Composite, accumulating
-// an Array of all siblings.
- for (i = 0; i < l; i++) {
- for (n = els[i].nextSibling; n; n = n.nextSibling) {
- r[++ri] = n;
+ 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);
}
}
-
-// Add all found siblings to this Composite
- return this.add(r);
- }
-});
+{
+ 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,
+ xy,
+ left,
+ top,
+ getBorderWidth = me.getBorderWidth,
+ getPadding = me.getPadding,
+ l,
+ r,
+ t,
+ b;
+ if(!local){
+ xy = me.getXY();
+ }else{
+ left = parseInt(me.getStyle("left"), 10) || 0;
+ top = parseInt(me.getStyle("top"), 10) || 0;
+ xy = [left, top];
}
- return me;
+ var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
+ if(!contentBox){
+ bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
+ }else{
+ l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");
+ r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");
+ t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");
+ b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");
+ bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
+ }
+ bx.right = bx.x + bx.width;
+ bx.bottom = bx.y + bx.height;
+ return bx;
+ },
+
+ /**
+ * Move this element relative to its current position.
+ * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
+ * @param {Number} distance How far to move the element in pixels
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ move : function(direction, distance, animate){
+ var me = this,
+ xy = me.getXY(),
+ x = xy[0],
+ y = xy[1],
+ left = [x - distance, y],
+ right = [x + distance, y],
+ top = [x, y - distance],
+ bottom = [x, y + distance],
+ hash = {
+ l : left,
+ left : left,
+ r : right,
+ right : right,
+ t : top,
+ top : top,
+ up : top,
+ b : bottom,
+ bottom : bottom,
+ down : bottom
+ };
+
+ direction = direction.toLowerCase();
+ me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));
},
+
/**
- * Returns a flyweight Element of the dom element object at the specified index
- * @param {Number} index
- * @return {Ext.Element}
+ * Quick set left and top adding default units
+ * @param {String} left The left CSS property value
+ * @param {String} top The top CSS property value
+ * @return {Ext.Element} this
*/
- item : function(index){
- var me = this,
- el = me.elements[index],
- out = null;
-
- if(el){
- out = me.getElement(el);
- }
- return out;
+ setLeftTop : function(left, top){
+ var me = this,
+ style = me.dom.style;
+ style.left = me.addUnits(left);
+ style.top = me.addUnits(top);
+ return me;
},
-
- // fixes scope with flyweight
- addListener : function(eventName, handler, scope, opt){
- var els = this.elements,
- len = els.length,
- i, e;
-
- for(i = 0; iCalls the passed function for each element in this composite.
- * @param {Function} fn The function to call. The function is passed the following parameters:
- * - el : ElementThe current Element in the iteration.
- * This is the flyweight (shared) Ext.Element instance, so if you require a
- * a reference to the dom node, use el.dom.
- * - c : CompositeThis Composite object.
- * - idx : NumberThe zero-based index in the iteration.
- *
- * @param {Object} scope (optional) The scope (this reference) in which the function is executed. (defaults to the Element)
- * @return {CompositeElement} this
+ * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
+ * @param {Number} x X value for new position (coordinates are page-based)
+ * @param {Number} y Y value for new position (coordinates are page-based)
+ * @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 {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
*/
- each : function(fn, scope){
- var me = this,
- els = me.elements,
- len = els.length,
- i, e;
-
- for(i = 0; i
- * el : Ext.ElementThe current DOM element.index : NumberThe current index within the collection.{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 (this reference) in which the specified function is executed. Defaults to this Element.
+ * @return {Ext.KeyMap} The KeyMap created
+ */
+ addKeyListener : function(key, fn, scope){
+ var config;
+ if(typeof key != 'object' || Ext.isArray(key)){
+ config = {
+ key: key,
+ fn: fn,
+ scope: scope
+ };
+ }else{
+ config = {
+ key : key.key,
+ shift : key.shift,
+ ctrl : key.ctrl,
+ alt : key.alt,
+ fn: fn,
+ scope: scope
+ };
+ }
+ return new Ext.KeyMap(this, config);
+ },
+
+ /**
+ * Creates a KeyMap for this element
+ * @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details
+ * @return {Ext.KeyMap} The KeyMap created
+ */
+ addKeyMap : function(config){
+ return new Ext.KeyMap(this, config);
}
- return new Ext.CompositeElementLite(els);
-};
-/**
- * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
- * 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 {HTMLElement/String} root (optional) The root element of the query or id of the root
- * @return {CompositeElementLite/CompositeElement}
- * @member Ext
- * @method select
- */
-Ext.select = Ext.Element.select;
-/**
+});
+
+//Import the newly-added Ext.Element functions into CompositeElementLite. We call this here because
+//Element.keys.js is the last extra Ext.Element include in the ext-all.js build
+Ext.CompositeElementLite.importElementMethods();/**
* @class Ext.CompositeElementLite
*/
Ext.apply(Ext.CompositeElementLite.prototype, {
@@ -9301,675 +3418,99 @@ Ext.apply(Ext.CompositeElementLite.prototype, {
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);
-
element in this composite
- * calling the supplied function using {@link Ext#each}.
- * @param {Function} fn The function to be called with each
- * element. If the supplied function returns false,
- * iteration stops. This function is called with the following arguments:
- * element : Ext.Elementindex
- * in the compositecomposite : Object index : Number composite reference) in which the specified function is executed.
- * Defaults to the element at the current index
- * within the composite.
- * @return {CompositeElement} this
- */
-});
-
-/**
- * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
- * 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.Element
- * @method select
- */
-Ext.Element.select = function(selector, unique, root){
- var els;
- if(typeof selector == "string"){
- els = Ext.Element.selectorFunction(selector, root);
- }else if(selector.length !== undefined){
- els = selector;
- }else{
- throw "Invalid selector";
- }
-
- return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
-};
-
-/**
- * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
- * 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
- * @method select
- */
-Ext.select = Ext.Element.select;(function(){
- var BEFOREREQUEST = "beforerequest",
- REQUESTCOMPLETE = "requestcomplete",
- REQUESTEXCEPTION = "requestexception",
- UNDEFINED = undefined,
- LOAD = 'load',
- POST = 'POST',
- GET = 'GET',
- WINDOW = window;
-
- /**
- * @class Ext.data.Connection
- * @extends Ext.util.Observable
- * The class encapsulates a connection to the page's originating domain, allowing requests to be made
- * either to a configured URL, or to a URL specified at request time.
- * Requests made by this class are asynchronous, and will return immediately. No data from
- * the server will be available to the statement immediately following the {@link #request} call.
- * To process returned data, use a
- * success callback
- * in the request options object,
- * or an {@link #requestcomplete event listener}.
- * File Uploads
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
- * target set to refer
- * to a dynamically generated, hidden <iframe> which is inserted into the document
- * but removed after the return data has been gathered.
- * The server response is parsed by the browser to create the document for the IFRAME. If the
- * server is using JSON to send the return object, then the
- * Content-Type header
- * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
- * Characters which are significant to an HTML parser must be sent as HTML entities, so encode
- * "<" as "<", "&" as "&" etc.
- * The response text is retrieved from the document, and a fake XMLHttpRequest object
- * is created containing a responseText property in order to conform to the
- * requirements of event handlers and callbacks.
- * Be aware that file upload packets are sent with the content type multipart/form
- * and some server technologies (notably JEE) may require some custom processing in order to
- * retrieve parameter names and parameter values from the packet content.
- * @constructor
- * @param {Object} config a configuration object.
- */
- Ext.data.Connection = function(config){
- Ext.apply(this, config);
- this.addEvents(
- /**
- * @event beforerequest
- * Fires before a network request is made to retrieve a data object.
- * @param {Connection} conn This Connection object.
- * @param {Object} options The options config object passed to the {@link #request} method.
- */
- BEFOREREQUEST,
- /**
- * @event requestcomplete
- * Fires if the request was successfully completed.
- * @param {Connection} conn This Connection object.
- * @param {Object} response The XHR object containing the response data.
- * See The XMLHttpRequest Object
- * for details.
- * @param {Object} options The options config object passed to the {@link #request} method.
- */
- REQUESTCOMPLETE,
- /**
- * @event requestexception
- * Fires if an error HTTP status was returned from the server.
- * See HTTP Status Code Definitions
- * for details of HTTP status codes.
- * @param {Connection} conn This Connection object.
- * @param {Object} response The XHR object containing the response data.
- * See The XMLHttpRequest Object
- * for details.
- * @param {Object} options The options config object passed to the {@link #request} method.
- */
- REQUESTEXCEPTION
- );
- Ext.data.Connection.superclass.constructor.call(this);
- };
-
- Ext.extend(Ext.data.Connection, Ext.util.Observable, {
- /**
- * @cfg {String} url (Optional) The default URL to be used for requests to the server. Defaults to undefined.
- * The url config may be a function which returns the URL to use for the Ajax request. The scope
- * (this reference) of the function is the scope option passed to the {@link #request} method.
- */
- /**
- * @cfg {Object} extraParams (Optional) An object containing properties which are used as
- * extra parameters to each request made by this object. (defaults to undefined)
- */
- /**
- * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
- * to each request made by this object. (defaults to undefined)
- */
- /**
- * @cfg {String} method (Optional) The default HTTP method to be used for requests.
- * (defaults to undefined; if not set, but {@link #request} params are present, POST will be used;
- * otherwise, GET will be used.)
- */
- /**
- * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
- */
- timeout : 30000,
- /**
- * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
- * @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
- * return before the response has been received. Process any returned data
- * in a callback function.
- *
-Ext.Ajax.request({
- url: 'ajax_demo/sample.json',
- success: function(response, opts) {
- var obj = Ext.decode(response.responseText);
- console.dir(obj);
- },
- failure: function(response, opts) {
- console.log('server-side failure with status code ' + response.status);
- }
-});
- *
- * To execute a callback function in the correct scope, use the scope option.
- * @param {Object} options An object which may contain the following properties:
- * - url : String/Function (Optional)The URL to
- * which to send the request, or a function to call which returns a URL string. The scope of the
- * function is specified by the scope option. Defaults to the configured
- * {@link #url}.
- * - params : Object/String/Function (Optional)
- * An object containing properties which are used as parameters to the
- * request, a url encoded string or a function to call to get either. The scope of the function
- * is specified by the scope option.
- * - method : String (Optional)The HTTP method to use
- * for the request. Defaults to the configured method, or if no method was configured,
- * "GET" if no parameters are being sent, and "POST" if parameters are being sent. Note that
- * the method name is case-sensitive and should be all caps.
- * - callback : Function (Optional)The
- * function to be called upon receipt of the HTTP response. The callback is
- * called regardless of success or failure and is passed the following
- * 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
- * accessing elements of the response.
- *
- * - success : Function (Optional)The function
- * to be called upon success of the request. The callback is passed the following
- * parameters:
- * - response : ObjectThe XMLHttpRequest object containing the response data.
- * - options : ObjectThe parameter to the request call.
- *
- * - failure : Function (Optional)The function
- * to be called upon failure of the request. The callback is passed the
- * following parameters:
- * - response : ObjectThe XMLHttpRequest object containing the response data.
- * - options : ObjectThe parameter to the request call.
- *
- * - scope : Object (Optional)The scope in
- * which to execute the callbacks: The "this" object for the callback function. If the url, or params options were
- * specified as functions from which to draw values, then this also serves as the scope for those function calls.
- * Defaults to the browser window.
- * - 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
- * 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").
- * 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
- * target set to refer
- * to a dynamically generated, hidden <iframe> which is inserted into the document
- * but removed after the return data has been gathered.
- * The server response is parsed by the browser to create the document for the IFRAME. If the
- * server is using JSON to send the return object, then the
- * Content-Type header
- * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
- * The response text is retrieved from the document, and a fake XMLHttpRequest object
- * is created containing a responseText property in order to conform to the
- * requirements of event handlers and callbacks.
- * Be aware that file upload packets are sent with the content type multipart/form
- * and some server technologies (notably JEE) may require some custom processing in order to
- * retrieve parameter names and parameter values from the packet content.
- *
- * - headers : Object (Optional)Request
- * headers to set for the request.
- * - xmlData : Object (Optional)XML document
- * to use for the post. Note: This will be used instead of params for the post
- * data. Any params will be appended to the URL.
- * - jsonData : Object/String (Optional)JSON
- * data to use as the post. Note: This will be used instead of params for the post
- * data. Any params will be appended to the URL.
- * - disableCaching : Boolean (Optional)True
- * to add a unique cache-buster param to GET requests.
- *
- * The options object may also contain any other property which might be needed to perform
- * postprocessing in a callback because it is passed to callback functions.
- * @return {Number} transactionId The id of the server transaction. This may be used
- * to cancel the request.
- */
- request : function(o){
- var me = this;
- if(me.fireEvent(BEFOREREQUEST, me, o)){
- if (o.el) {
- if(!Ext.isEmpty(o.indicatorText)){
- me.indicatorText = ''+o.indicatorText+"";
- }
- if(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,
- method,
- cb = {success: me.handleResponse,
- failure: me.handleFailure,
- scope: me,
- argument: {options: o},
- timeout : o.timeout || me.timeout
- },
- 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);
-
- 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"))) {
- return me.doFormUpload.call(me, o, p, url);
- }
- 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);
- p = '';
- }
- return (me.transId = Ext.lib.Ajax.request(method, url, cb, p, o));
- }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;
- },
-
- /**
- * Aborts any outstanding request.
- * @param {Number} transactionId (Optional) defaults to the last transaction
- */
- abort : function(transId){
- if(transId || this.isLoading()){
- Ext.lib.Ajax.abort(transId || this.transId);
- }
- },
-
- // private
- handleResponse : function(response){
- this.transId = false;
- var options = response.argument.options;
- response.argument = options ? options.argument : null;
- this.fireEvent(REQUESTCOMPLETE, this, response, options);
- if(options.success){
- options.success.call(options.scope, response, options);
- }
- if(options.callback){
- options.callback.call(options.scope, options, true, response);
- }
- },
-
- // private
- handleFailure : function(response, e){
- this.transId = false;
- var options = response.argument.options;
- response.argument = options ? options.argument : null;
- this.fireEvent(REQUESTEXCEPTION, this, response, options, e);
- if(options.failure){
- options.failure.call(options.scope, response, options);
- }
- if(options.callback){
- options.callback.call(options.scope, options, false, response);
- }
- },
-
- // private
- doFormUpload : function(o, ps, url){
- var id = Ext.id(),
- doc = document,
- frame = doc.createElement('iframe'),
- form = Ext.getDom(o.form),
- hiddens = [],
- hd,
- encoding = 'multipart/form-data',
- buf = {
- target: form.target,
- method: form.method,
- encoding: form.encoding,
- enctype: form.enctype,
- action: form.action
- };
-
- /*
- * Originally this behaviour was modified for Opera 10 to apply the secure URL after
- * the frame had been added to the document. It seems this has since been corrected in
- * Opera so the behaviour has been reverted, the URL will be set before being added.
- */
- Ext.fly(frame).set({
- id: id,
- name: id,
- cls: 'x-hidden',
- src: Ext.SSL_SECURE_URL
- });
-
- doc.body.appendChild(frame);
-
- // 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,
- enctype: encoding,
- encoding: encoding,
- action: url || buf.action
- });
-
- // add dynamic params
- Ext.iterate(Ext.urlDecode(ps, false), function(k, v){
- hd = doc.createElement('input');
- Ext.fly(hd).set({
- type: 'hidden',
- value: v,
- name: k
- });
- form.appendChild(hd);
- hiddens.push(hd);
- });
-
- function cb(){
- var me = this,
- // bogus response object
- r = {responseText : '',
- responseXML : null,
- argument : o.argument},
- doc,
- firstChild;
-
- try{
- doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;
- if(doc){
- if(doc.body){
- if(/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)){ // json response wrapped in textarea
- r.responseText = firstChild.value;
- }else{
- r.responseText = doc.body.innerHTML;
- }
- }
- //in IE the document may still have a body even if returns XML.
- r.responseXML = doc.XMLDocument || doc;
- }
- }
- catch(e) {}
-
- Ext.EventManager.removeListener(frame, LOAD, cb, me);
-
- me.fireEvent(REQUESTCOMPLETE, me, r, o);
-
- function runCallback(fn, scope, args){
- if(Ext.isFunction(fn)){
- fn.apply(scope, args);
- }
- }
-
- runCallback(o.success, o.scope, [r, o]);
- runCallback(o.callback, o.scope, [o, true, r]);
-
- if(!me.debugUploads){
- setTimeout(function(){Ext.removeNode(frame);}, 100);
- }
- }
-
- Ext.EventManager.on(frame, LOAD, cb, this);
- form.submit();
-
- Ext.fly(form).set(buf);
- Ext.each(hiddens, function(h) {
- Ext.removeNode(h);
- });
- }
- });
-})();
-
-/**
- * @class Ext.Ajax
- * @extends Ext.data.Connection
- * The global Ajax request class that provides a simple way to make Ajax requests
- * with maximum flexibility.
- * Since Ext.Ajax is a singleton, you can set common properties/events for it once
- * and override them at the request function level only if necessary.
- * Common Properties you may want to set are:
- * - {@link #method}
- * - {@link #extraParams}
- * - {@link #url}
- *
- *
-// Default headers to pass in every request
-Ext.Ajax.defaultHeaders = {
- 'Powered-By': 'Ext'
-};
- *
- *
- * Common Events you may want to set are:
- * - {@link Ext.data.Connection#beforerequest beforerequest}
- * - {@link Ext.data.Connection#requestcomplete requestcomplete}
- * - {@link Ext.data.Connection#requestexception requestexception}
- *
- *
-// Example: show a spinner during all Ajax requests
-Ext.Ajax.on('beforerequest', this.showSpinner, this);
-Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
-Ext.Ajax.on('requestexception', this.hideSpinner, this);
- *
- *
- * An example request:
- *
-// Basic request
-Ext.Ajax.{@link Ext.data.Connection#request request}({
- url: 'foo.php',
- success: someFn,
- failure: otherFn,
- headers: {
- 'my-header': 'foo'
- },
- params: { foo: 'bar' }
-});
-
-// Simple ajax form submission
-Ext.Ajax.{@link Ext.data.Connection#request request}({
- form: 'some-form',
- params: 'foo=bar'
-});
- *
- *
- * @singleton
+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);
+ element in this composite
+ * calling the supplied function using {@link Ext#each}.
+ * @param {Function} fn The function to be called with each
+ * element. If the supplied function returns false,
+ * iteration stops. This function is called with the following arguments:
+ * element : Ext.Elementindex
+ * in the compositecomposite : Object index : Number composite reference) in which the specified function is executed.
+ * Defaults to the element at the current index
+ * within the composite.
+ * @return {CompositeElement} this
*/
- autoAbort : false,
+});
- /**
- * Serialize the passed form into a url encoded string
- * @param {String/HTMLElement} form
- * @return {String}
- */
- serializeForm : function(form){
- return Ext.lib.Ajax.serializeForm(form);
+/**
+ * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
+ * 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.Element
+ * @method select
+ */
+Ext.Element.select = function(selector, unique, root){
+ var els;
+ if(typeof selector == "string"){
+ els = Ext.Element.selectorFunction(selector, root);
+ }else if(selector.length !== undefined){
+ els = selector;
+ }else{
+ throw "Invalid selector";
}
-});
+
+ return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
+};
+
/**
+ * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
+ * 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
+ * @method select
+ */
+Ext.select = Ext.Element.select;/**
* @class Ext.Updater
* @extends Ext.util.Observable
* Provides AJAX-style update capabilities for Element objects. Updater can be used to {@link #update}
@@ -10419,7 +3960,7 @@ function() {
this.update(this.defaultUrl, null, callback, true);
}
}
- }
+ };
}());
/**
@@ -10652,7 +4193,7 @@ Date.formatCodeToRegex = function(character, currentGroup) {
g:0,
c:null,
s:Ext.escapeRe(character) // treat unrecognised characters as literals
- }
+ };
};
// private shorthand for Date.formatCodeToRegex since we'll be using it fairly often
@@ -10946,7 +4487,7 @@ Date.formatCodes.x = "String.leftPad(this.getDate(), 2, '0')";
t: "this.getDaysInMonth()",
L: "(this.isLeapYear() ? 1 : 0)",
o: "(this.getFullYear() + (this.getWeekOfYear() == 1 && this.getMonth() > 0 ? +1 : (this.getWeekOfYear() >= 52 && this.getMonth() < 11 ? -1 : 0)))",
- Y: "this.getFullYear()",
+ Y: "String.leftPad(this.getFullYear(), 4, '0')",
y: "('' + this.getFullYear()).substring(2, 4)",
a: "(this.getHours() < 12 ? 'am' : 'pm')",
A: "(this.getHours() < 12 ? 'AM' : 'PM')",
@@ -11006,7 +4547,8 @@ Date.formatCodes.x = "String.leftPad(this.getDate(), 2, '0')";
s = s || 0;
ms = ms || 0;
- var dt = new Date(y, m - 1, d, h, i, s, ms);
+ // Special handling for year < 100
+ var dt = new Date(y < 100 ? 100 : y, m - 1, d, h, i, s, ms).add(Date.YEAR, y < 100 ? y - 100 : 0);
return y == dt.getFullYear() &&
m == dt.getMonth() + 1 &&
@@ -11083,7 +4625,7 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
special = false;
code.push("'" + String.escape(ch) + "'");
} else {
- code.push(Date.getFormatCode(ch))
+ code.push(Date.getFormatCode(ch));
}
}
Date.formatFunctions[format] = new Function("return " + code.join('+'));
@@ -11123,7 +4665,8 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
// these 2 values alone provide sufficient info to create a full date object
// create Date object representing January 1st for the given year
- "v = new Date(y, 0, 1, h, i, s, ms);",
+ // handle years < 100 appropriately
+ "v = new Date(y < 100 ? 100 : y, 0, 1, h, i, s, ms).add(Date.YEAR, y < 100 ? y - 100 : 0);",
// then add day of year, checking for Date "rollover" if necessary
"v = !strict? v : (strict === true && (z <= 364 || (v.isLeapYear() && z <= 365))? v.add(Date.DAY, z) : null);",
@@ -11131,7 +4674,8 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
"v = null;", // invalid date, so return null
"}else{",
// plain old Date object
- "v = new Date(y, m, d, h, i, s, ms);",
+ // handle years < 100 properly
+ "v = new Date(y < 100 ? 100 : y, m, d, h, i, s, ms).add(Date.YEAR, y < 100 ? y - 100 : 0);",
"}",
"}",
"}",
@@ -11156,9 +4700,12 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
calc = [],
regex = [],
special = false,
- ch = "";
+ ch = "",
+ i = 0,
+ obj,
+ last;
- for (var i = 0; i < format.length; ++i) {
+ for (; i < format.length; ++i) {
ch = format.charAt(i);
if (!special && ch == "\\") {
special = true;
@@ -11166,18 +4713,26 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
special = false;
regex.push(String.escape(ch));
} else {
- var obj = $f(ch, currentGroup);
+ obj = $f(ch, currentGroup);
currentGroup += obj.g;
regex.push(obj.s);
if (obj.g && obj.c) {
- calc.push(obj.c);
+ if (obj.calcLast) {
+ last = obj.c;
+ } else {
+ calc.push(obj.c);
+ }
}
}
}
+
+ if (last) {
+ calc.push(last);
+ }
- Date.parseRegexes[regexNum] = new RegExp("^" + regex.join('') + "$");
+ Date.parseRegexes[regexNum] = new RegExp("^" + regex.join('') + "$", 'i');
Date.parseFunctions[format] = new Function("input", "strict", xf(code, regexNum, calc.join('')));
- }
+ };
}(),
// private
@@ -11204,14 +4759,14 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
g:0,
c:null,
s:"(?:" + a.join("|") +")"
- }
+ };
},
l: function() {
return {
g:0,
c:null,
s:"(?:" + Date.dayNames.join("|") + ")"
- }
+ };
},
N: {
g:0,
@@ -11243,7 +4798,7 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
g:1,
c:"m = parseInt(Date.getMonthNumber(results[{0}]), 10);\n", // get localised month number
s:"(" + Date.monthNames.join("|") + ")"
- }
+ };
},
M: function() {
for (var a = [], i = 0; i < 12; a.push(Date.getShortMonthName(i)), ++i); // get localised short month names
@@ -11285,19 +4840,22 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
+ "y = ty > Date.y2kYear ? 1900 + ty : 2000 + ty;\n", // 2-digit year
s:"(\\d{1,2})"
},
- a: {
- g:1,
- c:"if (results[{0}] == 'am') {\n"
- + "if (!h || h == 12) { h = 0; }\n"
- + "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
- s:"(am|pm)"
+ /**
+ * In the am/pm parsing routines, we allow both upper and lower case
+ * even though it doesn't exactly match the spec. It gives much more flexibility
+ * in being able to specify case insensitive regexes.
+ */
+ a: function(){
+ return $f("A");
},
A: {
+ // We need to calculate the hour before we apply AM/PM when parsing
+ calcLast: true,
g:1,
- c:"if (results[{0}] == 'AM') {\n"
+ c:"if (/(am)/i.test(results[{0}])) {\n"
+ "if (!h || h == 12) { h = 0; }\n"
+ "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
- s:"(AM|PM)"
+ s:"(AM|PM|am|pm)"
},
g: function() {
return $f("G");
@@ -11407,7 +4965,7 @@ dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
")?",
")?"
].join("")
- }
+ };
},
U: {
g:1,
@@ -11499,7 +5057,7 @@ Ext.apply(Date.prototype, {
Wyr = new Date(AWN * ms7d).getUTCFullYear();
return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1;
- }
+ };
}(),
/**
@@ -11570,7 +5128,7 @@ document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
var m = this.getMonth();
return m == 1 && this.isLeapYear() ? 29 : daysInMonth[m];
- }
+ };
}(),
/**
@@ -11808,7 +5366,7 @@ console.group('ISO-8601 Granularity Test (see http://www.w3.org/TR/NOTE-datetime
console.log('Date.parseDate("1997-13-16T19:20:30.45+01:00", "c", true)= %o', Date.parseDate("1997-13-16T19:20:30.45+01:00", "c", true)); // strict date parsing with invalid month value
console.groupEnd();
-//*/
+*/
/**
* @class Ext.util.MixedCollection
* @extends Ext.util.Observable
@@ -12273,11 +5831,12 @@ mc.add(otherEl);
reorder: function(mapping) {
this.suspendEvents();
- var items = this.items,
- index = 0,
- length = items.length,
- order = [],
- remaining = [];
+ var items = this.items,
+ index = 0,
+ length = items.length,
+ order = [],
+ remaining = [],
+ oldIndex;
//object of {oldPosition: newPosition} reversed to {newPosition: oldPosition}
for (oldIndex in mapping) {
@@ -12473,199 +6032,120 @@ mc.add(otherEl);
*/
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
+ * @class Ext.AbstractManager
+ * @extends Object
+ * Base Manager class - extended by ComponentMgr and PluginMgr
*/
-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]';
- }
+Ext.AbstractManager = Ext.extend(Object, {
+ typeName: 'type',
+
+ constructor: function(config) {
+ Ext.apply(this, config || {});
- 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];
- switch (typeof v) {
- case "undefined":
- case "function":
- case "unknown":
- break;
- default:
- if (b) {
- a.push(',');
- }
- a.push(v === null ? "null" : Ext.util.JSON.encode(v));
- b = true;
- }
- }
- a.push("]");
- return a.join("");
- };
-
+ /**
+ * Contains all of the items currently managed
+ * @property all
+ * @type Ext.util.MixedCollection
+ */
+ this.all = new Ext.util.MixedCollection();
+
+ this.types = {};
+ },
+
/**
- * 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) + "-" +
- pad(o.getDate()) + "T" +
- pad(o.getHours()) + ":" +
- pad(o.getMinutes()) + ":" +
- pad(o.getSeconds()) + '"';
- };
-
+ * Returns a component by {@link Ext.Component#id id}.
+ * For additional details see {@link Ext.util.MixedCollection#get}.
+ * @param {String} id The component {@link Ext.Component#id id}
+ * @return Ext.Component The Component, undefined if not found, or null if a
+ * Class was found.
+ */
+ get : function(id){
+ return this.all.get(id);
+ },
+
/**
- * Encodes an Object, Array or other value
- * @param {Mixed} o The variable to encode
- * @return {String} The JSON string
+ * Registers an item to be managed
+ * @param {Mixed} item The item to register
*/
- this.encode = function() {
- var ec;
- return function(o) {
- if (!ec) {
- // setup encoding function on first access
- ec = isNative() ? JSON.stringify : doEncode;
- }
- return ec(o);
- };
- }();
-
-
+ register: function(item) {
+ this.all.add(item);
+ },
+
+ /**
+ * Unregisters a component by removing it from this manager
+ * @param {Mixed} item The item to unregister
+ */
+ unregister: function(item) {
+ this.all.remove(item);
+ },
+
+ /**
+ * Registers a new Component constructor, keyed by a new
+ * {@link Ext.Component#xtype}.
+ * Use this method (or its alias {@link Ext#reg Ext.reg}) to register new
+ * subclasses of {@link Ext.Component} so that lazy instantiation may be used when specifying
+ * child Components.
+ * see {@link Ext.Container#items}
+ * @param {String} xtype The mnemonic string by which the Component class may be looked up.
+ * @param {Constructor} cls The new Component class.
+ */
+ registerType : function(type, cls){
+ this.types[type] = cls;
+ cls[this.typeName] = type;
+ },
+
+ /**
+ * Checks if a Component type is registered.
+ * @param {Ext.Component} xtype The mnemonic string by which the Component class may be looked up
+ * @return {Boolean} Whether the type is registered.
+ */
+ isRegistered : function(type){
+ return this.types[type] !== undefined;
+ },
+
+ /**
+ * Creates and returns an instance of whatever this manager manages, based on the supplied type and config object
+ * @param {Object} config The config object
+ * @param {String} defaultType If no type is discovered in the config object, we fall back to this type
+ * @return {Mixed} The instance of whatever this manager is managing
+ */
+ create: function(config, defaultType) {
+ var type = config[this.typeName] || config.type || defaultType,
+ Constructor = this.types[type];
+
+ if (Constructor == undefined) {
+ throw new Error(String.format("The '{0}' type has not been registered with this manager", type));
+ }
+
+ return new Constructor(config);
+ },
+
/**
- * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError unless the safe option is set.
- * @param {String} json The JSON string
- * @return {Object} The resulting object
+ * Registers a function that will be called when a Component with the specified id is added to the manager. 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 (this reference) in which the callback is executed. Defaults to the Component.
*/
- this.decode = function() {
- var dc;
- return function(json) {
- if (!dc) {
- // setup decoding function on first access
- dc = isNative() ? JSON.parse : doDecode;
+ onAvailable : function(id, fn, scope){
+ var all = this.all;
+
+ all.on("add", function(index, o){
+ if (o.id == id) {
+ fn.call(scope || o, o);
+ all.un("add", fn, scope);
}
- return dc(json);
- };
- }();
-
-})();
-/**
- * Shorthand for {@link Ext.util.JSON#encode}
- * @param {Mixed} o The variable to encode
- * @return {String} The JSON string
- * @member Ext
- * @method encode
- */
-Ext.encode = Ext.util.JSON.encode;
-/**
- * Shorthand for {@link Ext.util.JSON#decode}
- * @param {String} json The JSON string
- * @param {Boolean} safe (optional) Whether to return null or throw an exception if the JSON is invalid.
- * @return {Object} The resulting object
- * @member Ext
- * @method decode
- */
-Ext.decode = Ext.util.JSON.decode;
-/**
+ });
+ }
+});/**
* @class Ext.util.Format
* Reusable data formatting functions
* @singleton
*/
-Ext.util.Format = function(){
- var trimRe = /^\s+|\s+$/g,
- stripTagsRE = /<\/?[^>]+>/gi,
+Ext.util.Format = function() {
+ var trimRe = /^\s+|\s+$/g,
+ stripTagsRE = /<\/?[^>]+>/gi,
stripScriptsRe = /(?:)((\n|\r|.)*?)(?:<\/script>)/ig,
- nl2brRe = /\r?\n/g;
+ nl2brRe = /\r?\n/g;
return {
/**
@@ -12675,17 +6155,17 @@ Ext.util.Format = function(){
* @param {Boolean} word True to try to find a common work break
* @return {String} The converted text
*/
- ellipsis : function(value, len, word){
- if(value && value.length > len){
- if(word){
- var vs = value.substr(0, len - 2),
+ ellipsis : function(value, len, word) {
+ if (value && value.length > len) {
+ if (word) {
+ var vs = value.substr(0, len - 2),
index = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?'));
- if(index == -1 || index < (len - 15)){
+ if (index == -1 || index < (len - 15)) {
return value.substr(0, len - 3) + "...";
- }else{
+ } else {
return vs.substr(0, index) + "...";
}
- } else{
+ } else {
return value.substr(0, len - 3) + "...";
}
}
@@ -12697,7 +6177,7 @@ Ext.util.Format = function(){
* @param {Mixed} value Reference to check
* @return {Mixed} Empty string if converted, otherwise the original value
*/
- undef : function(value){
+ undef : function(value) {
return value !== undefined ? value : "";
},
@@ -12707,7 +6187,7 @@ Ext.util.Format = function(){
* @param {String} defaultValue The value to insert of it's undefined (defaults to "")
* @return {String}
*/
- defaultValue : function(value, defaultValue){
+ defaultValue : function(value, defaultValue) {
return value !== undefined && value !== '' ? value : defaultValue;
},
@@ -12716,7 +6196,7 @@ Ext.util.Format = function(){
* @param {String} value The string to encode
* @return {String} The encoded text
*/
- htmlEncode : function(value){
+ htmlEncode : function(value) {
return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(/").replace(/</g, "<").replace(/"/g, '"').replace(/&/g, "&");
},
@@ -12734,7 +6214,7 @@ Ext.util.Format = function(){
* @param {String} value The text to trim
* @return {String} The trimmed text
*/
- trim : function(value){
+ trim : function(value) {
return String(value).replace(trimRe, "");
},
@@ -12745,7 +6225,7 @@ Ext.util.Format = function(){
* @param {Number} length The length of the substring
* @return {String} The substring
*/
- substr : function(value, start, length){
+ substr : function(value, start, length) {
return String(value).substr(start, length);
},
@@ -12754,7 +6234,7 @@ Ext.util.Format = function(){
* @param {String} value The text to convert
* @return {String} The converted text
*/
- lowercase : function(value){
+ lowercase : function(value) {
return String(value).toLowerCase();
},
@@ -12763,7 +6243,7 @@ Ext.util.Format = function(){
* @param {String} value The text to convert
* @return {String} The converted text
*/
- uppercase : function(value){
+ uppercase : function(value) {
return String(value).toUpperCase();
},
@@ -12772,17 +6252,17 @@ Ext.util.Format = function(){
* @param {String} value The text to convert
* @return {String} The converted text
*/
- capitalize : function(value){
+ capitalize : function(value) {
return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
},
// private
- call : function(value, fn){
- if(arguments.length > 2){
+ call : function(value, fn) {
+ if (arguments.length > 2) {
var args = Array.prototype.slice.call(arguments, 2);
args.unshift(value);
return eval(fn).apply(window, args);
- }else{
+ } else {
return eval(fn).call(window, value);
}
},
@@ -12792,7 +6272,7 @@ Ext.util.Format = function(){
* @param {Number/String} value The numeric value to format
* @return {String} The formatted currency string
*/
- usMoney : function(v){
+ usMoney : function(v) {
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);
@@ -12804,7 +6284,7 @@ Ext.util.Format = function(){
whole = whole.replace(r, '$1' + ',' + '$2');
}
v = whole + sub;
- if(v.charAt(0) == '-'){
+ if (v.charAt(0) == '-') {
return '-$' + v.substr(1);
}
return "$" + v;
@@ -12816,11 +6296,11 @@ Ext.util.Format = function(){
* @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')
* @return {String} The formatted date string
*/
- date : function(v, format){
- if(!v){
+ date : function(v, format) {
+ if (!v) {
return "";
}
- if(!Ext.isDate(v)){
+ if (!Ext.isDate(v)) {
v = new Date(Date.parse(v));
}
return v.dateFormat(format || "m/d/Y");
@@ -12831,8 +6311,8 @@ Ext.util.Format = function(){
* @param {String} format Any valid date format string
* @return {Function} The date formatting function
*/
- dateRenderer : function(format){
- return function(v){
+ dateRenderer : function(format) {
+ return function(v) {
return Ext.util.Format.date(v, format);
};
},
@@ -12842,7 +6322,7 @@ Ext.util.Format = function(){
* @param {Mixed} value The text from which to strip tags
* @return {String} The stripped text
*/
- stripTags : function(v){
+ stripTags : function(v) {
return !v ? v : String(v).replace(stripTagsRE, "");
},
@@ -12851,7 +6331,7 @@ Ext.util.Format = function(){
* @param {Mixed} value The text from which to strip script tags
* @return {String} The stripped text
*/
- stripScripts : function(v){
+ stripScripts : function(v) {
return !v ? v : String(v).replace(stripScriptsRe, "");
},
@@ -12860,10 +6340,10 @@ Ext.util.Format = function(){
* @param {Number/String} size The numeric value to format
* @return {String} The formatted file size
*/
- fileSize : function(size){
- if(size < 1024) {
+ fileSize : function(size) {
+ if (size < 1024) {
return size + " bytes";
- } else if(size < 1048576) {
+ } else if (size < 1048576) {
return (Math.round(((size*10) / 1024))/10) + " KB";
} else {
return (Math.round(((size*10) / 1048576))/10) + " MB";
@@ -12878,12 +6358,13 @@ Ext.util.Format = function(){
*/
math : function(){
var fns = {};
+
return function(v, a){
- if(!fns[a]){
+ if (!fns[a]) {
fns[a] = new Function('v', 'return v ' + a + ';');
}
return fns[a](v);
- }
+ };
}(),
/**
@@ -12919,34 +6400,34 @@ Ext.util.Format = function(){
* @return {String} The formatted number.
*/
number: function(v, format) {
- if(!format){
+ if (!format) {
return v;
}
v = Ext.num(v, NaN);
- if (isNaN(v)){
+ if (isNaN(v)) {
return '';
}
var comma = ',',
- dec = '.',
- i18n = false,
- neg = v < 0;
+ dec = '.',
+ i18n = false,
+ neg = v < 0;
v = Math.abs(v);
- if(format.substr(format.length - 2) == '/i'){
+ if (format.substr(format.length - 2) == '/i') {
format = format.substr(0, format.length - 2);
- i18n = true;
- comma = '.';
- dec = ',';
+ i18n = true;
+ comma = '.';
+ dec = ',';
}
var hasComma = format.indexOf(comma) != -1,
- psplit = (i18n ? format.replace(/[^\d\,]/g, '') : format.replace(/[^\d\.]/g, '')).split(dec);
+ psplit = (i18n ? format.replace(/[^\d\,]/g, '') : format.replace(/[^\d\.]/g, '')).split(dec);
- if(1 < psplit.length){
+ if (1 < psplit.length) {
v = v.toFixed(psplit[1].length);
- }else if(2 < psplit.length){
+ } else if(2 < psplit.length) {
throw ('NumberFormatException: invalid format, formats should have no more than 1 period: ' + format);
- }else{
+ } else {
v = v.toFixed(0);
}
@@ -12955,12 +6436,18 @@ Ext.util.Format = function(){
psplit = fnum.split('.');
if (hasComma) {
- var cnum = psplit[0], parr = [], j = cnum.length, m = Math.floor(j / 3), n = cnum.length % 3 || 3;
-
- for (var i = 0; i < j; i += n) {
+ var cnum = psplit[0],
+ parr = [],
+ j = cnum.length,
+ m = Math.floor(j / 3),
+ n = cnum.length % 3 || 3,
+ i;
+
+ for (i = 0; i < j; i += n) {
if (i != 0) {
n = 3;
}
+
parr[parr.length] = cnum.substr(i, n);
m -= 1;
}
@@ -12982,8 +6469,8 @@ Ext.util.Format = function(){
* @param {String} format Any valid number format string for {@link #number}
* @return {Function} The number formatting function
*/
- numberRenderer : function(format){
- return function(v){
+ numberRenderer : function(format) {
+ return function(v) {
return Ext.util.Format.number(v, format);
};
},
@@ -12996,7 +6483,7 @@ Ext.util.Format = function(){
* @param {String} singular The singular form of the word
* @param {String} plural (optional) The plural form of the word (defaults to the singular with an "s")
*/
- plural : function(v, s, p){
+ plural : function(v, s, p) {
return v +' ' + (v == 1 ? s : (p ? p : s+'s'));
},
@@ -13005,10 +6492,10 @@ Ext.util.Format = function(){
* @param {String} The string value to format.
* @return {String} The string with embedded <br/> tags in place of newlines.
*/
- nl2br : function(v){
+ nl2br : function(v) {
return Ext.isEmpty(v) ? '' : v.replace(nl2brRe, '
');
}
- }
+ };
}();
/**
* @class Ext.XTemplate
@@ -13665,48 +7152,51 @@ Ext.util.CSS = function(){
@param {Mixed} el The element to listen on
@param {Object} config
*/
-Ext.util.ClickRepeater = function(el, config)
-{
- this.el = Ext.get(el);
- this.el.unselectable();
+Ext.util.ClickRepeater = Ext.extend(Ext.util.Observable, {
+
+ constructor : function(el, config){
+ this.el = Ext.get(el);
+ this.el.unselectable();
- Ext.apply(this, config);
+ Ext.apply(this, config);
- this.addEvents(
- /**
- * @event mousedown
- * Fires when the mouse button is depressed.
- * @param {Ext.util.ClickRepeater} this
- */
+ this.addEvents(
+ /**
+ * @event mousedown
+ * Fires when the mouse button is depressed.
+ * @param {Ext.util.ClickRepeater} this
+ * @param {Ext.EventObject} e
+ */
"mousedown",
- /**
- * @event click
- * Fires on a specified interval during the time the element is pressed.
- * @param {Ext.util.ClickRepeater} this
- */
+ /**
+ * @event click
+ * Fires on a specified interval during the time the element is pressed.
+ * @param {Ext.util.ClickRepeater} this
+ * @param {Ext.EventObject} e
+ */
"click",
- /**
- * @event mouseup
- * Fires when the mouse key is released.
- * @param {Ext.util.ClickRepeater} this
- */
+ /**
+ * @event mouseup
+ * Fires when the mouse key is released.
+ * @param {Ext.util.ClickRepeater} this
+ * @param {Ext.EventObject} e
+ */
"mouseup"
- );
-
- if(!this.disabled){
- this.disabled = true;
- this.enable();
- }
+ );
- // allow inline handler
- if(this.handler){
- this.on("click", this.handler, this.scope || this);
- }
+ if(!this.disabled){
+ this.disabled = true;
+ this.enable();
+ }
- Ext.util.ClickRepeater.superclass.constructor.call(this);
-};
+ // allow inline handler
+ if(this.handler){
+ this.on("click", this.handler, this.scope || this);
+ }
-Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
+ Ext.util.ClickRepeater.superclass.constructor.call(this);
+ },
+
interval : 20,
delay: 250,
preventDefault : true,
@@ -13768,16 +7258,16 @@ Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
this.purgeListeners();
},
- handleDblClick : function(){
+ handleDblClick : function(e){
clearTimeout(this.timer);
this.el.blur();
- this.fireEvent("mousedown", this);
- this.fireEvent("click", this);
+ this.fireEvent("mousedown", this, e);
+ this.fireEvent("click", this, e);
},
// private
- handleMouseDown : function(){
+ handleMouseDown : function(e){
clearTimeout(this.timer);
this.el.blur();
if(this.pressClass){
@@ -13788,25 +7278,25 @@ Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
Ext.getDoc().on("mouseup", this.handleMouseUp, this);
this.el.on("mouseout", this.handleMouseOut, this);
- this.fireEvent("mousedown", this);
- this.fireEvent("click", this);
+ this.fireEvent("mousedown", this, e);
+ this.fireEvent("click", this, e);
// Do not honor delay or interval if acceleration wanted.
if (this.accelerate) {
this.delay = 400;
}
- this.timer = this.click.defer(this.delay || this.interval, this);
+ this.timer = this.click.defer(this.delay || this.interval, this, [e]);
},
// private
- click : function(){
- this.fireEvent("click", this);
+ click : function(e){
+ this.fireEvent("click", this, e);
this.timer = this.click.defer(this.accelerate ?
this.easeOutExpo(this.mousedownTime.getElapsed(),
400,
-390,
12000) :
- this.interval, this);
+ this.interval, this, [e]);
},
easeOutExpo : function (t, b, c, d) {
@@ -13832,13 +7322,13 @@ Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
},
// private
- handleMouseUp : function(){
+ handleMouseUp : function(e){
clearTimeout(this.timer);
this.el.un("mouseover", this.handleMouseReturn, this);
this.el.un("mouseout", this.handleMouseOut, this);
Ext.getDoc().un("mouseup", this.handleMouseUp, this);
this.el.removeClass(this.pressClass);
- this.fireEvent("mouseup", this);
+ this.fireEvent("mouseup", this, e);
}
});/**
* @class Ext.KeyNav
@@ -13897,8 +7387,8 @@ Ext.KeyNav.prototype = {
// private
relay : function(e){
- var k = e.getKey();
- var h = this.keyToHandler[k];
+ var k = e.getKey(),
+ h = this.keyToHandler[k];
if(h && this[h]){
if(this.doRelay(e, this[h], h) !== true){
e[this.defaultEventAction]();
@@ -13908,7 +7398,7 @@ Ext.KeyNav.prototype = {
// private
doRelay : function(e, h, hname){
- return h.call(this.scope || this, e);
+ return h.call(this.scope || this, e, hname);
},
// possible handlers