4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
17 window["undefined"] = window["undefined"];
21 * Roo core utilities and functions.
26 * Copies all the properties of config to obj.
27 * @param {Object} obj The receiver of the properties
28 * @param {Object} config The source of the properties
29 * @param {Object} defaults A different object that will also be applied for default values
30 * @return {Object} returns obj
35 Roo.apply = function(o, c, defaults){
37 // no "this" reference for friendly out of scope calls
38 Roo.apply(o, defaults);
40 if(o && c && typeof c == 'object'){
51 var ua = navigator.userAgent.toLowerCase();
53 var isStrict = document.compatMode == "CSS1Compat",
54 isOpera = ua.indexOf("opera") > -1,
55 isSafari = (/webkit|khtml/).test(ua),
56 isFirefox = ua.indexOf("firefox") > -1,
57 isIE = ua.indexOf("msie") > -1,
58 isIE7 = ua.indexOf("msie 7") > -1,
59 isIE11 = /trident.*rv\:11\./.test(ua),
60 isGecko = !isSafari && ua.indexOf("gecko") > -1,
61 isBorderBox = isIE && !isStrict,
62 isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
63 isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
64 isLinux = (ua.indexOf("linux") != -1),
65 isSecure = window.location.href.toLowerCase().indexOf("https") === 0,
66 isIOS = /iphone|ipad/.test(ua),
67 isAndroid = /android/.test(ua),
68 isTouch = (function() {
70 if (ua.indexOf('chrome') != -1 && ua.indexOf('android') == -1) {
71 window.addEventListener('touchstart', function __set_has_touch__ () {
73 window.removeEventListener('touchstart', __set_has_touch__);
75 return false; // no touch on chrome!?
77 document.createEvent("TouchEvent");
84 // remove css image flicker
87 document.execCommand("BackgroundImageCache", false, true);
93 * True if the browser is in strict mode
98 * True if the page is running over SSL
103 * True when the document is fully initialized and ready for action
108 * Turn on debugging output (currently only the factory uses this)
115 * True to automatically uncache orphaned Roo.Elements periodically (defaults to true)
118 enableGarbageCollector : true,
121 * True to automatically purge event listeners after uncaching an element (defaults to false).
122 * Note: this only happens if enableGarbageCollector is true.
125 enableListenerCollection:false,
128 * URL to a blank file used by Roo when in secure mode for iframe src and onReady src to prevent
129 * the IE insecure content warning (defaults to javascript:false).
132 SSL_SECURE_URL : "javascript:false",
135 * URL to a 1x1 transparent gif image used by Roo to create inline icons with CSS background images. (Defaults to
136 * "http://Roojs.com/s.gif" and you should change this to a URL on your server).
139 BLANK_IMAGE_URL : "http:/"+"/localhost/s.gif",
141 emptyFn : function(){},
144 * Copies all the properties of config to obj if they don't already exist.
145 * @param {Object} obj The receiver of the properties
146 * @param {Object} config The source of the properties
147 * @return {Object} returns obj
149 applyIf : function(o, c){
152 if(typeof o[p] == "undefined"){ o[p] = c[p]; }
159 * Applies event listeners to elements by selectors when the document is ready.
160 * The event name is specified with an @ suffix.
163 // add a listener for click on all anchors in element with id foo
164 '#foo a@click' : function(e, t){
168 // add the same listener to multiple selectors (separated by comma BEFORE the @)
169 '#foo a, #bar span.some-class@mouseover' : function(){
174 * @param {Object} obj The list of behaviors to apply
176 addBehaviors : function(o){
178 Roo.onReady(function(){
183 var cache = {}; // simple cache for applying multiple behaviors to same selector does query multiple times
185 var parts = b.split('@');
186 if(parts[1]){ // for Object prototype breakers
189 cache[s] = Roo.select(s);
191 cache[s].on(parts[1], o[b]);
198 * Generates unique ids. If the element already has an id, it is unchanged
199 * @param {String/HTMLElement/Element} el (optional) The element to generate an id for
200 * @param {String} prefix (optional) Id prefix (defaults "Roo-gen")
201 * @return {String} The generated Id.
203 id : function(el, prefix){
204 prefix = prefix || "roo-gen";
206 var id = prefix + (++idSeed);
207 return el ? (el.id ? el.id : (el.id = id)) : id;
212 * Extends one class with another class and optionally overrides members with the passed literal. This class
213 * also adds the function "override()" to the class that can be used to override
214 * members on an instance.
215 * @param {Object} subclass The class inheriting the functionality
216 * @param {Object} superclass The class being extended
217 * @param {Object} overrides (optional) A literal with members
222 var io = function(o){
227 return function(sb, sp, overrides){
228 if(typeof sp == 'object'){ // eg. prototype, rather than function constructor..
231 sb = function(){sp.apply(this, arguments);};
233 var F = function(){}, sbp, spp = sp.prototype;
235 sbp = sb.prototype = new F();
239 if(spp.constructor == Object.prototype.constructor){
244 sb.override = function(o){
248 Roo.override(sb, overrides);
254 * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
256 Roo.override(MyClass, {
257 newMethod1: function(){
260 newMethod2: function(foo){
265 * @param {Object} origclass The class to override
266 * @param {Object} overrides The list of functions to add to origClass. This should be specified as an object literal
267 * containing one or more methods.
270 override : function(origclass, overrides){
272 var p = origclass.prototype;
273 for(var method in overrides){
274 p[method] = overrides[method];
279 * Creates namespaces to be used for scoping variables and classes so that they are not global. Usage:
281 Roo.namespace('Company', 'Company.data');
282 Company.Widget = function() { ... }
283 Company.data.CustomStore = function(config) { ... }
285 * @param {String} namespace1
286 * @param {String} namespace2
287 * @param {String} etc
290 namespace : function(){
291 var a=arguments, o=null, i, j, d, rt;
292 for (i=0; i<a.length; ++i) {
296 eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
297 for (j=1; j<d.length; ++j) {
298 o[d[j]]=o[d[j]] || {};
304 * Creates namespaces to be used for scoping variables and classes so that they are not global. Usage:
306 Roo.factory({ xns: Roo.data, xtype : 'Store', .....});
307 Roo.factory(conf, Roo.data);
309 * @param {String} classname
310 * @param {String} namespace (optional)
314 factory : function(c, ns)
316 // no xtype, no ns or c.xns - or forced off by c.xns
317 if (!c.xtype || (!ns && !c.xns) || (c.xns === false)) { // not enough info...
320 ns = c.xns ? c.xns : ns; // if c.xns is set, then use that..
321 if (c.constructor == ns[c.xtype]) {// already created...
325 if (Roo.debug) { Roo.log("Roo.Factory(" + c.xtype + ")"); }
326 var ret = new ns[c.xtype](c);
330 c.xns = false; // prevent recursion..
334 * Logs to console if it can.
336 * @param {String|Object} string
341 if ((typeof(console) == 'undefined') || (typeof(console.log) == 'undefined')) {
348 * Takes an object and converts it to an encoded URL. e.g. Roo.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2". Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.
352 urlEncode : function(o){
358 var ov = o[key], k = Roo.encodeURIComponent(key);
359 var type = typeof ov;
360 if(type == 'undefined'){
362 }else if(type != "function" && type != "object"){
363 buf.push(k, "=", Roo.encodeURIComponent(ov), "&");
364 }else if(ov instanceof Array){
366 for(var i = 0, len = ov.length; i < len; i++) {
367 buf.push(k, "=", Roo.encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
378 * Safe version of encodeURIComponent
379 * @param {String} data
383 encodeURIComponent : function (data)
386 return encodeURIComponent(data);
387 } catch(e) {} // should be an uri encode error.
389 if (data == '' || data == null){
392 // http://stackoverflow.com/questions/2596483/unicode-and-uri-encoding-decoding-and-escaping-in-javascript
393 function nibble_to_hex(nibble){
394 var chars = '0123456789ABCDEF';
395 return chars.charAt(nibble);
397 data = data.toString();
399 for(var i=0; i<data.length; i++){
400 var c = data.charCodeAt(i);
401 var bs = new Array();
404 bs[0] = 0xF0 | ((c & 0x1C0000) >>> 18);
405 bs[1] = 0x80 | ((c & 0x3F000) >>> 12);
406 bs[2] = 0x80 | ((c & 0xFC0) >>> 6);
407 bs[3] = 0x80 | (c & 0x3F);
408 }else if (c > 0x800){
410 bs[0] = 0xE0 | ((c & 0xF000) >>> 12);
411 bs[1] = 0x80 | ((c & 0xFC0) >>> 6);
412 bs[2] = 0x80 | (c & 0x3F);
415 bs[0] = 0xC0 | ((c & 0x7C0) >>> 6);
416 bs[1] = 0x80 | (c & 0x3F);
421 for(var j=0; j<bs.length; j++){
423 var hex = nibble_to_hex((b & 0xF0) >>> 4)
424 + nibble_to_hex(b &0x0F);
433 * Takes an encoded URL and and converts it to an object. e.g. Roo.urlDecode("foo=1&bar=2"); would return {foo: 1, bar: 2} or Roo.urlDecode("foo=1&bar=2&bar=3&bar=4", true); would return {foo: 1, bar: [2, 3, 4]}.
434 * @param {String} string
435 * @param {Boolean} overwrite (optional) Items of the same name will overwrite previous values instead of creating an an array (Defaults to false).
436 * @return {Object} A literal with members
438 urlDecode : function(string, overwrite){
439 if(!string || !string.length){
443 var pairs = string.split('&');
444 var pair, name, value;
445 for(var i = 0, len = pairs.length; i < len; i++){
446 pair = pairs[i].split('=');
447 name = decodeURIComponent(pair[0]);
448 value = decodeURIComponent(pair[1]);
449 if(overwrite !== true){
450 if(typeof obj[name] == "undefined"){
452 }else if(typeof obj[name] == "string"){
453 obj[name] = [obj[name]];
454 obj[name].push(value);
456 obj[name].push(value);
466 * Iterates an array calling the passed function with each item, stopping if your function returns false. If the
467 * passed array is not really an array, your function is called once with it.
468 * The supplied function is called with (Object item, Number index, Array allItems).
469 * @param {Array/NodeList/Mixed} array
470 * @param {Function} fn
471 * @param {Object} scope
473 each : function(array, fn, scope){
474 if(typeof array.length == "undefined" || typeof array == "string"){
477 for(var i = 0, len = array.length; i < len; i++){
478 if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
483 combine : function(){
484 var as = arguments, l = as.length, r = [];
485 for(var i = 0; i < l; i++){
487 if(a instanceof Array){
489 }else if(a.length !== undefined && !a.substr){
490 r = r.concat(Array.prototype.slice.call(a, 0));
499 * Escapes the passed string for use in a regular expression
500 * @param {String} str
503 escapeRe : function(s) {
504 return s.replace(/([.*+?^${}()|[\]\/\\])/g, "\\$1");
508 callback : function(cb, scope, args, delay){
509 if(typeof cb == "function"){
511 cb.defer(delay, scope, args || []);
513 cb.apply(scope, args || []);
519 * Return the dom node for the passed string (id), dom node, or Roo.Element
520 * @param {String/HTMLElement/Roo.Element} el
521 * @return HTMLElement
523 getDom : function(el){
527 return el.dom ? el.dom : (typeof el == 'string' ? document.getElementById(el) : el);
531 * Shorthand for {@link Roo.ComponentMgr#get}
533 * @return Roo.Component
535 getCmp : function(id){
536 return Roo.ComponentMgr.get(id);
539 num : function(v, defaultValue){
540 if(typeof v != 'number'){
546 destroy : function(){
547 for(var i = 0, a = arguments, len = a.length; i < len; i++) {
551 as.removeAllListeners();
555 if(typeof as.purgeListeners == 'function'){
558 if(typeof as.destroy == 'function'){
565 // inpired by a similar function in mootools library
567 * Returns the type of object that is passed in. If the object passed in is null or undefined it
568 * return false otherwise it returns one of the following values:<ul>
569 * <li><b>string</b>: If the object passed is a string</li>
570 * <li><b>number</b>: If the object passed is a number</li>
571 * <li><b>boolean</b>: If the object passed is a boolean value</li>
572 * <li><b>function</b>: If the object passed is a function reference</li>
573 * <li><b>object</b>: If the object passed is an object</li>
574 * <li><b>array</b>: If the object passed is an array</li>
575 * <li><b>regexp</b>: If the object passed is a regular expression</li>
576 * <li><b>element</b>: If the object passed is a DOM Element</li>
577 * <li><b>nodelist</b>: If the object passed is a DOM NodeList</li>
578 * <li><b>textnode</b>: If the object passed is a DOM text node and contains something other than whitespace</li>
579 * <li><b>whitespace</b>: If the object passed is a DOM text node and contains only whitespace</li>
580 * @param {Mixed} object
584 if(o === undefined || o === null){
591 if(t == 'object' && o.nodeName) {
593 case 1: return 'element';
594 case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
597 if(t == 'object' || t == 'function') {
598 switch(o.constructor) {
599 case Array: return 'array';
600 case RegExp: return 'regexp';
602 if(typeof o.length == 'number' && typeof o.item == 'function') {
610 * Returns true if the passed value is null, undefined or an empty string (optional).
611 * @param {Mixed} value The value to test
612 * @param {Boolean} allowBlank (optional) Pass true if an empty string is not considered empty
615 isEmpty : function(v, allowBlank){
616 return v === null || v === undefined || (!allowBlank ? v === '' : false);
624 isFirefox : isFirefox,
634 isBorderBox : isBorderBox,
636 isWindows : isWindows,
644 isAndroid : isAndroid,
649 * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
650 * you may want to set this to true.
653 useShims : ((isIE && !isIE7) || (isGecko && isMac)),
658 * Selects a single element as a Roo Element
659 * This is about as close as you can get to jQuery's $('do crazy stuff')
660 * @param {String} selector The selector/xpath query
661 * @param {Node} root (optional) The start of the query (defaults to document).
662 * @return {Roo.Element}
664 selectNode : function(selector, root)
666 var node = Roo.DomQuery.selectNode(selector,root);
667 return node ? Roo.get(node) : new Roo.Element(false);
675 Roo.namespace("Roo", "Roo.util", "Roo.grid", "Roo.dd", "Roo.tree", "Roo.data",
676 "Roo.form", "Roo.menu", "Roo.state", "Roo.lib", "Roo.layout",
679 "Roo.bootstrap.dash");
682 * Ext JS Library 1.1.1
683 * Copyright(c) 2006-2007, Ext JS, LLC.
685 * Originally Released Under LGPL - original licence link has changed is not relivant.
688 * <script type="text/javascript">
692 // wrappedn so fnCleanup is not in global scope...
694 function fnCleanUp() {
695 var p = Function.prototype;
696 delete p.createSequence;
698 delete p.createDelegate;
699 delete p.createCallback;
700 delete p.createInterceptor;
702 window.detachEvent("onunload", fnCleanUp);
704 window.attachEvent("onunload", fnCleanUp);
711 * These functions are available on every Function object (any JavaScript function).
713 Roo.apply(Function.prototype, {
715 * Creates a callback that passes arguments[0], arguments[1], arguments[2], ...
716 * Call directly on any function. Example: <code>myFunction.createCallback(myarg, myarg2)</code>
717 * Will create a function that is bound to those 2 args.
718 * @return {Function} The new function
720 createCallback : function(/*args...*/){
721 // make args available, in function below
722 var args = arguments;
725 return method.apply(window, args);
730 * Creates a delegate (callback) that sets the scope to obj.
731 * Call directly on any function. Example: <code>this.myFunction.createDelegate(this)</code>
732 * Will create a function that is automatically scoped to this.
733 * @param {Object} obj (optional) The object for which the scope is set
734 * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
735 * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
736 * if a number the args are inserted at the specified position
737 * @return {Function} The new function
739 createDelegate : function(obj, args, appendArgs){
742 var callArgs = args || arguments;
743 if(appendArgs === true){
744 callArgs = Array.prototype.slice.call(arguments, 0);
745 callArgs = callArgs.concat(args);
746 }else if(typeof appendArgs == "number"){
747 callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
748 var applyArgs = [appendArgs, 0].concat(args); // create method call params
749 Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
751 return method.apply(obj || window, callArgs);
756 * Calls this function after the number of millseconds specified.
757 * @param {Number} millis The number of milliseconds for the setTimeout call (if 0 the function is executed immediately)
758 * @param {Object} obj (optional) The object for which the scope is set
759 * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
760 * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
761 * if a number the args are inserted at the specified position
762 * @return {Number} The timeout id that can be used with clearTimeout
764 defer : function(millis, obj, args, appendArgs){
765 var fn = this.createDelegate(obj, args, appendArgs);
767 return setTimeout(fn, millis);
773 * Create a combined function call sequence of the original function + the passed function.
774 * The resulting function returns the results of the original function.
775 * The passed fcn is called with the parameters of the original function
776 * @param {Function} fcn The function to sequence
777 * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
778 * @return {Function} The new function
780 createSequence : function(fcn, scope){
781 if(typeof fcn != "function"){
786 var retval = method.apply(this || window, arguments);
787 fcn.apply(scope || this || window, arguments);
793 * Creates an interceptor function. The passed fcn is called before the original one. If it returns false, the original one is not called.
794 * The resulting function returns the results of the original function.
795 * The passed fcn is called with the parameters of the original function.
797 * @param {Function} fcn The function to call before the original
798 * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
799 * @return {Function} The new function
801 createInterceptor : function(fcn, scope){
802 if(typeof fcn != "function"){
809 if(fcn.apply(scope || this || window, arguments) === false){
812 return method.apply(this || window, arguments);
818 * Ext JS Library 1.1.1
819 * Copyright(c) 2006-2007, Ext JS, LLC.
821 * Originally Released Under LGPL - original licence link has changed is not relivant.
824 * <script type="text/javascript">
827 Roo.applyIf(String, {
832 * Escapes the passed string for ' and \
833 * @param {String} string The string to escape
834 * @return {String} The escaped string
837 escape : function(string) {
838 return string.replace(/('|\\)/g, "\\$1");
842 * Pads the left side of a string with a specified character. This is especially useful
843 * for normalizing number and date strings. Example usage:
845 var s = String.leftPad('123', 5, '0');
846 // s now contains the string: '00123'
848 * @param {String} string The original string
849 * @param {Number} size The total length of the output string
850 * @param {String} char (optional) The character with which to pad the original string (defaults to empty string " ")
851 * @return {String} The padded string
854 leftPad : function (val, size, ch) {
855 var result = new String(val);
856 if(ch === null || ch === undefined || ch === '') {
859 while (result.length < size) {
860 result = ch + result;
866 * Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens. Each
867 * token must be unique, and must increment in the format {0}, {1}, etc. Example usage:
869 var cls = 'my-class', text = 'Some text';
870 var s = String.format('<div class="{0}">{1}</div>', cls, text);
871 // s now contains the string: '<div class="my-class">Some text</div>'
873 * @param {String} string The tokenized string to be formatted
874 * @param {String} value1 The value to replace token {0}
875 * @param {String} value2 Etc...
876 * @return {String} The formatted string
879 format : function(format){
880 var args = Array.prototype.slice.call(arguments, 1);
881 return format.replace(/\{(\d+)\}/g, function(m, i){
882 return Roo.util.Format.htmlEncode(args[i]);
888 * Utility function that allows you to easily switch a string between two alternating values. The passed value
889 * is compared to the current string, and if they are equal, the other value that was passed in is returned. If
890 * they are already different, the first value passed in is returned. Note that this method returns the new value
891 * but does not change the current string.
893 // alternate sort directions
894 sort = sort.toggle('ASC', 'DESC');
896 // instead of conditional logic:
897 sort = (sort == 'ASC' ? 'DESC' : 'ASC');
899 * @param {String} value The value to compare to the current string
900 * @param {String} other The new value to use if the string already equals the first value passed in
901 * @return {String} The new value
904 String.prototype.toggle = function(value, other){
905 return this == value ? other : value;
908 * Ext JS Library 1.1.1
909 * Copyright(c) 2006-2007, Ext JS, LLC.
911 * Originally Released Under LGPL - original licence link has changed is not relivant.
914 * <script type="text/javascript">
920 Roo.applyIf(Number.prototype, {
922 * Checks whether or not the current number is within a desired range. If the number is already within the
923 * range it is returned, otherwise the min or max value is returned depending on which side of the range is
924 * exceeded. Note that this method returns the constrained value but does not change the current number.
925 * @param {Number} min The minimum number in the range
926 * @param {Number} max The maximum number in the range
927 * @return {Number} The constrained value if outside the range, otherwise the current value
929 constrain : function(min, max){
930 return Math.min(Math.max(this, min), max);
934 * Ext JS Library 1.1.1
935 * Copyright(c) 2006-2007, Ext JS, LLC.
937 * Originally Released Under LGPL - original licence link has changed is not relivant.
940 * <script type="text/javascript">
945 Roo.applyIf(Array.prototype, {
948 * Checks whether or not the specified object exists in the array.
949 * @param {Object} o The object to check for
950 * @return {Number} The index of o in the array (or -1 if it is not found)
952 indexOf : function(o){
953 for (var i = 0, len = this.length; i < len; i++){
954 if(this[i] == o) { return i; }
960 * Removes the specified object from the array. If the object is not found nothing happens.
961 * @param {Object} o The object to remove
963 remove : function(o){
964 var index = this.indexOf(o);
966 this.splice(index, 1);
970 * Map (JS 1.6 compatibility)
971 * @param {Function} function to call
975 var len = this.length >>> 0;
976 if (typeof fun != "function") {
977 throw new TypeError();
979 var res = new Array(len);
980 var thisp = arguments[1];
981 for (var i = 0; i < len; i++)
984 res[i] = fun.call(thisp, this[i], i, this);
997 * Ext JS Library 1.1.1
998 * Copyright(c) 2006-2007, Ext JS, LLC.
1000 * Originally Released Under LGPL - original licence link has changed is not relivant.
1003 * <script type="text/javascript">
1009 * The date parsing and format syntax is a subset of
1010 * <a href="http://www.php.net/date">PHP's date() function</a>, and the formats that are
1011 * supported will provide results equivalent to their PHP versions.
1013 * Following is the list of all currently supported formats:
1016 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
1018 Format Output Description
1019 ------ ---------- --------------------------------------------------------------
1020 d 10 Day of the month, 2 digits with leading zeros
1021 D Wed A textual representation of a day, three letters
1022 j 10 Day of the month without leading zeros
1023 l Wednesday A full textual representation of the day of the week
1024 S th English ordinal day of month suffix, 2 chars (use with j)
1025 w 3 Numeric representation of the day of the week
1026 z 9 The julian date, or day of the year (0-365)
1027 W 01 ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
1028 F January A full textual representation of the month
1029 m 01 Numeric representation of a month, with leading zeros
1030 M Jan Month name abbreviation, three letters
1031 n 1 Numeric representation of a month, without leading zeros
1032 t 31 Number of days in the given month
1033 L 0 Whether it's a leap year (1 if it is a leap year, else 0)
1034 Y 2007 A full numeric representation of a year, 4 digits
1035 y 07 A two digit representation of a year
1036 a pm Lowercase Ante meridiem and Post meridiem
1037 A PM Uppercase Ante meridiem and Post meridiem
1038 g 3 12-hour format of an hour without leading zeros
1039 G 15 24-hour format of an hour without leading zeros
1040 h 03 12-hour format of an hour with leading zeros
1041 H 15 24-hour format of an hour with leading zeros
1042 i 05 Minutes with leading zeros
1043 s 01 Seconds, with leading zeros
1044 O -0600 Difference to Greenwich time (GMT) in hours (Allows +08, without minutes)
1045 P -06:00 Difference to Greenwich time (GMT) with colon between hours and minutes
1046 T CST Timezone setting of the machine running the code
1047 Z -21600 Timezone offset in seconds (negative if west of UTC, positive if east)
1050 * Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
1052 var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
1053 document.write(dt.format('Y-m-d')); //2007-01-10
1054 document.write(dt.format('F j, Y, g:i a')); //January 10, 2007, 3:05 pm
1055 document.write(dt.format('l, \\t\\he dS of F Y h:i:s A')); //Wednesday, the 10th of January 2007 03:05:01 PM
1058 * Here are some standard date/time patterns that you might find helpful. They
1059 * are not part of the source of Date.js, but to use them you can simply copy this
1060 * block of code into any script that is included after Date.js and they will also become
1061 * globally available on the Date object. Feel free to add or remove patterns as needed in your code.
1064 ISO8601Long:"Y-m-d H:i:s",
1065 ISO8601Short:"Y-m-d",
1067 LongDate: "l, F d, Y",
1068 FullDateTime: "l, F d, Y g:i:s A",
1071 LongTime: "g:i:s A",
1072 SortableDateTime: "Y-m-d\\TH:i:s",
1073 UniversalSortableDateTime: "Y-m-d H:i:sO",
1080 var dt = new Date();
1081 document.write(dt.format(Date.patterns.ShortDate));
1086 * Most of the date-formatting functions below are the excellent work of Baron Schwartz.
1087 * They generate precompiled functions from date formats instead of parsing and
1088 * processing the pattern every time you format a date. These functions are available
1089 * on every Date object (any javascript function).
1091 * The original article and download are here:
1092 * http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/
1099 Returns the number of milliseconds between this date and date
1100 @param {Date} date (optional) Defaults to now
1101 @return {Number} The diff in milliseconds
1102 @member Date getElapsed
1104 Date.prototype.getElapsed = function(date) {
1105 return Math.abs((date || new Date()).getTime()-this.getTime());
1107 // was in date file..
1111 Date.parseFunctions = {count:0};
1113 Date.parseRegexes = [];
1115 Date.formatFunctions = {count:0};
1118 Date.prototype.dateFormat = function(format) {
1119 if (Date.formatFunctions[format] == null) {
1120 Date.createNewFormat(format);
1122 var func = Date.formatFunctions[format];
1123 return this[func]();
1128 * Formats a date given the supplied format string
1129 * @param {String} format The format string
1130 * @return {String} The formatted date
1133 Date.prototype.format = Date.prototype.dateFormat;
1136 Date.createNewFormat = function(format) {
1137 var funcName = "format" + Date.formatFunctions.count++;
1138 Date.formatFunctions[format] = funcName;
1139 var code = "Date.prototype." + funcName + " = function(){return ";
1140 var special = false;
1142 for (var i = 0; i < format.length; ++i) {
1143 ch = format.charAt(i);
1144 if (!special && ch == "\\") {
1149 code += "'" + String.escape(ch) + "' + ";
1152 code += Date.getFormatCode(ch);
1155 /** eval:var:zzzzzzzzzzzzz */
1156 eval(code.substring(0, code.length - 3) + ";}");
1160 Date.getFormatCode = function(character) {
1161 switch (character) {
1163 return "String.leftPad(this.getDate(), 2, '0') + ";
1165 return "Date.dayNames[this.getDay()].substring(0, 3) + ";
1167 return "this.getDate() + ";
1169 return "Date.dayNames[this.getDay()] + ";
1171 return "this.getSuffix() + ";
1173 return "this.getDay() + ";
1175 return "this.getDayOfYear() + ";
1177 return "this.getWeekOfYear() + ";
1179 return "Date.monthNames[this.getMonth()] + ";
1181 return "String.leftPad(this.getMonth() + 1, 2, '0') + ";
1183 return "Date.monthNames[this.getMonth()].substring(0, 3) + ";
1185 return "(this.getMonth() + 1) + ";
1187 return "this.getDaysInMonth() + ";
1189 return "(this.isLeapYear() ? 1 : 0) + ";
1191 return "this.getFullYear() + ";
1193 return "('' + this.getFullYear()).substring(2, 4) + ";
1195 return "(this.getHours() < 12 ? 'am' : 'pm') + ";
1197 return "(this.getHours() < 12 ? 'AM' : 'PM') + ";
1199 return "((this.getHours() % 12) ? this.getHours() % 12 : 12) + ";
1201 return "this.getHours() + ";
1203 return "String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0') + ";
1205 return "String.leftPad(this.getHours(), 2, '0') + ";
1207 return "String.leftPad(this.getMinutes(), 2, '0') + ";
1209 return "String.leftPad(this.getSeconds(), 2, '0') + ";
1211 return "this.getGMTOffset() + ";
1213 return "this.getGMTColonOffset() + ";
1215 return "this.getTimezone() + ";
1217 return "(this.getTimezoneOffset() * -60) + ";
1219 return "'" + String.escape(character) + "' + ";
1224 * Parses the passed string using the specified format. Note that this function expects dates in normal calendar
1225 * format, meaning that months are 1-based (1 = January) and not zero-based like in JavaScript dates. Any part of
1226 * the date format that is not specified will default to the current date value for that part. Time parts can also
1227 * be specified, but default to 0. Keep in mind that the input date string must precisely match the specified format
1228 * string or the parse operation will fail.
1231 //dt = Fri May 25 2007 (current date)
1232 var dt = new Date();
1234 //dt = Thu May 25 2006 (today's month/day in 2006)
1235 dt = Date.parseDate("2006", "Y");
1237 //dt = Sun Jan 15 2006 (all date parts specified)
1238 dt = Date.parseDate("2006-1-15", "Y-m-d");
1240 //dt = Sun Jan 15 2006 15:20:01 GMT-0600 (CST)
1241 dt = Date.parseDate("2006-1-15 3:20:01 PM", "Y-m-d h:i:s A" );
1243 * @param {String} input The unparsed date as a string
1244 * @param {String} format The format the date is in
1245 * @return {Date} The parsed date
1248 Date.parseDate = function(input, format) {
1249 if (Date.parseFunctions[format] == null) {
1250 Date.createParser(format);
1252 var func = Date.parseFunctions[format];
1253 return Date[func](input);
1259 Date.createParser = function(format) {
1260 var funcName = "parse" + Date.parseFunctions.count++;
1261 var regexNum = Date.parseRegexes.length;
1262 var currentGroup = 1;
1263 Date.parseFunctions[format] = funcName;
1265 var code = "Date." + funcName + " = function(input){\n"
1266 + "var y = -1, m = -1, d = -1, h = -1, i = -1, s = -1, o, z, v;\n"
1267 + "var d = new Date();\n"
1268 + "y = d.getFullYear();\n"
1269 + "m = d.getMonth();\n"
1270 + "d = d.getDate();\n"
1271 + "if (typeof(input) !== 'string') { input = input.toString(); }\n"
1272 + "var results = input.match(Date.parseRegexes[" + regexNum + "]);\n"
1273 + "if (results && results.length > 0) {";
1276 var special = false;
1278 for (var i = 0; i < format.length; ++i) {
1279 ch = format.charAt(i);
1280 if (!special && ch == "\\") {
1285 regex += String.escape(ch);
1288 var obj = Date.formatCodeToRegex(ch, currentGroup);
1289 currentGroup += obj.g;
1291 if (obj.g && obj.c) {
1297 code += "if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0)\n"
1298 + "{v = new Date(y, m, d, h, i, s);}\n"
1299 + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0)\n"
1300 + "{v = new Date(y, m, d, h, i);}\n"
1301 + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0)\n"
1302 + "{v = new Date(y, m, d, h);}\n"
1303 + "else if (y >= 0 && m >= 0 && d > 0)\n"
1304 + "{v = new Date(y, m, d);}\n"
1305 + "else if (y >= 0 && m >= 0)\n"
1306 + "{v = new Date(y, m);}\n"
1307 + "else if (y >= 0)\n"
1308 + "{v = new Date(y);}\n"
1309 + "}return (v && (z || o))?\n" // favour UTC offset over GMT offset
1310 + " ((z)? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n" // reset to UTC, then add offset
1311 + " v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n" // reset to GMT, then add offset
1314 Date.parseRegexes[regexNum] = new RegExp("^" + regex + "$");
1315 /** eval:var:zzzzzzzzzzzzz */
1320 Date.formatCodeToRegex = function(character, currentGroup) {
1321 switch (character) {
1325 s:"(?:Sun|Mon|Tue|Wed|Thu|Fri|Sat)"};
1328 c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1329 s:"(\\d{1,2})"}; // day of month without leading zeroes
1332 c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1333 s:"(\\d{2})"}; // day of month with leading zeroes
1337 s:"(?:" + Date.dayNames.join("|") + ")"};
1341 s:"(?:st|nd|rd|th)"};
1356 c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "].substring(0, 3)], 10);\n",
1357 s:"(" + Date.monthNames.join("|") + ")"};
1360 c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "]], 10);\n",
1361 s:"(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)"};
1364 c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1365 s:"(\\d{1,2})"}; // Numeric representation of a month, without leading zeros
1368 c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1369 s:"(\\d{2})"}; // Numeric representation of a month, with leading zeros
1380 c:"y = parseInt(results[" + currentGroup + "], 10);\n",
1384 c:"var ty = parseInt(results[" + currentGroup + "], 10);\n"
1385 + "y = ty > Date.y2kYear ? 1900 + ty : 2000 + ty;\n",
1389 c:"if (results[" + currentGroup + "] == 'am') {\n"
1390 + "if (h == 12) { h = 0; }\n"
1391 + "} else { if (h < 12) { h += 12; }}",
1395 c:"if (results[" + currentGroup + "] == 'AM') {\n"
1396 + "if (h == 12) { h = 0; }\n"
1397 + "} else { if (h < 12) { h += 12; }}",
1402 c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1403 s:"(\\d{1,2})"}; // 12/24-hr format format of an hour without leading zeroes
1407 c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1408 s:"(\\d{2})"}; // 12/24-hr format format of an hour with leading zeroes
1411 c:"i = parseInt(results[" + currentGroup + "], 10);\n",
1415 c:"s = parseInt(results[" + currentGroup + "], 10);\n",
1420 "o = results[", currentGroup, "];\n",
1421 "var sn = o.substring(0,1);\n", // get + / - sign
1422 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60);\n", // get hours (performs minutes-to-hour conversion also)
1423 "var mn = o.substring(3,5) % 60;\n", // get minutes
1424 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n", // -12hrs <= GMT offset <= 14hrs
1425 " (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1427 s:"([+\-]\\d{2,4})"};
1433 "o = results[", currentGroup, "];\n",
1434 "var sn = o.substring(0,1);\n",
1435 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60);\n",
1436 "var mn = o.substring(4,6) % 60;\n",
1437 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n",
1438 " (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1444 s:"[A-Z]{1,4}"}; // timezone abbrev. may be between 1 - 4 chars
1447 c:"z = results[" + currentGroup + "];\n" // -43200 <= UTC offset <= 50400
1448 + "z = (-43200 <= z*1 && z*1 <= 50400)? z : null;\n",
1449 s:"([+\-]?\\d{1,5})"}; // leading '+' sign is optional for UTC offset
1453 s:String.escape(character)};
1458 * Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
1459 * @return {String} The abbreviated timezone name (e.g. 'CST')
1461 Date.prototype.getTimezone = function() {
1462 return this.toString().replace(/^.*? ([A-Z]{1,4})[\-+][0-9]{4} .*$/, "$1");
1466 * Get the offset from GMT of the current date (equivalent to the format specifier 'O').
1467 * @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600')
1469 Date.prototype.getGMTOffset = function() {
1470 return (this.getTimezoneOffset() > 0 ? "-" : "+")
1471 + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1472 + String.leftPad(this.getTimezoneOffset() % 60, 2, "0");
1476 * Get the offset from GMT of the current date (equivalent to the format specifier 'P').
1477 * @return {String} 2-characters representing hours and 2-characters representing minutes
1478 * seperated by a colon and prefixed with + or - (e.g. '-06:00')
1480 Date.prototype.getGMTColonOffset = function() {
1481 return (this.getTimezoneOffset() > 0 ? "-" : "+")
1482 + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1484 + String.leftPad(this.getTimezoneOffset() %60, 2, "0");
1488 * Get the numeric day number of the year, adjusted for leap year.
1489 * @return {Number} 0 through 364 (365 in leap years)
1491 Date.prototype.getDayOfYear = function() {
1493 Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1494 for (var i = 0; i < this.getMonth(); ++i) {
1495 num += Date.daysInMonth[i];
1497 return num + this.getDate() - 1;
1501 * Get the string representation of the numeric week number of the year
1502 * (equivalent to the format specifier 'W').
1503 * @return {String} '00' through '52'
1505 Date.prototype.getWeekOfYear = function() {
1506 // Skip to Thursday of this week
1507 var now = this.getDayOfYear() + (4 - this.getDay());
1508 // Find the first Thursday of the year
1509 var jan1 = new Date(this.getFullYear(), 0, 1);
1510 var then = (7 - jan1.getDay() + 4);
1511 return String.leftPad(((now - then) / 7) + 1, 2, "0");
1515 * Whether or not the current date is in a leap year.
1516 * @return {Boolean} True if the current date is in a leap year, else false
1518 Date.prototype.isLeapYear = function() {
1519 var year = this.getFullYear();
1520 return ((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
1524 * Get the first day of the current month, adjusted for leap year. The returned value
1525 * is the numeric day index within the week (0-6) which can be used in conjunction with
1526 * the {@link #monthNames} array to retrieve the textual day name.
1529 var dt = new Date('1/10/2007');
1530 document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'
1532 * @return {Number} The day number (0-6)
1534 Date.prototype.getFirstDayOfMonth = function() {
1535 var day = (this.getDay() - (this.getDate() - 1)) % 7;
1536 return (day < 0) ? (day + 7) : day;
1540 * Get the last day of the current month, adjusted for leap year. The returned value
1541 * is the numeric day index within the week (0-6) which can be used in conjunction with
1542 * the {@link #monthNames} array to retrieve the textual day name.
1545 var dt = new Date('1/10/2007');
1546 document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
1548 * @return {Number} The day number (0-6)
1550 Date.prototype.getLastDayOfMonth = function() {
1551 var day = (this.getDay() + (Date.daysInMonth[this.getMonth()] - this.getDate())) % 7;
1552 return (day < 0) ? (day + 7) : day;
1557 * Get the first date of this date's month
1560 Date.prototype.getFirstDateOfMonth = function() {
1561 return new Date(this.getFullYear(), this.getMonth(), 1);
1565 * Get the last date of this date's month
1568 Date.prototype.getLastDateOfMonth = function() {
1569 return new Date(this.getFullYear(), this.getMonth(), this.getDaysInMonth());
1572 * Get the number of days in the current month, adjusted for leap year.
1573 * @return {Number} The number of days in the month
1575 Date.prototype.getDaysInMonth = function() {
1576 Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1577 return Date.daysInMonth[this.getMonth()];
1581 * Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
1582 * @return {String} 'st, 'nd', 'rd' or 'th'
1584 Date.prototype.getSuffix = function() {
1585 switch (this.getDate()) {
1602 Date.daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
1605 * An array of textual month names.
1606 * Override these values for international dates, for example...
1607 * Date.monthNames = ['JanInYourLang', 'FebInYourLang', ...];
1626 * An array of textual day names.
1627 * Override these values for international dates, for example...
1628 * Date.dayNames = ['SundayInYourLang', 'MondayInYourLang', ...];
1644 Date.monthNumbers = {
1659 * Creates and returns a new Date instance with the exact same date value as the called instance.
1660 * Dates are copied and passed by reference, so if a copied date variable is modified later, the original
1661 * variable will also be changed. When the intention is to create a new variable that will not
1662 * modify the original instance, you should create a clone.
1664 * Example of correctly cloning a date:
1667 var orig = new Date('10/1/2006');
1670 document.write(orig); //returns 'Thu Oct 05 2006'!
1673 var orig = new Date('10/1/2006');
1674 var copy = orig.clone();
1676 document.write(orig); //returns 'Thu Oct 01 2006'
1678 * @return {Date} The new Date instance
1680 Date.prototype.clone = function() {
1681 return new Date(this.getTime());
1685 * Clears any time information from this date
1686 @param {Boolean} clone true to create a clone of this date, clear the time and return it
1687 @return {Date} this or the clone
1689 Date.prototype.clearTime = function(clone){
1691 return this.clone().clearTime();
1696 this.setMilliseconds(0);
1701 // safari setMonth is broken -- check that this is only donw once...
1702 if(Roo.isSafari && typeof(Date.brokenSetMonth) == 'undefined'){
1703 Date.brokenSetMonth = Date.prototype.setMonth;
1704 Date.prototype.setMonth = function(num){
1706 var n = Math.ceil(-num);
1707 var back_year = Math.ceil(n/12);
1708 var month = (n % 12) ? 12 - n % 12 : 0 ;
1709 this.setFullYear(this.getFullYear() - back_year);
1710 return Date.brokenSetMonth.call(this, month);
1712 return Date.brokenSetMonth.apply(this, arguments);
1717 /** Date interval constant
1721 /** Date interval constant
1725 /** Date interval constant
1729 /** Date interval constant
1733 /** Date interval constant
1737 /** Date interval constant
1741 /** Date interval constant
1747 * Provides a convenient method of performing basic date arithmetic. This method
1748 * does not modify the Date instance being called - it creates and returns
1749 * a new Date instance containing the resulting date value.
1754 var dt = new Date('10/29/2006').add(Date.DAY, 5);
1755 document.write(dt); //returns 'Fri Oct 06 2006 00:00:00'
1757 //Negative values will subtract correctly:
1758 var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
1759 document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'
1761 //You can even chain several calls together in one line!
1762 var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
1763 document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
1766 * @param {String} interval A valid date interval enum value
1767 * @param {Number} value The amount to add to the current date
1768 * @return {Date} The new Date instance
1770 Date.prototype.add = function(interval, value){
1771 var d = this.clone();
1772 if (!interval || value === 0) { return d; }
1773 switch(interval.toLowerCase()){
1775 d.setMilliseconds(this.getMilliseconds() + value);
1778 d.setSeconds(this.getSeconds() + value);
1781 d.setMinutes(this.getMinutes() + value);
1784 d.setHours(this.getHours() + value);
1787 d.setDate(this.getDate() + value);
1790 var day = this.getDate();
1792 day = Math.min(day, this.getFirstDateOfMonth().add('mo', value).getLastDateOfMonth().getDate());
1795 d.setMonth(this.getMonth() + value);
1798 d.setFullYear(this.getFullYear() + value);
1805 * Ext JS Library 1.1.1
1806 * Copyright(c) 2006-2007, Ext JS, LLC.
1808 * Originally Released Under LGPL - original licence link has changed is not relivant.
1811 * <script type="text/javascript">
1815 * @class Roo.lib.Dom
1818 * Dom utils (from YIU afaik)
1823 * Get the view width
1824 * @param {Boolean} full True will get the full document, otherwise it's the view width
1825 * @return {Number} The width
1828 getViewWidth : function(full) {
1829 return full ? this.getDocumentWidth() : this.getViewportWidth();
1832 * Get the view height
1833 * @param {Boolean} full True will get the full document, otherwise it's the view height
1834 * @return {Number} The height
1836 getViewHeight : function(full) {
1837 return full ? this.getDocumentHeight() : this.getViewportHeight();
1840 getDocumentHeight: function() {
1841 var scrollHeight = (document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight;
1842 return Math.max(scrollHeight, this.getViewportHeight());
1845 getDocumentWidth: function() {
1846 var scrollWidth = (document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth;
1847 return Math.max(scrollWidth, this.getViewportWidth());
1850 getViewportHeight: function() {
1851 var height = self.innerHeight;
1852 var mode = document.compatMode;
1854 if ((mode || Roo.isIE) && !Roo.isOpera) {
1855 height = (mode == "CSS1Compat") ?
1856 document.documentElement.clientHeight :
1857 document.body.clientHeight;
1863 getViewportWidth: function() {
1864 var width = self.innerWidth;
1865 var mode = document.compatMode;
1867 if (mode || Roo.isIE) {
1868 width = (mode == "CSS1Compat") ?
1869 document.documentElement.clientWidth :
1870 document.body.clientWidth;
1875 isAncestor : function(p, c) {
1882 if (p.contains && !Roo.isSafari) {
1883 return p.contains(c);
1884 } else if (p.compareDocumentPosition) {
1885 return !!(p.compareDocumentPosition(c) & 16);
1887 var parent = c.parentNode;
1892 else if (!parent.tagName || parent.tagName.toUpperCase() == "HTML") {
1895 parent = parent.parentNode;
1901 getRegion : function(el) {
1902 return Roo.lib.Region.getRegion(el);
1905 getY : function(el) {
1906 return this.getXY(el)[1];
1909 getX : function(el) {
1910 return this.getXY(el)[0];
1913 getXY : function(el) {
1914 var p, pe, b, scroll, bd = document.body;
1915 el = Roo.getDom(el);
1916 var fly = Roo.lib.AnimBase.fly;
1917 if (el.getBoundingClientRect) {
1918 b = el.getBoundingClientRect();
1919 scroll = fly(document).getScroll();
1920 return [b.left + scroll.left, b.top + scroll.top];
1926 var hasAbsolute = fly(el).getStyle("position") == "absolute";
1933 if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
1940 var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
1941 var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;
1948 if (p != el && pe.getStyle('overflow') != 'visible') {
1956 if (Roo.isSafari && hasAbsolute) {
1961 if (Roo.isGecko && !hasAbsolute) {
1963 x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
1964 y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
1968 while (p && p != bd) {
1969 if (!Roo.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
1981 setXY : function(el, xy) {
1982 el = Roo.fly(el, '_setXY');
1984 var pts = el.translatePoints(xy);
1985 if (xy[0] !== false) {
1986 el.dom.style.left = pts.left + "px";
1988 if (xy[1] !== false) {
1989 el.dom.style.top = pts.top + "px";
1993 setX : function(el, x) {
1994 this.setXY(el, [x, false]);
1997 setY : function(el, y) {
1998 this.setXY(el, [false, y]);
2002 * Portions of this file are based on pieces of Yahoo User Interface Library
2003 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2004 * YUI licensed under the BSD License:
2005 * http://developer.yahoo.net/yui/license.txt
2006 * <script type="text/javascript">
2010 Roo.lib.Event = function() {
2011 var loadComplete = false;
2013 var unloadListeners = [];
2015 var onAvailStack = [];
2017 var lastError = null;
2030 startInterval: function() {
2031 if (!this._interval) {
2033 var callback = function() {
2034 self._tryPreloadAttach();
2036 this._interval = setInterval(callback, this.POLL_INTERVAL);
2041 onAvailable: function(p_id, p_fn, p_obj, p_override) {
2042 onAvailStack.push({ id: p_id,
2045 override: p_override,
2046 checkReady: false });
2048 retryCount = this.POLL_RETRYS;
2049 this.startInterval();
2053 addListener: function(el, eventName, fn) {
2054 el = Roo.getDom(el);
2059 if ("unload" == eventName) {
2060 unloadListeners[unloadListeners.length] =
2061 [el, eventName, fn];
2065 var wrappedFn = function(e) {
2066 return fn(Roo.lib.Event.getEvent(e));
2069 var li = [el, eventName, fn, wrappedFn];
2071 var index = listeners.length;
2072 listeners[index] = li;
2074 this.doAdd(el, eventName, wrappedFn, false);
2080 removeListener: function(el, eventName, fn) {
2083 el = Roo.getDom(el);
2086 return this.purgeElement(el, false, eventName);
2090 if ("unload" == eventName) {
2092 for (i = 0,len = unloadListeners.length; i < len; i++) {
2093 var li = unloadListeners[i];
2096 li[1] == eventName &&
2098 unloadListeners.splice(i, 1);
2106 var cacheItem = null;
2109 var index = arguments[3];
2111 if ("undefined" == typeof index) {
2112 index = this._getCacheIndex(el, eventName, fn);
2116 cacheItem = listeners[index];
2119 if (!el || !cacheItem) {
2123 this.doRemove(el, eventName, cacheItem[this.WFN], false);
2125 delete listeners[index][this.WFN];
2126 delete listeners[index][this.FN];
2127 listeners.splice(index, 1);
2134 getTarget: function(ev, resolveTextNode) {
2135 ev = ev.browserEvent || ev;
2136 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2137 var t = ev.target || ev.srcElement;
2138 return this.resolveTextNode(t);
2142 resolveTextNode: function(node) {
2143 if (Roo.isSafari && node && 3 == node.nodeType) {
2144 return node.parentNode;
2151 getPageX: function(ev) {
2152 ev = ev.browserEvent || ev;
2153 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2155 if (!x && 0 !== x) {
2156 x = ev.clientX || 0;
2159 x += this.getScroll()[1];
2167 getPageY: function(ev) {
2168 ev = ev.browserEvent || ev;
2169 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2171 if (!y && 0 !== y) {
2172 y = ev.clientY || 0;
2175 y += this.getScroll()[0];
2184 getXY: function(ev) {
2185 ev = ev.browserEvent || ev;
2186 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2187 return [this.getPageX(ev), this.getPageY(ev)];
2191 getRelatedTarget: function(ev) {
2192 ev = ev.browserEvent || ev;
2193 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2194 var t = ev.relatedTarget;
2196 if (ev.type == "mouseout") {
2198 } else if (ev.type == "mouseover") {
2203 return this.resolveTextNode(t);
2207 getTime: function(ev) {
2208 ev = ev.browserEvent || ev;
2209 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2211 var t = new Date().getTime();
2215 this.lastError = ex;
2224 stopEvent: function(ev) {
2225 this.stopPropagation(ev);
2226 this.preventDefault(ev);
2230 stopPropagation: function(ev) {
2231 ev = ev.browserEvent || ev;
2232 if (ev.stopPropagation) {
2233 ev.stopPropagation();
2235 ev.cancelBubble = true;
2240 preventDefault: function(ev) {
2241 ev = ev.browserEvent || ev;
2242 if(ev.preventDefault) {
2243 ev.preventDefault();
2245 ev.returnValue = false;
2250 getEvent: function(e) {
2251 var ev = e || window.event;
2253 var c = this.getEvent.caller;
2255 ev = c.arguments[0];
2256 if (ev && Event == ev.constructor) {
2266 getCharCode: function(ev) {
2267 ev = ev.browserEvent || ev;
2268 return ev.charCode || ev.keyCode || 0;
2272 _getCacheIndex: function(el, eventName, fn) {
2273 for (var i = 0,len = listeners.length; i < len; ++i) {
2274 var li = listeners[i];
2276 li[this.FN] == fn &&
2277 li[this.EL] == el &&
2278 li[this.TYPE] == eventName) {
2290 getEl: function(id) {
2291 return document.getElementById(id);
2295 clearCache: function() {
2299 _load: function(e) {
2300 loadComplete = true;
2301 var EU = Roo.lib.Event;
2305 EU.doRemove(window, "load", EU._load);
2310 _tryPreloadAttach: function() {
2319 var tryAgain = !loadComplete;
2321 tryAgain = (retryCount > 0);
2326 for (var i = 0,len = onAvailStack.length; i < len; ++i) {
2327 var item = onAvailStack[i];
2329 var el = this.getEl(item.id);
2332 if (!item.checkReady ||
2335 (document && document.body)) {
2338 if (item.override) {
2339 if (item.override === true) {
2342 scope = item.override;
2345 item.fn.call(scope, item.obj);
2346 onAvailStack[i] = null;
2349 notAvail.push(item);
2354 retryCount = (notAvail.length === 0) ? 0 : retryCount - 1;
2358 this.startInterval();
2360 clearInterval(this._interval);
2361 this._interval = null;
2364 this.locked = false;
2371 purgeElement: function(el, recurse, eventName) {
2372 var elListeners = this.getListeners(el, eventName);
2374 for (var i = 0,len = elListeners.length; i < len; ++i) {
2375 var l = elListeners[i];
2376 this.removeListener(el, l.type, l.fn);
2380 if (recurse && el && el.childNodes) {
2381 for (i = 0,len = el.childNodes.length; i < len; ++i) {
2382 this.purgeElement(el.childNodes[i], recurse, eventName);
2388 getListeners: function(el, eventName) {
2389 var results = [], searchLists;
2391 searchLists = [listeners, unloadListeners];
2392 } else if (eventName == "unload") {
2393 searchLists = [unloadListeners];
2395 searchLists = [listeners];
2398 for (var j = 0; j < searchLists.length; ++j) {
2399 var searchList = searchLists[j];
2400 if (searchList && searchList.length > 0) {
2401 for (var i = 0,len = searchList.length; i < len; ++i) {
2402 var l = searchList[i];
2403 if (l && l[this.EL] === el &&
2404 (!eventName || eventName === l[this.TYPE])) {
2409 adjust: l[this.ADJ_SCOPE],
2417 return (results.length) ? results : null;
2421 _unload: function(e) {
2423 var EU = Roo.lib.Event, i, j, l, len, index;
2425 for (i = 0,len = unloadListeners.length; i < len; ++i) {
2426 l = unloadListeners[i];
2429 if (l[EU.ADJ_SCOPE]) {
2430 if (l[EU.ADJ_SCOPE] === true) {
2433 scope = l[EU.ADJ_SCOPE];
2436 l[EU.FN].call(scope, EU.getEvent(e), l[EU.OBJ]);
2437 unloadListeners[i] = null;
2443 unloadListeners = null;
2445 if (listeners && listeners.length > 0) {
2446 j = listeners.length;
2449 l = listeners[index];
2451 EU.removeListener(l[EU.EL], l[EU.TYPE],
2461 EU.doRemove(window, "unload", EU._unload);
2466 getScroll: function() {
2467 var dd = document.documentElement, db = document.body;
2468 if (dd && (dd.scrollTop || dd.scrollLeft)) {
2469 return [dd.scrollTop, dd.scrollLeft];
2471 return [db.scrollTop, db.scrollLeft];
2478 doAdd: function () {
2479 if (window.addEventListener) {
2480 return function(el, eventName, fn, capture) {
2481 el.addEventListener(eventName, fn, (capture));
2483 } else if (window.attachEvent) {
2484 return function(el, eventName, fn, capture) {
2485 el.attachEvent("on" + eventName, fn);
2494 doRemove: function() {
2495 if (window.removeEventListener) {
2496 return function (el, eventName, fn, capture) {
2497 el.removeEventListener(eventName, fn, (capture));
2499 } else if (window.detachEvent) {
2500 return function (el, eventName, fn) {
2501 el.detachEvent("on" + eventName, fn);
2513 var E = Roo.lib.Event;
2514 E.on = E.addListener;
2515 E.un = E.removeListener;
2517 if (document && document.body) {
2520 E.doAdd(window, "load", E._load);
2522 E.doAdd(window, "unload", E._unload);
2523 E._tryPreloadAttach();
2527 * Portions of this file are based on pieces of Yahoo User Interface Library
2528 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2529 * YUI licensed under the BSD License:
2530 * http://developer.yahoo.net/yui/license.txt
2531 * <script type="text/javascript">
2537 * @class Roo.lib.Ajax
2544 request : function(method, uri, cb, data, options) {
2546 var hs = options.headers;
2549 if(hs.hasOwnProperty(h)){
2550 this.initHeader(h, hs[h], false);
2554 if(options.xmlData){
2555 this.initHeader('Content-Type', 'text/xml', false);
2557 data = options.xmlData;
2561 return this.asyncRequest(method, uri, cb, data);
2564 serializeForm : function(form) {
2565 if(typeof form == 'string') {
2566 form = (document.getElementById(form) || document.forms[form]);
2569 var el, name, val, disabled, data = '', hasSubmit = false;
2570 for (var i = 0; i < form.elements.length; i++) {
2571 el = form.elements[i];
2572 disabled = form.elements[i].disabled;
2573 name = form.elements[i].name;
2574 val = form.elements[i].value;
2576 if (!disabled && name){
2580 case 'select-multiple':
2581 for (var j = 0; j < el.options.length; j++) {
2582 if (el.options[j].selected) {
2584 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].attributes['value'].specified ? el.options[j].value : el.options[j].text) + '&';
2587 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].hasAttribute('value') ? el.options[j].value : el.options[j].text) + '&';
2595 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2608 if(hasSubmit == false) {
2609 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2614 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2619 data = data.substr(0, data.length - 1);
2627 useDefaultHeader:true,
2629 defaultPostHeader:'application/x-www-form-urlencoded',
2631 useDefaultXhrHeader:true,
2633 defaultXhrHeader:'XMLHttpRequest',
2635 hasDefaultHeaders:true,
2647 setProgId:function(id)
2649 this.activeX.unshift(id);
2652 setDefaultPostHeader:function(b)
2654 this.useDefaultHeader = b;
2657 setDefaultXhrHeader:function(b)
2659 this.useDefaultXhrHeader = b;
2662 setPollingInterval:function(i)
2664 if (typeof i == 'number' && isFinite(i)) {
2665 this.pollInterval = i;
2669 createXhrObject:function(transactionId)
2675 http = new XMLHttpRequest();
2677 obj = { conn:http, tId:transactionId };
2681 for (var i = 0; i < this.activeX.length; ++i) {
2685 http = new ActiveXObject(this.activeX[i]);
2687 obj = { conn:http, tId:transactionId };
2700 getConnectionObject:function()
2703 var tId = this.transactionId;
2707 o = this.createXhrObject(tId);
2709 this.transactionId++;
2720 asyncRequest:function(method, uri, callback, postData)
2722 var o = this.getConnectionObject();
2728 o.conn.open(method, uri, true);
2730 if (this.useDefaultXhrHeader) {
2731 if (!this.defaultHeaders['X-Requested-With']) {
2732 this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
2736 if(postData && this.useDefaultHeader){
2737 this.initHeader('Content-Type', this.defaultPostHeader);
2740 if (this.hasDefaultHeaders || this.hasHeaders) {
2744 this.handleReadyState(o, callback);
2745 o.conn.send(postData || null);
2751 handleReadyState:function(o, callback)
2755 if (callback && callback.timeout) {
2757 this.timeout[o.tId] = window.setTimeout(function() {
2758 oConn.abort(o, callback, true);
2759 }, callback.timeout);
2762 this.poll[o.tId] = window.setInterval(
2764 if (o.conn && o.conn.readyState == 4) {
2765 window.clearInterval(oConn.poll[o.tId]);
2766 delete oConn.poll[o.tId];
2768 if(callback && callback.timeout) {
2769 window.clearTimeout(oConn.timeout[o.tId]);
2770 delete oConn.timeout[o.tId];
2773 oConn.handleTransactionResponse(o, callback);
2776 , this.pollInterval);
2779 handleTransactionResponse:function(o, callback, isAbort)
2783 this.releaseObject(o);
2787 var httpStatus, responseObject;
2791 if (o.conn.status !== undefined && o.conn.status != 0) {
2792 httpStatus = o.conn.status;
2804 if (httpStatus >= 200 && httpStatus < 300) {
2805 responseObject = this.createResponseObject(o, callback.argument);
2806 if (callback.success) {
2807 if (!callback.scope) {
2808 callback.success(responseObject);
2813 callback.success.apply(callback.scope, [responseObject]);
2818 switch (httpStatus) {
2826 responseObject = this.createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false));
2827 if (callback.failure) {
2828 if (!callback.scope) {
2829 callback.failure(responseObject);
2832 callback.failure.apply(callback.scope, [responseObject]);
2837 responseObject = this.createResponseObject(o, callback.argument);
2838 if (callback.failure) {
2839 if (!callback.scope) {
2840 callback.failure(responseObject);
2843 callback.failure.apply(callback.scope, [responseObject]);
2849 this.releaseObject(o);
2850 responseObject = null;
2853 createResponseObject:function(o, callbackArg)
2860 var headerStr = o.conn.getAllResponseHeaders();
2861 var header = headerStr.split('\n');
2862 for (var i = 0; i < header.length; i++) {
2863 var delimitPos = header[i].indexOf(':');
2864 if (delimitPos != -1) {
2865 headerObj[header[i].substring(0, delimitPos)] = header[i].substring(delimitPos + 2);
2873 obj.status = o.conn.status;
2874 obj.statusText = o.conn.statusText;
2875 obj.getResponseHeader = headerObj;
2876 obj.getAllResponseHeaders = headerStr;
2877 obj.responseText = o.conn.responseText;
2878 obj.responseXML = o.conn.responseXML;
2880 if (typeof callbackArg !== undefined) {
2881 obj.argument = callbackArg;
2887 createExceptionObject:function(tId, callbackArg, isAbort)
2890 var COMM_ERROR = 'communication failure';
2891 var ABORT_CODE = -1;
2892 var ABORT_ERROR = 'transaction aborted';
2898 obj.status = ABORT_CODE;
2899 obj.statusText = ABORT_ERROR;
2902 obj.status = COMM_CODE;
2903 obj.statusText = COMM_ERROR;
2907 obj.argument = callbackArg;
2913 initHeader:function(label, value, isDefault)
2915 var headerObj = (isDefault) ? this.defaultHeaders : this.headers;
2917 if (headerObj[label] === undefined) {
2918 headerObj[label] = value;
2923 headerObj[label] = value + "," + headerObj[label];
2927 this.hasDefaultHeaders = true;
2930 this.hasHeaders = true;
2935 setHeader:function(o)
2937 if (this.hasDefaultHeaders) {
2938 for (var prop in this.defaultHeaders) {
2939 if (this.defaultHeaders.hasOwnProperty(prop)) {
2940 o.conn.setRequestHeader(prop, this.defaultHeaders[prop]);
2945 if (this.hasHeaders) {
2946 for (var prop in this.headers) {
2947 if (this.headers.hasOwnProperty(prop)) {
2948 o.conn.setRequestHeader(prop, this.headers[prop]);
2952 this.hasHeaders = false;
2956 resetDefaultHeaders:function() {
2957 delete this.defaultHeaders;
2958 this.defaultHeaders = {};
2959 this.hasDefaultHeaders = false;
2962 abort:function(o, callback, isTimeout)
2964 if(this.isCallInProgress(o)) {
2966 window.clearInterval(this.poll[o.tId]);
2967 delete this.poll[o.tId];
2969 delete this.timeout[o.tId];
2972 this.handleTransactionResponse(o, callback, true);
2982 isCallInProgress:function(o)
2985 return o.conn.readyState != 4 && o.conn.readyState != 0;
2994 releaseObject:function(o)
3003 'MSXML2.XMLHTTP.3.0',
3011 * Portions of this file are based on pieces of Yahoo User Interface Library
3012 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3013 * YUI licensed under the BSD License:
3014 * http://developer.yahoo.net/yui/license.txt
3015 * <script type="text/javascript">
3019 Roo.lib.Region = function(t, r, b, l) {
3029 Roo.lib.Region.prototype = {
3030 contains : function(region) {
3031 return ( region.left >= this.left &&
3032 region.right <= this.right &&
3033 region.top >= this.top &&
3034 region.bottom <= this.bottom );
3038 getArea : function() {
3039 return ( (this.bottom - this.top) * (this.right - this.left) );
3042 intersect : function(region) {
3043 var t = Math.max(this.top, region.top);
3044 var r = Math.min(this.right, region.right);
3045 var b = Math.min(this.bottom, region.bottom);
3046 var l = Math.max(this.left, region.left);
3048 if (b >= t && r >= l) {
3049 return new Roo.lib.Region(t, r, b, l);
3054 union : function(region) {
3055 var t = Math.min(this.top, region.top);
3056 var r = Math.max(this.right, region.right);
3057 var b = Math.max(this.bottom, region.bottom);
3058 var l = Math.min(this.left, region.left);
3060 return new Roo.lib.Region(t, r, b, l);
3063 adjust : function(t, l, b, r) {
3072 Roo.lib.Region.getRegion = function(el) {
3073 var p = Roo.lib.Dom.getXY(el);
3076 var r = p[0] + el.offsetWidth;
3077 var b = p[1] + el.offsetHeight;
3080 return new Roo.lib.Region(t, r, b, l);
3083 * Portions of this file are based on pieces of Yahoo User Interface Library
3084 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3085 * YUI licensed under the BSD License:
3086 * http://developer.yahoo.net/yui/license.txt
3087 * <script type="text/javascript">
3090 //@@dep Roo.lib.Region
3093 Roo.lib.Point = function(x, y) {
3094 if (x instanceof Array) {
3098 this.x = this.right = this.left = this[0] = x;
3099 this.y = this.top = this.bottom = this[1] = y;
3102 Roo.lib.Point.prototype = new Roo.lib.Region();
3104 * Portions of this file are based on pieces of Yahoo User Interface Library
3105 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3106 * YUI licensed under the BSD License:
3107 * http://developer.yahoo.net/yui/license.txt
3108 * <script type="text/javascript">
3115 scroll : function(el, args, duration, easing, cb, scope) {
3116 this.run(el, args, duration, easing, cb, scope, Roo.lib.Scroll);
3119 motion : function(el, args, duration, easing, cb, scope) {
3120 this.run(el, args, duration, easing, cb, scope, Roo.lib.Motion);
3123 color : function(el, args, duration, easing, cb, scope) {
3124 this.run(el, args, duration, easing, cb, scope, Roo.lib.ColorAnim);
3127 run : function(el, args, duration, easing, cb, scope, type) {
3128 type = type || Roo.lib.AnimBase;
3129 if (typeof easing == "string") {
3130 easing = Roo.lib.Easing[easing];
3132 var anim = new type(el, args, duration, easing);
3133 anim.animateX(function() {
3134 Roo.callback(cb, scope);
3140 * Portions of this file are based on pieces of Yahoo User Interface Library
3141 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3142 * YUI licensed under the BSD License:
3143 * http://developer.yahoo.net/yui/license.txt
3144 * <script type="text/javascript">
3152 if (!libFlyweight) {
3153 libFlyweight = new Roo.Element.Flyweight();
3155 libFlyweight.dom = el;
3156 return libFlyweight;
3159 // since this uses fly! - it cant be in DOM (which does not have fly yet..)
3163 Roo.lib.AnimBase = function(el, attributes, duration, method) {
3165 this.init(el, attributes, duration, method);
3169 Roo.lib.AnimBase.fly = fly;
3173 Roo.lib.AnimBase.prototype = {
3175 toString: function() {
3176 var el = this.getEl();
3177 var id = el.id || el.tagName;
3178 return ("Anim " + id);
3182 noNegatives: /width|height|opacity|padding/i,
3183 offsetAttribute: /^((width|height)|(top|left))$/,
3184 defaultUnit: /width|height|top$|bottom$|left$|right$/i,
3185 offsetUnit: /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i
3189 doMethod: function(attr, start, end) {
3190 return this.method(this.currentFrame, start, end - start, this.totalFrames);
3194 setAttribute: function(attr, val, unit) {
3195 if (this.patterns.noNegatives.test(attr)) {
3196 val = (val > 0) ? val : 0;
3199 Roo.fly(this.getEl(), '_anim').setStyle(attr, val + unit);
3203 getAttribute: function(attr) {
3204 var el = this.getEl();
3205 var val = fly(el).getStyle(attr);
3207 if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
3208 return parseFloat(val);
3211 var a = this.patterns.offsetAttribute.exec(attr) || [];
3212 var pos = !!( a[3] );
3213 var box = !!( a[2] );
3216 if (box || (fly(el).getStyle('position') == 'absolute' && pos)) {
3217 val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
3226 getDefaultUnit: function(attr) {
3227 if (this.patterns.defaultUnit.test(attr)) {
3234 animateX : function(callback, scope) {
3235 var f = function() {
3236 this.onComplete.removeListener(f);
3237 if (typeof callback == "function") {
3238 callback.call(scope || this, this);
3241 this.onComplete.addListener(f, this);
3246 setRuntimeAttribute: function(attr) {
3249 var attributes = this.attributes;
3251 this.runtimeAttributes[attr] = {};
3253 var isset = function(prop) {
3254 return (typeof prop !== 'undefined');
3257 if (!isset(attributes[attr]['to']) && !isset(attributes[attr]['by'])) {
3261 start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
3264 if (isset(attributes[attr]['to'])) {
3265 end = attributes[attr]['to'];
3266 } else if (isset(attributes[attr]['by'])) {
3267 if (start.constructor == Array) {
3269 for (var i = 0, len = start.length; i < len; ++i) {
3270 end[i] = start[i] + attributes[attr]['by'][i];
3273 end = start + attributes[attr]['by'];
3277 this.runtimeAttributes[attr].start = start;
3278 this.runtimeAttributes[attr].end = end;
3281 this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ? attributes[attr]['unit'] : this.getDefaultUnit(attr);
3285 init: function(el, attributes, duration, method) {
3287 var isAnimated = false;
3290 var startTime = null;
3293 var actualFrames = 0;
3296 el = Roo.getDom(el);
3299 this.attributes = attributes || {};
3302 this.duration = duration || 1;
3305 this.method = method || Roo.lib.Easing.easeNone;
3308 this.useSeconds = true;
3311 this.currentFrame = 0;
3314 this.totalFrames = Roo.lib.AnimMgr.fps;
3317 this.getEl = function() {
3322 this.isAnimated = function() {
3327 this.getStartTime = function() {
3331 this.runtimeAttributes = {};
3334 this.animate = function() {
3335 if (this.isAnimated()) {
3339 this.currentFrame = 0;
3341 this.totalFrames = ( this.useSeconds ) ? Math.ceil(Roo.lib.AnimMgr.fps * this.duration) : this.duration;
3343 Roo.lib.AnimMgr.registerElement(this);
3347 this.stop = function(finish) {
3349 this.currentFrame = this.totalFrames;
3350 this._onTween.fire();
3352 Roo.lib.AnimMgr.stop(this);
3355 var onStart = function() {
3356 this.onStart.fire();
3358 this.runtimeAttributes = {};
3359 for (var attr in this.attributes) {
3360 this.setRuntimeAttribute(attr);
3365 startTime = new Date();
3369 var onTween = function() {
3371 duration: new Date() - this.getStartTime(),
3372 currentFrame: this.currentFrame
3375 data.toString = function() {
3377 'duration: ' + data.duration +
3378 ', currentFrame: ' + data.currentFrame
3382 this.onTween.fire(data);
3384 var runtimeAttributes = this.runtimeAttributes;
3386 for (var attr in runtimeAttributes) {
3387 this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit);
3393 var onComplete = function() {
3394 var actual_duration = (new Date() - startTime) / 1000 ;
3397 duration: actual_duration,
3398 frames: actualFrames,
3399 fps: actualFrames / actual_duration
3402 data.toString = function() {
3404 'duration: ' + data.duration +
3405 ', frames: ' + data.frames +
3406 ', fps: ' + data.fps
3412 this.onComplete.fire(data);
3416 this._onStart = new Roo.util.Event(this);
3417 this.onStart = new Roo.util.Event(this);
3418 this.onTween = new Roo.util.Event(this);
3419 this._onTween = new Roo.util.Event(this);
3420 this.onComplete = new Roo.util.Event(this);
3421 this._onComplete = new Roo.util.Event(this);
3422 this._onStart.addListener(onStart);
3423 this._onTween.addListener(onTween);
3424 this._onComplete.addListener(onComplete);
3429 * Portions of this file are based on pieces of Yahoo User Interface Library
3430 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3431 * YUI licensed under the BSD License:
3432 * http://developer.yahoo.net/yui/license.txt
3433 * <script type="text/javascript">
3437 Roo.lib.AnimMgr = new function() {
3454 this.registerElement = function(tween) {
3455 queue[queue.length] = tween;
3457 tween._onStart.fire();
3462 this.unRegister = function(tween, index) {
3463 tween._onComplete.fire();
3464 index = index || getIndex(tween);
3466 queue.splice(index, 1);
3470 if (tweenCount <= 0) {
3476 this.start = function() {
3477 if (thread === null) {
3478 thread = setInterval(this.run, this.delay);
3483 this.stop = function(tween) {
3485 clearInterval(thread);
3487 for (var i = 0, len = queue.length; i < len; ++i) {
3488 if (queue[0].isAnimated()) {
3489 this.unRegister(queue[0], 0);
3498 this.unRegister(tween);
3503 this.run = function() {
3504 for (var i = 0, len = queue.length; i < len; ++i) {
3505 var tween = queue[i];
3506 if (!tween || !tween.isAnimated()) {
3510 if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
3512 tween.currentFrame += 1;
3514 if (tween.useSeconds) {
3515 correctFrame(tween);
3517 tween._onTween.fire();
3520 Roo.lib.AnimMgr.stop(tween, i);
3525 var getIndex = function(anim) {
3526 for (var i = 0, len = queue.length; i < len; ++i) {
3527 if (queue[i] == anim) {
3535 var correctFrame = function(tween) {
3536 var frames = tween.totalFrames;
3537 var frame = tween.currentFrame;
3538 var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
3539 var elapsed = (new Date() - tween.getStartTime());
3542 if (elapsed < tween.duration * 1000) {
3543 tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
3545 tweak = frames - (frame + 1);
3547 if (tweak > 0 && isFinite(tweak)) {
3548 if (tween.currentFrame + tweak >= frames) {
3549 tweak = frames - (frame + 1);
3552 tween.currentFrame += tweak;
3558 * Portions of this file are based on pieces of Yahoo User Interface Library
3559 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3560 * YUI licensed under the BSD License:
3561 * http://developer.yahoo.net/yui/license.txt
3562 * <script type="text/javascript">
3565 Roo.lib.Bezier = new function() {
3567 this.getPosition = function(points, t) {
3568 var n = points.length;
3571 for (var i = 0; i < n; ++i) {
3572 tmp[i] = [points[i][0], points[i][1]];
3575 for (var j = 1; j < n; ++j) {
3576 for (i = 0; i < n - j; ++i) {
3577 tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
3578 tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
3582 return [ tmp[0][0], tmp[0][1] ];
3586 * Portions of this file are based on pieces of Yahoo User Interface Library
3587 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3588 * YUI licensed under the BSD License:
3589 * http://developer.yahoo.net/yui/license.txt
3590 * <script type="text/javascript">
3595 Roo.lib.ColorAnim = function(el, attributes, duration, method) {
3596 Roo.lib.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
3599 Roo.extend(Roo.lib.ColorAnim, Roo.lib.AnimBase);
3601 var fly = Roo.lib.AnimBase.fly;
3603 var superclass = Y.ColorAnim.superclass;
3604 var proto = Y.ColorAnim.prototype;
3606 proto.toString = function() {
3607 var el = this.getEl();
3608 var id = el.id || el.tagName;
3609 return ("ColorAnim " + id);
3612 proto.patterns.color = /color$/i;
3613 proto.patterns.rgb = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
3614 proto.patterns.hex = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
3615 proto.patterns.hex3 = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
3616 proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/;
3619 proto.parseColor = function(s) {
3620 if (s.length == 3) {
3624 var c = this.patterns.hex.exec(s);
3625 if (c && c.length == 4) {
3626 return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
3629 c = this.patterns.rgb.exec(s);
3630 if (c && c.length == 4) {
3631 return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
3634 c = this.patterns.hex3.exec(s);
3635 if (c && c.length == 4) {
3636 return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
3641 // since this uses fly! - it cant be in ColorAnim (which does not have fly yet..)
3642 proto.getAttribute = function(attr) {
3643 var el = this.getEl();
3644 if (this.patterns.color.test(attr)) {
3645 var val = fly(el).getStyle(attr);
3647 if (this.patterns.transparent.test(val)) {
3648 var parent = el.parentNode;
3649 val = fly(parent).getStyle(attr);
3651 while (parent && this.patterns.transparent.test(val)) {
3652 parent = parent.parentNode;
3653 val = fly(parent).getStyle(attr);
3654 if (parent.tagName.toUpperCase() == 'HTML') {
3660 val = superclass.getAttribute.call(this, attr);
3665 proto.getAttribute = function(attr) {
3666 var el = this.getEl();
3667 if (this.patterns.color.test(attr)) {
3668 var val = fly(el).getStyle(attr);
3670 if (this.patterns.transparent.test(val)) {
3671 var parent = el.parentNode;
3672 val = fly(parent).getStyle(attr);
3674 while (parent && this.patterns.transparent.test(val)) {
3675 parent = parent.parentNode;
3676 val = fly(parent).getStyle(attr);
3677 if (parent.tagName.toUpperCase() == 'HTML') {
3683 val = superclass.getAttribute.call(this, attr);
3689 proto.doMethod = function(attr, start, end) {
3692 if (this.patterns.color.test(attr)) {
3694 for (var i = 0, len = start.length; i < len; ++i) {
3695 val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
3698 val = 'rgb(' + Math.floor(val[0]) + ',' + Math.floor(val[1]) + ',' + Math.floor(val[2]) + ')';
3701 val = superclass.doMethod.call(this, attr, start, end);
3707 proto.setRuntimeAttribute = function(attr) {
3708 superclass.setRuntimeAttribute.call(this, attr);
3710 if (this.patterns.color.test(attr)) {
3711 var attributes = this.attributes;
3712 var start = this.parseColor(this.runtimeAttributes[attr].start);
3713 var end = this.parseColor(this.runtimeAttributes[attr].end);
3715 if (typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined') {
3716 end = this.parseColor(attributes[attr].by);
3718 for (var i = 0, len = start.length; i < len; ++i) {
3719 end[i] = start[i] + end[i];
3723 this.runtimeAttributes[attr].start = start;
3724 this.runtimeAttributes[attr].end = end;
3730 * Portions of this file are based on pieces of Yahoo User Interface Library
3731 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3732 * YUI licensed under the BSD License:
3733 * http://developer.yahoo.net/yui/license.txt
3734 * <script type="text/javascript">
3740 easeNone: function (t, b, c, d) {
3741 return c * t / d + b;
3745 easeIn: function (t, b, c, d) {
3746 return c * (t /= d) * t + b;
3750 easeOut: function (t, b, c, d) {
3751 return -c * (t /= d) * (t - 2) + b;
3755 easeBoth: function (t, b, c, d) {
3756 if ((t /= d / 2) < 1) {
3757 return c / 2 * t * t + b;
3760 return -c / 2 * ((--t) * (t - 2) - 1) + b;
3764 easeInStrong: function (t, b, c, d) {
3765 return c * (t /= d) * t * t * t + b;
3769 easeOutStrong: function (t, b, c, d) {
3770 return -c * ((t = t / d - 1) * t * t * t - 1) + b;
3774 easeBothStrong: function (t, b, c, d) {
3775 if ((t /= d / 2) < 1) {
3776 return c / 2 * t * t * t * t + b;
3779 return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
3784 elasticIn: function (t, b, c, d, a, p) {
3788 if ((t /= d) == 1) {
3795 if (!a || a < Math.abs(c)) {
3800 var s = p / (2 * Math.PI) * Math.asin(c / a);
3803 return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
3807 elasticOut: function (t, b, c, d, a, p) {
3811 if ((t /= d) == 1) {
3818 if (!a || a < Math.abs(c)) {
3823 var s = p / (2 * Math.PI) * Math.asin(c / a);
3826 return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
3830 elasticBoth: function (t, b, c, d, a, p) {
3835 if ((t /= d / 2) == 2) {
3843 if (!a || a < Math.abs(c)) {
3848 var s = p / (2 * Math.PI) * Math.asin(c / a);
3852 return -.5 * (a * Math.pow(2, 10 * (t -= 1)) *
3853 Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
3855 return a * Math.pow(2, -10 * (t -= 1)) *
3856 Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
3861 backIn: function (t, b, c, d, s) {
3862 if (typeof s == 'undefined') {
3865 return c * (t /= d) * t * ((s + 1) * t - s) + b;
3869 backOut: function (t, b, c, d, s) {
3870 if (typeof s == 'undefined') {
3873 return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
3877 backBoth: function (t, b, c, d, s) {
3878 if (typeof s == 'undefined') {
3882 if ((t /= d / 2 ) < 1) {
3883 return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
3885 return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
3889 bounceIn: function (t, b, c, d) {
3890 return c - Roo.lib.Easing.bounceOut(d - t, 0, c, d) + b;
3894 bounceOut: function (t, b, c, d) {
3895 if ((t /= d) < (1 / 2.75)) {
3896 return c * (7.5625 * t * t) + b;
3897 } else if (t < (2 / 2.75)) {
3898 return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
3899 } else if (t < (2.5 / 2.75)) {
3900 return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
3902 return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
3906 bounceBoth: function (t, b, c, d) {
3908 return Roo.lib.Easing.bounceIn(t * 2, 0, c, d) * .5 + b;
3910 return Roo.lib.Easing.bounceOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
3913 * Portions of this file are based on pieces of Yahoo User Interface Library
3914 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3915 * YUI licensed under the BSD License:
3916 * http://developer.yahoo.net/yui/license.txt
3917 * <script type="text/javascript">
3921 Roo.lib.Motion = function(el, attributes, duration, method) {
3923 Roo.lib.Motion.superclass.constructor.call(this, el, attributes, duration, method);
3927 Roo.extend(Roo.lib.Motion, Roo.lib.ColorAnim);
3931 var superclass = Y.Motion.superclass;
3932 var proto = Y.Motion.prototype;
3934 proto.toString = function() {
3935 var el = this.getEl();
3936 var id = el.id || el.tagName;
3937 return ("Motion " + id);
3940 proto.patterns.points = /^points$/i;
3942 proto.setAttribute = function(attr, val, unit) {
3943 if (this.patterns.points.test(attr)) {
3944 unit = unit || 'px';
3945 superclass.setAttribute.call(this, 'left', val[0], unit);
3946 superclass.setAttribute.call(this, 'top', val[1], unit);
3948 superclass.setAttribute.call(this, attr, val, unit);
3952 proto.getAttribute = function(attr) {
3953 if (this.patterns.points.test(attr)) {
3955 superclass.getAttribute.call(this, 'left'),
3956 superclass.getAttribute.call(this, 'top')
3959 val = superclass.getAttribute.call(this, attr);
3965 proto.doMethod = function(attr, start, end) {
3968 if (this.patterns.points.test(attr)) {
3969 var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;
3970 val = Y.Bezier.getPosition(this.runtimeAttributes[attr], t);
3972 val = superclass.doMethod.call(this, attr, start, end);
3977 proto.setRuntimeAttribute = function(attr) {
3978 if (this.patterns.points.test(attr)) {
3979 var el = this.getEl();
3980 var attributes = this.attributes;
3982 var control = attributes['points']['control'] || [];
3986 if (control.length > 0 && !(control[0] instanceof Array)) {
3987 control = [control];
3990 for (i = 0,len = control.length; i < len; ++i) {
3991 tmp[i] = control[i];
3996 Roo.fly(el).position();
3998 if (isset(attributes['points']['from'])) {
3999 Roo.lib.Dom.setXY(el, attributes['points']['from']);
4002 Roo.lib.Dom.setXY(el, Roo.lib.Dom.getXY(el));
4005 start = this.getAttribute('points');
4008 if (isset(attributes['points']['to'])) {
4009 end = translateValues.call(this, attributes['points']['to'], start);
4011 var pageXY = Roo.lib.Dom.getXY(this.getEl());
4012 for (i = 0,len = control.length; i < len; ++i) {
4013 control[i] = translateValues.call(this, control[i], start);
4017 } else if (isset(attributes['points']['by'])) {
4018 end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1] ];
4020 for (i = 0,len = control.length; i < len; ++i) {
4021 control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
4025 this.runtimeAttributes[attr] = [start];
4027 if (control.length > 0) {
4028 this.runtimeAttributes[attr] = this.runtimeAttributes[attr].concat(control);
4031 this.runtimeAttributes[attr][this.runtimeAttributes[attr].length] = end;
4034 superclass.setRuntimeAttribute.call(this, attr);
4038 var translateValues = function(val, start) {
4039 var pageXY = Roo.lib.Dom.getXY(this.getEl());
4040 val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
4045 var isset = function(prop) {
4046 return (typeof prop !== 'undefined');
4050 * Portions of this file are based on pieces of Yahoo User Interface Library
4051 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4052 * YUI licensed under the BSD License:
4053 * http://developer.yahoo.net/yui/license.txt
4054 * <script type="text/javascript">
4058 Roo.lib.Scroll = function(el, attributes, duration, method) {
4060 Roo.lib.Scroll.superclass.constructor.call(this, el, attributes, duration, method);
4064 Roo.extend(Roo.lib.Scroll, Roo.lib.ColorAnim);
4068 var superclass = Y.Scroll.superclass;
4069 var proto = Y.Scroll.prototype;
4071 proto.toString = function() {
4072 var el = this.getEl();
4073 var id = el.id || el.tagName;
4074 return ("Scroll " + id);
4077 proto.doMethod = function(attr, start, end) {
4080 if (attr == 'scroll') {
4082 this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
4083 this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
4087 val = superclass.doMethod.call(this, attr, start, end);
4092 proto.getAttribute = function(attr) {
4094 var el = this.getEl();
4096 if (attr == 'scroll') {
4097 val = [ el.scrollLeft, el.scrollTop ];
4099 val = superclass.getAttribute.call(this, attr);
4105 proto.setAttribute = function(attr, val, unit) {
4106 var el = this.getEl();
4108 if (attr == 'scroll') {
4109 el.scrollLeft = val[0];
4110 el.scrollTop = val[1];
4112 superclass.setAttribute.call(this, attr, val, unit);
4118 * Ext JS Library 1.1.1
4119 * Copyright(c) 2006-2007, Ext JS, LLC.
4121 * Originally Released Under LGPL - original licence link has changed is not relivant.
4124 * <script type="text/javascript">
4128 // nasty IE9 hack - what a pile of crap that is..
4130 if (typeof Range != "undefined" && typeof Range.prototype.createContextualFragment == "undefined") {
4131 Range.prototype.createContextualFragment = function (html) {
4132 var doc = window.document;
4133 var container = doc.createElement("div");
4134 container.innerHTML = html;
4135 var frag = doc.createDocumentFragment(), n;
4136 while ((n = container.firstChild)) {
4137 frag.appendChild(n);
4144 * @class Roo.DomHelper
4145 * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
4146 * For more information see <a href="http://web.archive.org/web/20071221063734/http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">this blog post with examples</a>.
4149 Roo.DomHelper = function(){
4150 var tempTableEl = null;
4151 var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
4152 var tableRe = /^table|tbody|tr|td$/i;
4154 // build as innerHTML where available
4156 var createHtml = function(o){
4157 if(typeof o == 'string'){
4166 if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") { continue; }
4167 if(attr == "style"){
4169 if(typeof s == "function"){
4172 if(typeof s == "string"){
4173 b += ' style="' + s + '"';
4174 }else if(typeof s == "object"){
4177 if(typeof s[key] != "function"){
4178 b += key + ":" + s[key] + ";";
4185 b += ' class="' + o["cls"] + '"';
4186 }else if(attr == "htmlFor"){
4187 b += ' for="' + o["htmlFor"] + '"';
4189 b += " " + attr + '="' + o[attr] + '"';
4193 if(emptyTags.test(o.tag)){
4197 var cn = o.children || o.cn;
4199 //http://bugs.kde.org/show_bug.cgi?id=71506
4200 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
4201 for(var i = 0, len = cn.length; i < len; i++) {
4202 b += createHtml(cn[i], b);
4205 b += createHtml(cn, b);
4211 b += "</" + o.tag + ">";
4218 var createDom = function(o, parentNode){
4220 // defininition craeted..
4222 if (o.ns && o.ns != 'html') {
4224 if (o.xmlns && typeof(xmlns[o.ns]) == 'undefined') {
4225 xmlns[o.ns] = o.xmlns;
4228 if (typeof(xmlns[o.ns]) == 'undefined') {
4229 console.log("Trying to create namespace element " + o.ns + ", however no xmlns was sent to builder previously");
4235 if (typeof(o) == 'string') {
4236 return parentNode.appendChild(document.createTextNode(o));
4238 o.tag = o.tag || div;
4239 if (o.ns && Roo.isIE) {
4241 o.tag = o.ns + ':' + o.tag;
4244 var el = ns ? document.createElementNS( ns, o.tag||'div') : document.createElement(o.tag||'div');
4245 var useSet = el.setAttribute ? true : false; // In IE some elements don't have setAttribute
4248 if(attr == "tag" || attr == "ns" ||attr == "xmlns" ||attr == "children" || attr == "cn" || attr == "html" ||
4249 attr == "style" || typeof o[attr] == "function") { continue; }
4251 if(attr=="cls" && Roo.isIE){
4252 el.className = o["cls"];
4254 if(useSet) { el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);}
4260 Roo.DomHelper.applyStyles(el, o.style);
4261 var cn = o.children || o.cn;
4263 //http://bugs.kde.org/show_bug.cgi?id=71506
4264 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
4265 for(var i = 0, len = cn.length; i < len; i++) {
4266 createDom(cn[i], el);
4273 el.innerHTML = o.html;
4276 parentNode.appendChild(el);
4281 var ieTable = function(depth, s, h, e){
4282 tempTableEl.innerHTML = [s, h, e].join('');
4283 var i = -1, el = tempTableEl;
4290 // kill repeat to save bytes
4294 tbe = '</tbody>'+te,
4300 * Nasty code for IE's broken table implementation
4302 var insertIntoTable = function(tag, where, el, html){
4304 tempTableEl = document.createElement('div');
4309 if(where == 'afterbegin' || where == 'beforeend'){ // INTO a TD
4312 if(where == 'beforebegin'){
4316 before = el.nextSibling;
4319 node = ieTable(4, trs, html, tre);
4321 else if(tag == 'tr'){
4322 if(where == 'beforebegin'){
4325 node = ieTable(3, tbs, html, tbe);
4326 } else if(where == 'afterend'){
4327 before = el.nextSibling;
4329 node = ieTable(3, tbs, html, tbe);
4330 } else{ // INTO a TR
4331 if(where == 'afterbegin'){
4332 before = el.firstChild;
4334 node = ieTable(4, trs, html, tre);
4336 } else if(tag == 'tbody'){
4337 if(where == 'beforebegin'){
4340 node = ieTable(2, ts, html, te);
4341 } else if(where == 'afterend'){
4342 before = el.nextSibling;
4344 node = ieTable(2, ts, html, te);
4346 if(where == 'afterbegin'){
4347 before = el.firstChild;
4349 node = ieTable(3, tbs, html, tbe);
4352 if(where == 'beforebegin' || where == 'afterend'){ // OUTSIDE the table
4355 if(where == 'afterbegin'){
4356 before = el.firstChild;
4358 node = ieTable(2, ts, html, te);
4360 el.insertBefore(node, before);
4365 /** True to force the use of DOM instead of html fragments @type Boolean */
4369 * Returns the markup for the passed Element(s) config
4370 * @param {Object} o The Dom object spec (and children)
4373 markup : function(o){
4374 return createHtml(o);
4378 * Applies a style specification to an element
4379 * @param {String/HTMLElement} el The element to apply styles to
4380 * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
4381 * a function which returns such a specification.
4383 applyStyles : function(el, styles){
4386 if(typeof styles == "string"){
4387 var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
4389 while ((matches = re.exec(styles)) != null){
4390 el.setStyle(matches[1], matches[2]);
4392 }else if (typeof styles == "object"){
4393 for (var style in styles){
4394 el.setStyle(style, styles[style]);
4396 }else if (typeof styles == "function"){
4397 Roo.DomHelper.applyStyles(el, styles.call());
4403 * Inserts an HTML fragment into the Dom
4404 * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
4405 * @param {HTMLElement} el The context element
4406 * @param {String} html The HTML fragmenet
4407 * @return {HTMLElement} The new node
4409 insertHtml : function(where, el, html){
4410 where = where.toLowerCase();
4411 if(el.insertAdjacentHTML){
4412 if(tableRe.test(el.tagName)){
4414 if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
4420 el.insertAdjacentHTML('BeforeBegin', html);
4421 return el.previousSibling;
4423 el.insertAdjacentHTML('AfterBegin', html);
4424 return el.firstChild;
4426 el.insertAdjacentHTML('BeforeEnd', html);
4427 return el.lastChild;
4429 el.insertAdjacentHTML('AfterEnd', html);
4430 return el.nextSibling;
4432 throw 'Illegal insertion point -> "' + where + '"';
4434 var range = el.ownerDocument.createRange();
4438 range.setStartBefore(el);
4439 frag = range.createContextualFragment(html);
4440 el.parentNode.insertBefore(frag, el);
4441 return el.previousSibling;
4444 range.setStartBefore(el.firstChild);
4445 frag = range.createContextualFragment(html);
4446 el.insertBefore(frag, el.firstChild);
4447 return el.firstChild;
4449 el.innerHTML = html;
4450 return el.firstChild;
4454 range.setStartAfter(el.lastChild);
4455 frag = range.createContextualFragment(html);
4456 el.appendChild(frag);
4457 return el.lastChild;
4459 el.innerHTML = html;
4460 return el.lastChild;
4463 range.setStartAfter(el);
4464 frag = range.createContextualFragment(html);
4465 el.parentNode.insertBefore(frag, el.nextSibling);
4466 return el.nextSibling;
4468 throw 'Illegal insertion point -> "' + where + '"';
4472 * Creates new Dom element(s) and inserts them before el
4473 * @param {String/HTMLElement/Element} el The context element
4474 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4475 * @param {Boolean} returnElement (optional) true to return a Roo.Element
4476 * @return {HTMLElement/Roo.Element} The new node
4478 insertBefore : function(el, o, returnElement){
4479 return this.doInsert(el, o, returnElement, "beforeBegin");
4483 * Creates new Dom element(s) and inserts them after el
4484 * @param {String/HTMLElement/Element} el The context element
4485 * @param {Object} o The Dom object spec (and children)
4486 * @param {Boolean} returnElement (optional) true to return a Roo.Element
4487 * @return {HTMLElement/Roo.Element} The new node
4489 insertAfter : function(el, o, returnElement){
4490 return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
4494 * Creates new Dom element(s) and inserts them as the first child of el
4495 * @param {String/HTMLElement/Element} el The context element
4496 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4497 * @param {Boolean} returnElement (optional) true to return a Roo.Element
4498 * @return {HTMLElement/Roo.Element} The new node
4500 insertFirst : function(el, o, returnElement){
4501 return this.doInsert(el, o, returnElement, "afterBegin");
4505 doInsert : function(el, o, returnElement, pos, sibling){
4506 el = Roo.getDom(el);
4508 if(this.useDom || o.ns){
4509 newNode = createDom(o, null);
4510 el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
4512 var html = createHtml(o);
4513 newNode = this.insertHtml(pos, el, html);
4515 return returnElement ? Roo.get(newNode, true) : newNode;
4519 * Creates new Dom element(s) and appends them to el
4520 * @param {String/HTMLElement/Element} el The context element
4521 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4522 * @param {Boolean} returnElement (optional) true to return a Roo.Element
4523 * @return {HTMLElement/Roo.Element} The new node
4525 append : function(el, o, returnElement){
4526 el = Roo.getDom(el);
4528 if(this.useDom || o.ns){
4529 newNode = createDom(o, null);
4530 el.appendChild(newNode);
4532 var html = createHtml(o);
4533 newNode = this.insertHtml("beforeEnd", el, html);
4535 return returnElement ? Roo.get(newNode, true) : newNode;
4539 * Creates new Dom element(s) and overwrites the contents of el with them
4540 * @param {String/HTMLElement/Element} el The context element
4541 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4542 * @param {Boolean} returnElement (optional) true to return a Roo.Element
4543 * @return {HTMLElement/Roo.Element} The new node
4545 overwrite : function(el, o, returnElement){
4546 el = Roo.getDom(el);
4549 while (el.childNodes.length) {
4550 el.removeChild(el.firstChild);
4554 el.innerHTML = createHtml(o);
4557 return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
4561 * Creates a new Roo.DomHelper.Template from the Dom object spec
4562 * @param {Object} o The Dom object spec (and children)
4563 * @return {Roo.DomHelper.Template} The new template
4565 createTemplate : function(o){
4566 var html = createHtml(o);
4567 return new Roo.Template(html);
4573 * Ext JS Library 1.1.1
4574 * Copyright(c) 2006-2007, Ext JS, LLC.
4576 * Originally Released Under LGPL - original licence link has changed is not relivant.
4579 * <script type="text/javascript">
4583 * @class Roo.Template
4584 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
4585 * For a list of available format functions, see {@link Roo.util.Format}.<br />
4588 var t = new Roo.Template({
4589 html : '<div name="{id}">' +
4590 '<span class="{cls}">{name:trim} {someval:this.myformat}{value:ellipsis(10)}</span>' +
4592 myformat: function (value, allValues) {
4593 return 'XX' + value;
4596 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
4598 * For more information see this blog post with examples:
4599 * <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
4600 - Create Elements using DOM, HTML fragments and Templates</a>.
4602 * @param {Object} cfg - Configuration object.
4604 Roo.Template = function(cfg){
4606 if(cfg instanceof Array){
4608 }else if(arguments.length > 1){
4609 cfg = Array.prototype.join.call(arguments, "");
4613 if (typeof(cfg) == 'object') {
4624 Roo.Template.prototype = {
4627 * @cfg {String} url The Url to load the template from. beware if you are loading from a url, the data may not be ready if you use it instantly..
4628 * it should be fixed so that template is observable...
4632 * @cfg {String} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
4636 * Returns an HTML fragment of this template with the specified values applied.
4637 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4638 * @return {String} The HTML fragment
4640 applyTemplate : function(values){
4644 return this.compiled(values);
4646 var useF = this.disableFormats !== true;
4647 var fm = Roo.util.Format, tpl = this;
4648 var fn = function(m, name, format, args){
4650 if(format.substr(0, 5) == "this."){
4651 return tpl.call(format.substr(5), values[name], values);
4654 // quoted values are required for strings in compiled templates,
4655 // but for non compiled we need to strip them
4656 // quoted reversed for jsmin
4657 var re = /^\s*['"](.*)["']\s*$/;
4658 args = args.split(',');
4659 for(var i = 0, len = args.length; i < len; i++){
4660 args[i] = args[i].replace(re, "$1");
4662 args = [values[name]].concat(args);
4664 args = [values[name]];
4666 return fm[format].apply(fm, args);
4669 return values[name] !== undefined ? values[name] : "";
4672 return this.html.replace(this.re, fn);
4690 this.loading = true;
4691 this.compiled = false;
4693 var cx = new Roo.data.Connection();
4697 success : function (response) {
4699 _t.html = response.responseText;
4703 failure : function(response) {
4704 Roo.log("Template failed to load from " + _t.url);
4711 * Sets the HTML used as the template and optionally compiles it.
4712 * @param {String} html
4713 * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
4714 * @return {Roo.Template} this
4716 set : function(html, compile){
4718 this.compiled = null;
4726 * True to disable format functions (defaults to false)
4729 disableFormats : false,
4732 * The regular expression used to match template variables
4736 re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
4739 * Compiles the template into an internal function, eliminating the RegEx overhead.
4740 * @return {Roo.Template} this
4742 compile : function(){
4743 var fm = Roo.util.Format;
4744 var useF = this.disableFormats !== true;
4745 var sep = Roo.isGecko ? "+" : ",";
4746 var fn = function(m, name, format, args){
4748 args = args ? ',' + args : "";
4749 if(format.substr(0, 5) != "this."){
4750 format = "fm." + format + '(';
4752 format = 'this.call("'+ format.substr(5) + '", ';
4756 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
4758 return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
4761 // branched to use + in gecko and [].join() in others
4763 body = "this.compiled = function(values){ return '" +
4764 this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
4767 body = ["this.compiled = function(values){ return ['"];
4768 body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
4769 body.push("'].join('');};");
4770 body = body.join('');
4780 // private function used to call members
4781 call : function(fnName, value, allValues){
4782 return this[fnName](value, allValues);
4786 * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
4787 * @param {String/HTMLElement/Roo.Element} el The context element
4788 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4789 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4790 * @return {HTMLElement/Roo.Element} The new node or Element
4792 insertFirst: function(el, values, returnElement){
4793 return this.doInsert('afterBegin', el, values, returnElement);
4797 * Applies the supplied values to the template and inserts the new node(s) before el.
4798 * @param {String/HTMLElement/Roo.Element} el The context element
4799 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4800 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4801 * @return {HTMLElement/Roo.Element} The new node or Element
4803 insertBefore: function(el, values, returnElement){
4804 return this.doInsert('beforeBegin', el, values, returnElement);
4808 * Applies the supplied values to the template and inserts the new node(s) after el.
4809 * @param {String/HTMLElement/Roo.Element} el The context element
4810 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4811 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4812 * @return {HTMLElement/Roo.Element} The new node or Element
4814 insertAfter : function(el, values, returnElement){
4815 return this.doInsert('afterEnd', el, values, returnElement);
4819 * Applies the supplied values to the template and appends the new node(s) to el.
4820 * @param {String/HTMLElement/Roo.Element} el The context element
4821 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4822 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4823 * @return {HTMLElement/Roo.Element} The new node or Element
4825 append : function(el, values, returnElement){
4826 return this.doInsert('beforeEnd', el, values, returnElement);
4829 doInsert : function(where, el, values, returnEl){
4830 el = Roo.getDom(el);
4831 var newNode = Roo.DomHelper.insertHtml(where, el, this.applyTemplate(values));
4832 return returnEl ? Roo.get(newNode, true) : newNode;
4836 * Applies the supplied values to the template and overwrites the content of el with the new node(s).
4837 * @param {String/HTMLElement/Roo.Element} el The context element
4838 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4839 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4840 * @return {HTMLElement/Roo.Element} The new node or Element
4842 overwrite : function(el, values, returnElement){
4843 el = Roo.getDom(el);
4844 el.innerHTML = this.applyTemplate(values);
4845 return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
4849 * Alias for {@link #applyTemplate}
4852 Roo.Template.prototype.apply = Roo.Template.prototype.applyTemplate;
4855 Roo.DomHelper.Template = Roo.Template;
4858 * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
4859 * @param {String/HTMLElement} el A DOM element or its id
4860 * @returns {Roo.Template} The created template
4863 Roo.Template.from = function(el){
4864 el = Roo.getDom(el);
4865 return new Roo.Template(el.value || el.innerHTML);
4868 * Ext JS Library 1.1.1
4869 * Copyright(c) 2006-2007, Ext JS, LLC.
4871 * Originally Released Under LGPL - original licence link has changed is not relivant.
4874 * <script type="text/javascript">
4879 * This is code is also distributed under MIT license for use
4880 * with jQuery and prototype JavaScript libraries.
4883 * @class Roo.DomQuery
4884 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).
4886 DomQuery supports most of the <a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/">CSS3 selectors spec</a>, along with some custom selectors and basic XPath.</p>
4889 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.
4891 <h4>Element Selectors:</h4>
4893 <li> <b>*</b> any element</li>
4894 <li> <b>E</b> an element with the tag E</li>
4895 <li> <b>E F</b> All descendent elements of E that have the tag F</li>
4896 <li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>
4897 <li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>
4898 <li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>
4900 <h4>Attribute Selectors:</h4>
4901 <p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>
4903 <li> <b>E[foo]</b> has an attribute "foo"</li>
4904 <li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>
4905 <li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>
4906 <li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>
4907 <li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>
4908 <li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>
4909 <li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>
4911 <h4>Pseudo Classes:</h4>
4913 <li> <b>E:first-child</b> E is the first child of its parent</li>
4914 <li> <b>E:last-child</b> E is the last child of its parent</li>
4915 <li> <b>E:nth-child(<i>n</i>)</b> E is the <i>n</i>th child of its parent (1 based as per the spec)</li>
4916 <li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>
4917 <li> <b>E:nth-child(even)</b> E is an even child of its parent</li>
4918 <li> <b>E:only-child</b> E is the only child of its parent</li>
4919 <li> <b>E:checked</b> E is an element that is has a checked attribute that is true (e.g. a radio or checkbox) </li>
4920 <li> <b>E:first</b> the first E in the resultset</li>
4921 <li> <b>E:last</b> the last E in the resultset</li>
4922 <li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>
4923 <li> <b>E:odd</b> shortcut for :nth-child(odd)</li>
4924 <li> <b>E:even</b> shortcut for :nth-child(even)</li>
4925 <li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>
4926 <li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>
4927 <li> <b>E:not(S)</b> an E element that does not match simple selector S</li>
4928 <li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>
4929 <li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>
4930 <li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>
4932 <h4>CSS Value Selectors:</h4>
4934 <li> <b>E{display=none}</b> css value "display" that equals "none"</li>
4935 <li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>
4936 <li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>
4937 <li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>
4938 <li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
4939 <li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
4943 Roo.DomQuery = function(){
4944 var cache = {}, simpleCache = {}, valueCache = {};
4945 var nonSpace = /\S/;
4946 var trimRe = /^\s+|\s+$/g;
4947 var tplRe = /\{(\d+)\}/g;
4948 var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
4949 var tagTokenRe = /^(#)?([\w-\*]+)/;
4950 var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;
4952 function child(p, index){
4954 var n = p.firstChild;
4956 if(n.nodeType == 1){
4967 while((n = n.nextSibling) && n.nodeType != 1);
4972 while((n = n.previousSibling) && n.nodeType != 1);
4976 function children(d){
4977 var n = d.firstChild, ni = -1;
4979 var nx = n.nextSibling;
4980 if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
4990 function byClassName(c, a, v){
4994 var r = [], ri = -1, cn;
4995 for(var i = 0, ci; ci = c[i]; i++){
4996 if((' '+ci.className+' ').indexOf(v) != -1){
5003 function attrValue(n, attr){
5004 if(!n.tagName && typeof n.length != "undefined"){
5013 if(attr == "class" || attr == "className"){
5016 return n.getAttribute(attr) || n[attr];
5020 function getNodes(ns, mode, tagName){
5021 var result = [], ri = -1, cs;
5025 tagName = tagName || "*";
5026 if(typeof ns.getElementsByTagName != "undefined"){
5030 for(var i = 0, ni; ni = ns[i]; i++){
5031 cs = ni.getElementsByTagName(tagName);
5032 for(var j = 0, ci; ci = cs[j]; j++){
5036 }else if(mode == "/" || mode == ">"){
5037 var utag = tagName.toUpperCase();
5038 for(var i = 0, ni, cn; ni = ns[i]; i++){
5039 cn = ni.children || ni.childNodes;
5040 for(var j = 0, cj; cj = cn[j]; j++){
5041 if(cj.nodeName == utag || cj.nodeName == tagName || tagName == '*'){
5046 }else if(mode == "+"){
5047 var utag = tagName.toUpperCase();
5048 for(var i = 0, n; n = ns[i]; i++){
5049 while((n = n.nextSibling) && n.nodeType != 1);
5050 if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
5054 }else if(mode == "~"){
5055 for(var i = 0, n; n = ns[i]; i++){
5056 while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
5065 function concat(a, b){
5069 for(var i = 0, l = b.length; i < l; i++){
5075 function byTag(cs, tagName){
5076 if(cs.tagName || cs == document){
5082 var r = [], ri = -1;
5083 tagName = tagName.toLowerCase();
5084 for(var i = 0, ci; ci = cs[i]; i++){
5085 if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
5092 function byId(cs, attr, id){
5093 if(cs.tagName || cs == document){
5099 var r = [], ri = -1;
5100 for(var i = 0,ci; ci = cs[i]; i++){
5101 if(ci && ci.id == id){
5109 function byAttribute(cs, attr, value, op, custom){
5110 var r = [], ri = -1, st = custom=="{";
5111 var f = Roo.DomQuery.operators[op];
5112 for(var i = 0, ci; ci = cs[i]; i++){
5115 a = Roo.DomQuery.getStyle(ci, attr);
5117 else if(attr == "class" || attr == "className"){
5119 }else if(attr == "for"){
5121 }else if(attr == "href"){
5122 a = ci.getAttribute("href", 2);
5124 a = ci.getAttribute(attr);
5126 if((f && f(a, value)) || (!f && a)){
5133 function byPseudo(cs, name, value){
5134 return Roo.DomQuery.pseudos[name](cs, value);
5137 // This is for IE MSXML which does not support expandos.
5138 // IE runs the same speed using setAttribute, however FF slows way down
5139 // and Safari completely fails so they need to continue to use expandos.
5140 var isIE = window.ActiveXObject ? true : false;
5142 // this eval is stop the compressor from
5143 // renaming the variable to something shorter
5145 /** eval:var:batch */
5150 function nodupIEXml(cs){
5152 cs[0].setAttribute("_nodup", d);
5154 for(var i = 1, len = cs.length; i < len; i++){
5156 if(!c.getAttribute("_nodup") != d){
5157 c.setAttribute("_nodup", d);
5161 for(var i = 0, len = cs.length; i < len; i++){
5162 cs[i].removeAttribute("_nodup");
5171 var len = cs.length, c, i, r = cs, cj, ri = -1;
5172 if(!len || typeof cs.nodeType != "undefined" || len == 1){
5175 if(isIE && typeof cs[0].selectSingleNode != "undefined"){
5176 return nodupIEXml(cs);
5180 for(i = 1; c = cs[i]; i++){
5185 for(var j = 0; j < i; j++){
5188 for(j = i+1; cj = cs[j]; j++){
5200 function quickDiffIEXml(c1, c2){
5202 for(var i = 0, len = c1.length; i < len; i++){
5203 c1[i].setAttribute("_qdiff", d);
5206 for(var i = 0, len = c2.length; i < len; i++){
5207 if(c2[i].getAttribute("_qdiff") != d){
5208 r[r.length] = c2[i];
5211 for(var i = 0, len = c1.length; i < len; i++){
5212 c1[i].removeAttribute("_qdiff");
5217 function quickDiff(c1, c2){
5218 var len1 = c1.length;
5222 if(isIE && c1[0].selectSingleNode){
5223 return quickDiffIEXml(c1, c2);
5226 for(var i = 0; i < len1; i++){
5230 for(var i = 0, len = c2.length; i < len; i++){
5231 if(c2[i]._qdiff != d){
5232 r[r.length] = c2[i];
5238 function quickId(ns, mode, root, id){
5240 var d = root.ownerDocument || root;
5241 return d.getElementById(id);
5243 ns = getNodes(ns, mode, "*");
5244 return byId(ns, null, id);
5248 getStyle : function(el, name){
5249 return Roo.fly(el).getStyle(name);
5252 * Compiles a selector/xpath query into a reusable function. The returned function
5253 * takes one parameter "root" (optional), which is the context node from where the query should start.
5254 * @param {String} selector The selector/xpath query
5255 * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
5256 * @return {Function}
5258 compile : function(path, type){
5259 type = type || "select";
5261 var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"];
5262 var q = path, mode, lq;
5263 var tk = Roo.DomQuery.matchers;
5264 var tklen = tk.length;
5267 // accept leading mode switch
5268 var lmode = q.match(modeRe);
5269 if(lmode && lmode[1]){
5270 fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
5271 q = q.replace(lmode[1], "");
5273 // strip leading slashes
5274 while(path.substr(0, 1)=="/"){
5275 path = path.substr(1);
5278 while(q && lq != q){
5280 var tm = q.match(tagTokenRe);
5281 if(type == "select"){
5284 fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
5286 fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
5288 q = q.replace(tm[0], "");
5289 }else if(q.substr(0, 1) != '@'){
5290 fn[fn.length] = 'n = getNodes(n, mode, "*");';
5295 fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
5297 fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
5299 q = q.replace(tm[0], "");
5302 while(!(mm = q.match(modeRe))){
5303 var matched = false;
5304 for(var j = 0; j < tklen; j++){
5306 var m = q.match(t.re);
5308 fn[fn.length] = t.select.replace(tplRe, function(x, i){
5311 q = q.replace(m[0], "");
5316 // prevent infinite loop on bad selector
5318 throw 'Error parsing selector, parsing failed at "' + q + '"';
5322 fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
5323 q = q.replace(mm[1], "");
5326 fn[fn.length] = "return nodup(n);\n}";
5329 * list of variables that need from compression as they are used by eval.
5339 * eval:var:byClassName
5341 * eval:var:byAttribute
5342 * eval:var:attrValue
5350 * Selects a group of elements.
5351 * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
5352 * @param {Node} root (optional) The start of the query (defaults to document).
5355 select : function(path, root, type){
5356 if(!root || root == document){
5359 if(typeof root == "string"){
5360 root = document.getElementById(root);
5362 var paths = path.split(",");
5364 for(var i = 0, len = paths.length; i < len; i++){
5365 var p = paths[i].replace(trimRe, "");
5367 cache[p] = Roo.DomQuery.compile(p);
5369 throw p + " is not a valid selector";
5372 var result = cache[p](root);
5373 if(result && result != document){
5374 results = results.concat(result);
5377 if(paths.length > 1){
5378 return nodup(results);
5384 * Selects a single element.
5385 * @param {String} selector The selector/xpath query
5386 * @param {Node} root (optional) The start of the query (defaults to document).
5389 selectNode : function(path, root){
5390 return Roo.DomQuery.select(path, root)[0];
5394 * Selects the value of a node, optionally replacing null with the defaultValue.
5395 * @param {String} selector The selector/xpath query
5396 * @param {Node} root (optional) The start of the query (defaults to document).
5397 * @param {String} defaultValue
5399 selectValue : function(path, root, defaultValue){
5400 path = path.replace(trimRe, "");
5401 if(!valueCache[path]){
5402 valueCache[path] = Roo.DomQuery.compile(path, "select");
5404 var n = valueCache[path](root);
5405 n = n[0] ? n[0] : n;
5406 var v = (n && n.firstChild ? n.firstChild.nodeValue : null);
5407 return ((v === null||v === undefined||v==='') ? defaultValue : v);
5411 * Selects the value of a node, parsing integers and floats.
5412 * @param {String} selector The selector/xpath query
5413 * @param {Node} root (optional) The start of the query (defaults to document).
5414 * @param {Number} defaultValue
5417 selectNumber : function(path, root, defaultValue){
5418 var v = Roo.DomQuery.selectValue(path, root, defaultValue || 0);
5419 return parseFloat(v);
5423 * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
5424 * @param {String/HTMLElement/Array} el An element id, element or array of elements
5425 * @param {String} selector The simple selector to test
5428 is : function(el, ss){
5429 if(typeof el == "string"){
5430 el = document.getElementById(el);
5432 var isArray = (el instanceof Array);
5433 var result = Roo.DomQuery.filter(isArray ? el : [el], ss);
5434 return isArray ? (result.length == el.length) : (result.length > 0);
5438 * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
5439 * @param {Array} el An array of elements to filter
5440 * @param {String} selector The simple selector to test
5441 * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
5442 * the selector instead of the ones that match
5445 filter : function(els, ss, nonMatches){
5446 ss = ss.replace(trimRe, "");
5447 if(!simpleCache[ss]){
5448 simpleCache[ss] = Roo.DomQuery.compile(ss, "simple");
5450 var result = simpleCache[ss](els);
5451 return nonMatches ? quickDiff(result, els) : result;
5455 * Collection of matching regular expressions and code snippets.
5459 select: 'n = byClassName(n, null, " {1} ");'
5461 re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
5462 select: 'n = byPseudo(n, "{1}", "{2}");'
5464 re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
5465 select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
5468 select: 'n = byId(n, null, "{1}");'
5471 select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
5476 * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
5477 * New operators can be added as long as the match the format <i>c</i>= where <i>c</i> is any character other than space, > <.
5480 "=" : function(a, v){
5483 "!=" : function(a, v){
5486 "^=" : function(a, v){
5487 return a && a.substr(0, v.length) == v;
5489 "$=" : function(a, v){
5490 return a && a.substr(a.length-v.length) == v;
5492 "*=" : function(a, v){
5493 return a && a.indexOf(v) !== -1;
5495 "%=" : function(a, v){
5496 return (a % v) == 0;
5498 "|=" : function(a, v){
5499 return a && (a == v || a.substr(0, v.length+1) == v+'-');
5501 "~=" : function(a, v){
5502 return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
5507 * Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
5508 * and the argument (if any) supplied in the selector.
5511 "first-child" : function(c){
5512 var r = [], ri = -1, n;
5513 for(var i = 0, ci; ci = n = c[i]; i++){
5514 while((n = n.previousSibling) && n.nodeType != 1);
5522 "last-child" : function(c){
5523 var r = [], ri = -1, n;
5524 for(var i = 0, ci; ci = n = c[i]; i++){
5525 while((n = n.nextSibling) && n.nodeType != 1);
5533 "nth-child" : function(c, a) {
5534 var r = [], ri = -1;
5535 var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
5536 var f = (m[1] || 1) - 0, l = m[2] - 0;
5537 for(var i = 0, n; n = c[i]; i++){
5538 var pn = n.parentNode;
5539 if (batch != pn._batch) {
5541 for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
5542 if(cn.nodeType == 1){
5549 if (l == 0 || n.nodeIndex == l){
5552 } else if ((n.nodeIndex + l) % f == 0){
5560 "only-child" : function(c){
5561 var r = [], ri = -1;;
5562 for(var i = 0, ci; ci = c[i]; i++){
5563 if(!prev(ci) && !next(ci)){
5570 "empty" : function(c){
5571 var r = [], ri = -1;
5572 for(var i = 0, ci; ci = c[i]; i++){
5573 var cns = ci.childNodes, j = 0, cn, empty = true;
5576 if(cn.nodeType == 1 || cn.nodeType == 3){
5588 "contains" : function(c, v){
5589 var r = [], ri = -1;
5590 for(var i = 0, ci; ci = c[i]; i++){
5591 if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
5598 "nodeValue" : function(c, v){
5599 var r = [], ri = -1;
5600 for(var i = 0, ci; ci = c[i]; i++){
5601 if(ci.firstChild && ci.firstChild.nodeValue == v){
5608 "checked" : function(c){
5609 var r = [], ri = -1;
5610 for(var i = 0, ci; ci = c[i]; i++){
5611 if(ci.checked == true){
5618 "not" : function(c, ss){
5619 return Roo.DomQuery.filter(c, ss, true);
5622 "odd" : function(c){
5623 return this["nth-child"](c, "odd");
5626 "even" : function(c){
5627 return this["nth-child"](c, "even");
5630 "nth" : function(c, a){
5631 return c[a-1] || [];
5634 "first" : function(c){
5638 "last" : function(c){
5639 return c[c.length-1] || [];
5642 "has" : function(c, ss){
5643 var s = Roo.DomQuery.select;
5644 var r = [], ri = -1;
5645 for(var i = 0, ci; ci = c[i]; i++){
5646 if(s(ss, ci).length > 0){
5653 "next" : function(c, ss){
5654 var is = Roo.DomQuery.is;
5655 var r = [], ri = -1;
5656 for(var i = 0, ci; ci = c[i]; i++){
5665 "prev" : function(c, ss){
5666 var is = Roo.DomQuery.is;
5667 var r = [], ri = -1;
5668 for(var i = 0, ci; ci = c[i]; i++){
5681 * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Roo.DomQuery#select}
5682 * @param {String} path The selector/xpath query
5683 * @param {Node} root (optional) The start of the query (defaults to document).
5688 Roo.query = Roo.DomQuery.select;
5691 * Ext JS Library 1.1.1
5692 * Copyright(c) 2006-2007, Ext JS, LLC.
5694 * Originally Released Under LGPL - original licence link has changed is not relivant.
5697 * <script type="text/javascript">
5701 * @class Roo.util.Observable
5702 * Base class that provides a common interface for publishing events. Subclasses are expected to
5703 * to have a property "events" with all the events defined.<br>
5706 Employee = function(name){
5713 Roo.extend(Employee, Roo.util.Observable);
5715 * @param {Object} config properties to use (incuding events / listeners)
5718 Roo.util.Observable = function(cfg){
5721 this.addEvents(cfg.events || {});
5723 delete cfg.events; // make sure
5726 Roo.apply(this, cfg);
5729 this.on(this.listeners);
5730 delete this.listeners;
5733 Roo.util.Observable.prototype = {
5735 * @cfg {Object} listeners list of events and functions to call for this object,
5739 'click' : function(e) {
5749 * Fires the specified event with the passed parameters (minus the event name).
5750 * @param {String} eventName
5751 * @param {Object...} args Variable number of parameters are passed to handlers
5752 * @return {Boolean} returns false if any of the handlers return false otherwise it returns true
5754 fireEvent : function(){
5755 var ce = this.events[arguments[0].toLowerCase()];
5756 if(typeof ce == "object"){
5757 return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
5764 filterOptRe : /^(?:scope|delay|buffer|single)$/,
5767 * Appends an event handler to this component
5768 * @param {String} eventName The type of event to listen for
5769 * @param {Function} handler The method the event invokes
5770 * @param {Object} scope (optional) The scope in which to execute the handler
5771 * function. The handler function's "this" context.
5772 * @param {Object} options (optional) An object containing handler configuration
5773 * properties. This may contain any of the following properties:<ul>
5774 * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
5775 * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
5776 * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
5777 * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
5778 * by the specified number of milliseconds. If the event fires again within that time, the original
5779 * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
5782 * <b>Combining Options</b><br>
5783 * Using the options argument, it is possible to combine different types of listeners:<br>
5785 * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
5787 el.on('click', this.onClick, this, {
5794 * <b>Attaching multiple handlers in 1 call</b><br>
5795 * The method also allows for a single argument to be passed which is a config object containing properties
5796 * which specify multiple handlers.
5805 fn: this.onMouseOver,
5809 fn: this.onMouseOut,
5815 * Or a shorthand syntax which passes the same scope object to all handlers:
5818 'click': this.onClick,
5819 'mouseover': this.onMouseOver,
5820 'mouseout': this.onMouseOut,
5825 addListener : function(eventName, fn, scope, o){
5826 if(typeof eventName == "object"){
5829 if(this.filterOptRe.test(e)){
5832 if(typeof o[e] == "function"){
5834 this.addListener(e, o[e], o.scope, o);
5836 // individual options
5837 this.addListener(e, o[e].fn, o[e].scope, o[e]);
5842 o = (!o || typeof o == "boolean") ? {} : o;
5843 eventName = eventName.toLowerCase();
5844 var ce = this.events[eventName] || true;
5845 if(typeof ce == "boolean"){
5846 ce = new Roo.util.Event(this, eventName);
5847 this.events[eventName] = ce;
5849 ce.addListener(fn, scope, o);
5853 * Removes a listener
5854 * @param {String} eventName The type of event to listen for
5855 * @param {Function} handler The handler to remove
5856 * @param {Object} scope (optional) The scope (this object) for the handler
5858 removeListener : function(eventName, fn, scope){
5859 var ce = this.events[eventName.toLowerCase()];
5860 if(typeof ce == "object"){
5861 ce.removeListener(fn, scope);
5866 * Removes all listeners for this object
5868 purgeListeners : function(){
5869 for(var evt in this.events){
5870 if(typeof this.events[evt] == "object"){
5871 this.events[evt].clearListeners();
5876 relayEvents : function(o, events){
5877 var createHandler = function(ename){
5879 return this.fireEvent.apply(this, Roo.combine(ename, Array.prototype.slice.call(arguments, 0)));
5882 for(var i = 0, len = events.length; i < len; i++){
5883 var ename = events[i];
5884 if(!this.events[ename]){ this.events[ename] = true; };
5885 o.on(ename, createHandler(ename), this);
5890 * Used to define events on this Observable
5891 * @param {Object} object The object with the events defined
5893 addEvents : function(o){
5897 Roo.applyIf(this.events, o);
5901 * Checks to see if this object has any listeners for a specified event
5902 * @param {String} eventName The name of the event to check for
5903 * @return {Boolean} True if the event is being listened for, else false
5905 hasListener : function(eventName){
5906 var e = this.events[eventName];
5907 return typeof e == "object" && e.listeners.length > 0;
5911 * Appends an event handler to this element (shorthand for addListener)
5912 * @param {String} eventName The type of event to listen for
5913 * @param {Function} handler The method the event invokes
5914 * @param {Object} scope (optional) The scope in which to execute the handler
5915 * function. The handler function's "this" context.
5916 * @param {Object} options (optional)
5919 Roo.util.Observable.prototype.on = Roo.util.Observable.prototype.addListener;
5921 * Removes a listener (shorthand for removeListener)
5922 * @param {String} eventName The type of event to listen for
5923 * @param {Function} handler The handler to remove
5924 * @param {Object} scope (optional) The scope (this object) for the handler
5927 Roo.util.Observable.prototype.un = Roo.util.Observable.prototype.removeListener;
5930 * Starts capture on the specified Observable. All events will be passed
5931 * to the supplied function with the event name + standard signature of the event
5932 * <b>before</b> the event is fired. If the supplied function returns false,
5933 * the event will not fire.
5934 * @param {Observable} o The Observable to capture
5935 * @param {Function} fn The function to call
5936 * @param {Object} scope (optional) The scope (this object) for the fn
5939 Roo.util.Observable.capture = function(o, fn, scope){
5940 o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
5944 * Removes <b>all</b> added captures from the Observable.
5945 * @param {Observable} o The Observable to release
5948 Roo.util.Observable.releaseCapture = function(o){
5949 o.fireEvent = Roo.util.Observable.prototype.fireEvent;
5954 var createBuffered = function(h, o, scope){
5955 var task = new Roo.util.DelayedTask();
5957 task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
5961 var createSingle = function(h, e, fn, scope){
5963 e.removeListener(fn, scope);
5964 return h.apply(scope, arguments);
5968 var createDelayed = function(h, o, scope){
5970 var args = Array.prototype.slice.call(arguments, 0);
5971 setTimeout(function(){
5972 h.apply(scope, args);
5977 Roo.util.Event = function(obj, name){
5980 this.listeners = [];
5983 Roo.util.Event.prototype = {
5984 addListener : function(fn, scope, options){
5985 var o = options || {};
5986 scope = scope || this.obj;
5987 if(!this.isListening(fn, scope)){
5988 var l = {fn: fn, scope: scope, options: o};
5991 h = createDelayed(h, o, scope);
5994 h = createSingle(h, this, fn, scope);
5997 h = createBuffered(h, o, scope);
6000 if(!this.firing){ // if we are currently firing this event, don't disturb the listener loop
6001 this.listeners.push(l);
6003 this.listeners = this.listeners.slice(0);
6004 this.listeners.push(l);
6009 findListener : function(fn, scope){
6010 scope = scope || this.obj;
6011 var ls = this.listeners;
6012 for(var i = 0, len = ls.length; i < len; i++){
6014 if(l.fn == fn && l.scope == scope){
6021 isListening : function(fn, scope){
6022 return this.findListener(fn, scope) != -1;
6025 removeListener : function(fn, scope){
6027 if((index = this.findListener(fn, scope)) != -1){
6029 this.listeners.splice(index, 1);
6031 this.listeners = this.listeners.slice(0);
6032 this.listeners.splice(index, 1);
6039 clearListeners : function(){
6040 this.listeners = [];
6044 var ls = this.listeners, scope, len = ls.length;
6047 var args = Array.prototype.slice.call(arguments, 0);
6048 for(var i = 0; i < len; i++){
6050 if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
6051 this.firing = false;
6055 this.firing = false;
6062 * Copyright(c) 2007-2017, Roo J Solutions Ltd
6069 * @class Roo.Document
6070 * @extends Roo.util.Observable
6071 * This is a convience class to wrap up the main document loading code.. , rather than adding Roo.onReady(......)
6073 * @param {Object} config the methods and properties of the 'base' class for the application.
6075 * Generic Page handler - implement this to start your app..
6078 * MyProject = new Roo.Document({
6080 'load' : true // your events..
6083 'ready' : function() {
6084 // fired on Roo.onReady()
6089 Roo.Document = function(cfg) {
6094 Roo.util.Observable.call(this,cfg);
6098 Roo.onReady(function() {
6099 _this.fireEvent('ready');
6105 Roo.extend(Roo.Document, Roo.util.Observable, {});/*
6107 * Ext JS Library 1.1.1
6108 * Copyright(c) 2006-2007, Ext JS, LLC.
6110 * Originally Released Under LGPL - original licence link has changed is not relivant.
6113 * <script type="text/javascript">
6117 * @class Roo.EventManager
6118 * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
6119 * several useful events directly.
6120 * See {@link Roo.EventObject} for more details on normalized event objects.
6123 Roo.EventManager = function(){
6124 var docReadyEvent, docReadyProcId, docReadyState = false;
6125 var resizeEvent, resizeTask, textEvent, textSize;
6126 var E = Roo.lib.Event;
6127 var D = Roo.lib.Dom;
6132 var fireDocReady = function(){
6134 docReadyState = true;
6137 clearInterval(docReadyProcId);
6139 if(Roo.isGecko || Roo.isOpera) {
6140 document.removeEventListener("DOMContentLoaded", fireDocReady, false);
6143 var defer = document.getElementById("ie-deferred-loader");
6145 defer.onreadystatechange = null;
6146 defer.parentNode.removeChild(defer);
6150 docReadyEvent.fire();
6151 docReadyEvent.clearListeners();
6156 var initDocReady = function(){
6157 docReadyEvent = new Roo.util.Event();
6158 if(Roo.isGecko || Roo.isOpera) {
6159 document.addEventListener("DOMContentLoaded", fireDocReady, false);
6161 document.write("<s"+'cript id="ie-deferred-loader" defer="defer" src="/'+'/:"></s'+"cript>");
6162 var defer = document.getElementById("ie-deferred-loader");
6163 defer.onreadystatechange = function(){
6164 if(this.readyState == "complete"){
6168 }else if(Roo.isSafari){
6169 docReadyProcId = setInterval(function(){
6170 var rs = document.readyState;
6171 if(rs == "complete") {
6176 // no matter what, make sure it fires on load
6177 E.on(window, "load", fireDocReady);
6180 var createBuffered = function(h, o){
6181 var task = new Roo.util.DelayedTask(h);
6183 // create new event object impl so new events don't wipe out properties
6184 e = new Roo.EventObjectImpl(e);
6185 task.delay(o.buffer, h, null, [e]);
6189 var createSingle = function(h, el, ename, fn){
6191 Roo.EventManager.removeListener(el, ename, fn);
6196 var createDelayed = function(h, o){
6198 // create new event object impl so new events don't wipe out properties
6199 e = new Roo.EventObjectImpl(e);
6200 setTimeout(function(){
6205 var transitionEndVal = false;
6207 var transitionEnd = function()
6209 if (transitionEndVal) {
6210 return transitionEndVal;
6212 var el = document.createElement('div');
6214 var transEndEventNames = {
6215 WebkitTransition : 'webkitTransitionEnd',
6216 MozTransition : 'transitionend',
6217 OTransition : 'oTransitionEnd otransitionend',
6218 transition : 'transitionend'
6221 for (var name in transEndEventNames) {
6222 if (el.style[name] !== undefined) {
6223 transitionEndVal = transEndEventNames[name];
6224 return transitionEndVal ;
6230 var listen = function(element, ename, opt, fn, scope){
6231 var o = (!opt || typeof opt == "boolean") ? {} : opt;
6232 fn = fn || o.fn; scope = scope || o.scope;
6233 var el = Roo.getDom(element);
6237 throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
6240 if (ename == 'transitionend') {
6241 ename = transitionEnd();
6243 var h = function(e){
6244 e = Roo.EventObject.setEvent(e);
6247 t = e.getTarget(o.delegate, el);
6254 if(o.stopEvent === true){
6257 if(o.preventDefault === true){
6260 if(o.stopPropagation === true){
6261 e.stopPropagation();
6264 if(o.normalized === false){
6268 fn.call(scope || el, e, t, o);
6271 h = createDelayed(h, o);
6274 h = createSingle(h, el, ename, fn);
6277 h = createBuffered(h, o);
6279 fn._handlers = fn._handlers || [];
6282 fn._handlers.push([Roo.id(el), ename, h]);
6287 if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
6288 el.addEventListener("DOMMouseScroll", h, false);
6289 E.on(window, 'unload', function(){
6290 el.removeEventListener("DOMMouseScroll", h, false);
6293 if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
6294 Roo.EventManager.stoppedMouseDownEvent.addListener(h);
6299 var stopListening = function(el, ename, fn){
6300 var id = Roo.id(el), hds = fn._handlers, hd = fn;
6302 for(var i = 0, len = hds.length; i < len; i++){
6304 if(h[0] == id && h[1] == ename){
6311 E.un(el, ename, hd);
6312 el = Roo.getDom(el);
6313 if(ename == "mousewheel" && el.addEventListener){
6314 el.removeEventListener("DOMMouseScroll", hd, false);
6316 if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
6317 Roo.EventManager.stoppedMouseDownEvent.removeListener(hd);
6321 var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
6328 * @scope Roo.EventManager
6333 * This is no longer needed and is deprecated. Places a simple wrapper around an event handler to override the browser event
6334 * object with a Roo.EventObject
6335 * @param {Function} fn The method the event invokes
6336 * @param {Object} scope An object that becomes the scope of the handler
6337 * @param {boolean} override If true, the obj passed in becomes
6338 * the execution scope of the listener
6339 * @return {Function} The wrapped function
6342 wrap : function(fn, scope, override){
6344 Roo.EventObject.setEvent(e);
6345 fn.call(override ? scope || window : window, Roo.EventObject, scope);
6350 * Appends an event handler to an element (shorthand for addListener)
6351 * @param {String/HTMLElement} element The html element or id to assign the
6352 * @param {String} eventName The type of event to listen for
6353 * @param {Function} handler The method the event invokes
6354 * @param {Object} scope (optional) The scope in which to execute the handler
6355 * function. The handler function's "this" context.
6356 * @param {Object} options (optional) An object containing handler configuration
6357 * properties. This may contain any of the following properties:<ul>
6358 * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
6359 * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
6360 * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
6361 * <li>preventDefault {Boolean} True to prevent the default action</li>
6362 * <li>stopPropagation {Boolean} True to prevent event propagation</li>
6363 * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
6364 * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
6365 * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
6366 * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
6367 * by the specified number of milliseconds. If the event fires again within that time, the original
6368 * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
6371 * <b>Combining Options</b><br>
6372 * Using the options argument, it is possible to combine different types of listeners:<br>
6374 * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
6376 el.on('click', this.onClick, this, {
6383 * <b>Attaching multiple handlers in 1 call</b><br>
6384 * The method also allows for a single argument to be passed which is a config object containing properties
6385 * which specify multiple handlers.
6395 fn: this.onMouseOver
6404 * Or a shorthand syntax:<br>
6407 'click' : this.onClick,
6408 'mouseover' : this.onMouseOver,
6409 'mouseout' : this.onMouseOut
6413 addListener : function(element, eventName, fn, scope, options){
6414 if(typeof eventName == "object"){
6420 if(typeof o[e] == "function"){
6422 listen(element, e, o, o[e], o.scope);
6424 // individual options
6425 listen(element, e, o[e]);
6430 return listen(element, eventName, options, fn, scope);
6434 * Removes an event handler
6436 * @param {String/HTMLElement} element The id or html element to remove the
6438 * @param {String} eventName The type of event
6439 * @param {Function} fn
6440 * @return {Boolean} True if a listener was actually removed
6442 removeListener : function(element, eventName, fn){
6443 return stopListening(element, eventName, fn);
6447 * Fires when the document is ready (before onload and before images are loaded). Can be
6448 * accessed shorthanded Roo.onReady().
6449 * @param {Function} fn The method the event invokes
6450 * @param {Object} scope An object that becomes the scope of the handler
6451 * @param {boolean} options
6453 onDocumentReady : function(fn, scope, options){
6454 if(docReadyState){ // if it already fired
6455 docReadyEvent.addListener(fn, scope, options);
6456 docReadyEvent.fire();
6457 docReadyEvent.clearListeners();
6463 docReadyEvent.addListener(fn, scope, options);
6467 * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.
6468 * @param {Function} fn The method the event invokes
6469 * @param {Object} scope An object that becomes the scope of the handler
6470 * @param {boolean} options
6472 onWindowResize : function(fn, scope, options){
6474 resizeEvent = new Roo.util.Event();
6475 resizeTask = new Roo.util.DelayedTask(function(){
6476 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
6478 E.on(window, "resize", function(){
6480 resizeTask.delay(50);
6482 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
6486 resizeEvent.addListener(fn, scope, options);
6490 * Fires when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
6491 * @param {Function} fn The method the event invokes
6492 * @param {Object} scope An object that becomes the scope of the handler
6493 * @param {boolean} options
6495 onTextResize : function(fn, scope, options){
6497 textEvent = new Roo.util.Event();
6498 var textEl = new Roo.Element(document.createElement('div'));
6499 textEl.dom.className = 'x-text-resize';
6500 textEl.dom.innerHTML = 'X';
6501 textEl.appendTo(document.body);
6502 textSize = textEl.dom.offsetHeight;
6503 setInterval(function(){
6504 if(textEl.dom.offsetHeight != textSize){
6505 textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
6507 }, this.textResizeInterval);
6509 textEvent.addListener(fn, scope, options);
6513 * Removes the passed window resize listener.
6514 * @param {Function} fn The method the event invokes
6515 * @param {Object} scope The scope of handler
6517 removeResizeListener : function(fn, scope){
6519 resizeEvent.removeListener(fn, scope);
6524 fireResize : function(){
6526 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
6530 * Url used for onDocumentReady with using SSL (defaults to Roo.SSL_SECURE_URL)
6534 * The frequency, in milliseconds, to check for text resize events (defaults to 50)
6536 textResizeInterval : 50
6541 * @scopeAlias pub=Roo.EventManager
6545 * Appends an event handler to an element (shorthand for addListener)
6546 * @param {String/HTMLElement} element The html element or id to assign the
6547 * @param {String} eventName The type of event to listen for
6548 * @param {Function} handler The method the event invokes
6549 * @param {Object} scope (optional) The scope in which to execute the handler
6550 * function. The handler function's "this" context.
6551 * @param {Object} options (optional) An object containing handler configuration
6552 * properties. This may contain any of the following properties:<ul>
6553 * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
6554 * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
6555 * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
6556 * <li>preventDefault {Boolean} True to prevent the default action</li>
6557 * <li>stopPropagation {Boolean} True to prevent event propagation</li>
6558 * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
6559 * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
6560 * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
6561 * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
6562 * by the specified number of milliseconds. If the event fires again within that time, the original
6563 * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
6566 * <b>Combining Options</b><br>
6567 * Using the options argument, it is possible to combine different types of listeners:<br>
6569 * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
6571 el.on('click', this.onClick, this, {
6578 * <b>Attaching multiple handlers in 1 call</b><br>
6579 * The method also allows for a single argument to be passed which is a config object containing properties
6580 * which specify multiple handlers.
6590 fn: this.onMouseOver
6599 * Or a shorthand syntax:<br>
6602 'click' : this.onClick,
6603 'mouseover' : this.onMouseOver,
6604 'mouseout' : this.onMouseOut
6608 pub.on = pub.addListener;
6609 pub.un = pub.removeListener;
6611 pub.stoppedMouseDownEvent = new Roo.util.Event();
6615 * Fires when the document is ready (before onload and before images are loaded). Shorthand of {@link Roo.EventManager#onDocumentReady}.
6616 * @param {Function} fn The method the event invokes
6617 * @param {Object} scope An object that becomes the scope of the handler
6618 * @param {boolean} override If true, the obj passed in becomes
6619 * the execution scope of the listener
6623 Roo.onReady = Roo.EventManager.onDocumentReady;
6625 Roo.onReady(function(){
6626 var bd = Roo.get(document.body);
6631 : Roo.isGecko ? "roo-gecko"
6632 : Roo.isOpera ? "roo-opera"
6633 : Roo.isSafari ? "roo-safari" : ""];
6636 cls.push("roo-mac");
6639 cls.push("roo-linux");
6642 cls.push("roo-ios");
6645 cls.push("roo-touch");
6647 if(Roo.isBorderBox){
6648 cls.push('roo-border-box');
6650 if(Roo.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
6651 var p = bd.dom.parentNode;
6653 p.className += ' roo-strict';
6656 bd.addClass(cls.join(' '));
6660 * @class Roo.EventObject
6661 * EventObject exposes the Yahoo! UI Event functionality directly on the object
6662 * passed to your event handler. It exists mostly for convenience. It also fixes the annoying null checks automatically to cleanup your code
6665 function handleClick(e){ // e is not a standard event object, it is a Roo.EventObject
6667 var target = e.getTarget();
6670 var myDiv = Roo.get("myDiv");
6671 myDiv.on("click", handleClick);
6673 Roo.EventManager.on("myDiv", 'click', handleClick);
6674 Roo.EventManager.addListener("myDiv", 'click', handleClick);
6678 Roo.EventObject = function(){
6680 var E = Roo.lib.Event;
6682 // safari keypress events for special keys return bad keycodes
6685 63235 : 39, // right
6688 63276 : 33, // page up
6689 63277 : 34, // page down
6690 63272 : 46, // delete
6695 // normalize button clicks
6696 var btnMap = Roo.isIE ? {1:0,4:1,2:2} :
6697 (Roo.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
6699 Roo.EventObjectImpl = function(e){
6701 this.setEvent(e.browserEvent || e);
6704 Roo.EventObjectImpl.prototype = {
6706 * Used to fix doc tools.
6707 * @scope Roo.EventObject.prototype
6713 /** The normal browser event */
6714 browserEvent : null,
6715 /** The button pressed in a mouse event */
6717 /** True if the shift key was down during the event */
6719 /** True if the control key was down during the event */
6721 /** True if the alt key was down during the event */
6780 setEvent : function(e){
6781 if(e == this || (e && e.browserEvent)){ // already wrapped
6784 this.browserEvent = e;
6786 // normalize buttons
6787 this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
6788 if(e.type == 'click' && this.button == -1){
6792 this.shiftKey = e.shiftKey;
6793 // mac metaKey behaves like ctrlKey
6794 this.ctrlKey = e.ctrlKey || e.metaKey;
6795 this.altKey = e.altKey;
6796 // in getKey these will be normalized for the mac
6797 this.keyCode = e.keyCode;
6798 // keyup warnings on firefox.
6799 this.charCode = (e.type == 'keyup' || e.type == 'keydown') ? 0 : e.charCode;
6800 // cache the target for the delayed and or buffered events
6801 this.target = E.getTarget(e);
6803 this.xy = E.getXY(e);
6806 this.shiftKey = false;
6807 this.ctrlKey = false;
6808 this.altKey = false;
6818 * Stop the event (preventDefault and stopPropagation)
6820 stopEvent : function(){
6821 if(this.browserEvent){
6822 if(this.browserEvent.type == 'mousedown'){
6823 Roo.EventManager.stoppedMouseDownEvent.fire(this);
6825 E.stopEvent(this.browserEvent);
6830 * Prevents the browsers default handling of the event.
6832 preventDefault : function(){
6833 if(this.browserEvent){
6834 E.preventDefault(this.browserEvent);
6839 isNavKeyPress : function(){
6840 var k = this.keyCode;
6841 k = Roo.isSafari ? (safariKeys[k] || k) : k;
6842 return (k >= 33 && k <= 40) || k == this.RETURN || k == this.TAB || k == this.ESC;
6845 isSpecialKey : function(){
6846 var k = this.keyCode;
6847 return (this.type == 'keypress' && this.ctrlKey) || k == 9 || k == 13 || k == 40 || k == 27 ||
6848 (k == 16) || (k == 17) ||
6849 (k >= 18 && k <= 20) ||
6850 (k >= 33 && k <= 35) ||
6851 (k >= 36 && k <= 39) ||
6852 (k >= 44 && k <= 45);
6855 * Cancels bubbling of the event.
6857 stopPropagation : function(){
6858 if(this.browserEvent){
6859 if(this.type == 'mousedown'){
6860 Roo.EventManager.stoppedMouseDownEvent.fire(this);
6862 E.stopPropagation(this.browserEvent);
6867 * Gets the key code for the event.
6870 getCharCode : function(){
6871 return this.charCode || this.keyCode;
6875 * Returns a normalized keyCode for the event.
6876 * @return {Number} The key code
6878 getKey : function(){
6879 var k = this.keyCode || this.charCode;
6880 return Roo.isSafari ? (safariKeys[k] || k) : k;
6884 * Gets the x coordinate of the event.
6887 getPageX : function(){
6892 * Gets the y coordinate of the event.
6895 getPageY : function(){
6900 * Gets the time of the event.
6903 getTime : function(){
6904 if(this.browserEvent){
6905 return E.getTime(this.browserEvent);
6911 * Gets the page coordinates of the event.
6912 * @return {Array} The xy values like [x, y]
6919 * Gets the target for the event.
6920 * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
6921 * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
6922 search as a number or element (defaults to 10 || document.body)
6923 * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
6924 * @return {HTMLelement}
6926 getTarget : function(selector, maxDepth, returnEl){
6927 return selector ? Roo.fly(this.target).findParent(selector, maxDepth, returnEl) : this.target;
6930 * Gets the related target.
6931 * @return {HTMLElement}
6933 getRelatedTarget : function(){
6934 if(this.browserEvent){
6935 return E.getRelatedTarget(this.browserEvent);
6941 * Normalizes mouse wheel delta across browsers
6942 * @return {Number} The delta
6944 getWheelDelta : function(){
6945 var e = this.browserEvent;
6947 if(e.wheelDelta){ /* IE/Opera. */
6948 delta = e.wheelDelta/120;
6949 }else if(e.detail){ /* Mozilla case. */
6950 delta = -e.detail/3;
6956 * Returns true if the control, meta, shift or alt key was pressed during this event.
6959 hasModifier : function(){
6960 return !!((this.ctrlKey || this.altKey) || this.shiftKey);
6964 * Returns true if the target of this event equals el or is a child of el
6965 * @param {String/HTMLElement/Element} el
6966 * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
6969 within : function(el, related){
6970 var t = this[related ? "getRelatedTarget" : "getTarget"]();
6971 return t && Roo.fly(el).contains(t);
6974 getPoint : function(){
6975 return new Roo.lib.Point(this.xy[0], this.xy[1]);
6979 return new Roo.EventObjectImpl();
6984 * Ext JS Library 1.1.1
6985 * Copyright(c) 2006-2007, Ext JS, LLC.
6987 * Originally Released Under LGPL - original licence link has changed is not relivant.
6990 * <script type="text/javascript">
6994 // was in Composite Element!??!?!
6997 var D = Roo.lib.Dom;
6998 var E = Roo.lib.Event;
6999 var A = Roo.lib.Anim;
7001 // local style camelizing for speed
7003 var camelRe = /(-[a-z])/gi;
7004 var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
7005 var view = document.defaultView;
7008 * @class Roo.Element
7009 * Represents an Element in the DOM.<br><br>
7012 var el = Roo.get("my-div");
7015 var el = getEl("my-div");
7017 // or with a DOM element
7018 var el = Roo.get(myDivElement);
7020 * Using Roo.get() or getEl() instead of calling the constructor directly ensures you get the same object
7021 * each call instead of constructing a new one.<br><br>
7022 * <b>Animations</b><br />
7023 * Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter
7024 * should either be a boolean (true) or an object literal with animation options. The animation options are:
7026 Option Default Description
7027 --------- -------- ---------------------------------------------
7028 duration .35 The duration of the animation in seconds
7029 easing easeOut The YUI easing method
7030 callback none A function to execute when the anim completes
7031 scope this The scope (this) of the callback function
7033 * Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or
7034 * manipulate the animation. Here's an example:
7036 var el = Roo.get("my-div");
7041 // default animation
7042 el.setWidth(100, true);
7044 // animation with some options set
7051 // using the "anim" property to get the Anim object
7057 el.setWidth(100, opt);
7059 if(opt.anim.isAnimated()){
7063 * <b> Composite (Collections of) Elements</b><br />
7064 * For working with collections of Elements, see <a href="Roo.CompositeElement.html">Roo.CompositeElement</a>
7065 * @constructor Create a new Element directly.
7066 * @param {String/HTMLElement} element
7067 * @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).
7069 Roo.Element = function(element, forceNew){
7070 var dom = typeof element == "string" ?
7071 document.getElementById(element) : element;
7072 if(!dom){ // invalid id/element
7076 if(forceNew !== true && id && Roo.Element.cache[id]){ // element object already exists
7077 return Roo.Element.cache[id];
7087 * The DOM element ID
7090 this.id = id || Roo.id(dom);
7093 var El = Roo.Element;
7097 * The element's default display mode (defaults to "")
7100 originalDisplay : "",
7104 * The default unit to append to CSS values where a unit isn't provided (defaults to px).
7110 * Sets the element's visibility mode. When setVisible() is called it
7111 * will use this to determine whether to set the visibility or the display property.
7112 * @param visMode Element.VISIBILITY or Element.DISPLAY
7113 * @return {Roo.Element} this
7115 setVisibilityMode : function(visMode){
7116 this.visibilityMode = visMode;
7120 * Convenience method for setVisibilityMode(Element.DISPLAY)
7121 * @param {String} display (optional) What to set display to when visible
7122 * @return {Roo.Element} this
7124 enableDisplayMode : function(display){
7125 this.setVisibilityMode(El.DISPLAY);
7126 if(typeof display != "undefined") { this.originalDisplay = display; }
7131 * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
7132 * @param {String} selector The simple selector to test
7133 * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
7134 search as a number or element (defaults to 10 || document.body)
7135 * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
7136 * @return {HTMLElement} The matching DOM node (or null if no match was found)
7138 findParent : function(simpleSelector, maxDepth, returnEl){
7139 var p = this.dom, b = document.body, depth = 0, dq = Roo.DomQuery, stopEl;
7140 maxDepth = maxDepth || 50;
7141 if(typeof maxDepth != "number"){
7142 stopEl = Roo.getDom(maxDepth);
7145 while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
7146 if(dq.is(p, simpleSelector)){
7147 return returnEl ? Roo.get(p) : p;
7157 * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
7158 * @param {String} selector The simple selector to test
7159 * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
7160 search as a number or element (defaults to 10 || document.body)
7161 * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
7162 * @return {HTMLElement} The matching DOM node (or null if no match was found)
7164 findParentNode : function(simpleSelector, maxDepth, returnEl){
7165 var p = Roo.fly(this.dom.parentNode, '_internal');
7166 return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
7170 * Looks at the scrollable parent element
7172 findScrollableParent : function()
7174 var overflowRegex = /(auto|scroll)/;
7176 if(this.getStyle('position') === 'fixed'){
7178 return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
7181 var excludeStaticParent = this.getStyle('position') === "absolute";
7183 for (var parent = this; (parent = Roo.get(parent.dom.parentNode));){
7185 if (excludeStaticParent && parent.getStyle('position') === "static") {
7189 if (overflowRegex.test(parent.getStyle('overflow') + parent.getStyle('overflow-x') + parent.getStyle('overflow-y'))){
7194 if(parent.dom.nodeName.toLowerCase() == 'body'){
7196 alert('is android : ' + Roo.isAndroid);
7197 alert('is ios : ' + Roo.isIOS);
7200 alert('Is Android');
7201 return Roo.get(document.documentElement);
7205 alert('not android');
7208 return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
7212 return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
7216 * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
7217 * This is a shortcut for findParentNode() that always returns an Roo.Element.
7218 * @param {String} selector The simple selector to test
7219 * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
7220 search as a number or element (defaults to 10 || document.body)
7221 * @return {Roo.Element} The matching DOM node (or null if no match was found)
7223 up : function(simpleSelector, maxDepth){
7224 return this.findParentNode(simpleSelector, maxDepth, true);
7230 * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
7231 * @param {String} selector The simple selector to test
7232 * @return {Boolean} True if this element matches the selector, else false
7234 is : function(simpleSelector){
7235 return Roo.DomQuery.is(this.dom, simpleSelector);
7239 * Perform animation on this element.
7240 * @param {Object} args The YUI animation control args
7241 * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
7242 * @param {Function} onComplete (optional) Function to call when animation completes
7243 * @param {String} easing (optional) Easing method to use (defaults to 'easeOut')
7244 * @param {String} animType (optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'
7245 * @return {Roo.Element} this
7247 animate : function(args, duration, onComplete, easing, animType){
7248 this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
7253 * @private Internal animation call
7255 anim : function(args, opt, animType, defaultDur, defaultEase, cb){
7256 animType = animType || 'run';
7258 var anim = Roo.lib.Anim[animType](
7260 (opt.duration || defaultDur) || .35,
7261 (opt.easing || defaultEase) || 'easeOut',
7263 Roo.callback(cb, this);
7264 Roo.callback(opt.callback, opt.scope || this, [this, opt]);
7272 // private legacy anim prep
7273 preanim : function(a, i){
7274 return !a[i] ? false : (typeof a[i] == "object" ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
7278 * Removes worthless text nodes
7279 * @param {Boolean} forceReclean (optional) By default the element
7280 * keeps track if it has been cleaned already so
7281 * you can call this over and over. However, if you update the element and
7282 * need to force a reclean, you can pass true.
7284 clean : function(forceReclean){
7285 if(this.isCleaned && forceReclean !== true){
7289 var d = this.dom, n = d.firstChild, ni = -1;
7291 var nx = n.nextSibling;
7292 if(n.nodeType == 3 && !ns.test(n.nodeValue)){
7299 this.isCleaned = true;
7304 calcOffsetsTo : function(el){
7307 var restorePos = false;
7308 if(el.getStyle('position') == 'static'){
7309 el.position('relative');
7314 while(op && op != d && op.tagName != 'HTML'){
7317 op = op.offsetParent;
7320 el.position('static');
7326 * Scrolls this element into view within the passed container.
7327 * @param {String/HTMLElement/Element} container (optional) The container element to scroll (defaults to document.body)
7328 * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
7329 * @return {Roo.Element} this
7331 scrollIntoView : function(container, hscroll){
7332 var c = Roo.getDom(container) || document.body;
7335 var o = this.calcOffsetsTo(c),
7338 b = t+el.offsetHeight,
7339 r = l+el.offsetWidth;
7341 var ch = c.clientHeight;
7342 var ct = parseInt(c.scrollTop, 10);
7343 var cl = parseInt(c.scrollLeft, 10);
7345 var cr = cl + c.clientWidth;
7353 if(hscroll !== false){
7357 c.scrollLeft = r-c.clientWidth;
7364 scrollChildIntoView : function(child, hscroll){
7365 Roo.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
7369 * Measures the element's content height and updates height to match. Note: this function uses setTimeout so
7370 * the new height may not be available immediately.
7371 * @param {Boolean} animate (optional) Animate the transition (defaults to false)
7372 * @param {Float} duration (optional) Length of the animation in seconds (defaults to .35)
7373 * @param {Function} onComplete (optional) Function to call when animation completes
7374 * @param {String} easing (optional) Easing method to use (defaults to easeOut)
7375 * @return {Roo.Element} this
7377 autoHeight : function(animate, duration, onComplete, easing){
7378 var oldHeight = this.getHeight();
7380 this.setHeight(1); // force clipping
7381 setTimeout(function(){
7382 var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
7384 this.setHeight(height);
7386 if(typeof onComplete == "function"){
7390 this.setHeight(oldHeight); // restore original height
7391 this.setHeight(height, animate, duration, function(){
7393 if(typeof onComplete == "function") { onComplete(); }
7394 }.createDelegate(this), easing);
7396 }.createDelegate(this), 0);
7401 * Returns true if this element is an ancestor of the passed element
7402 * @param {HTMLElement/String} el The element to check
7403 * @return {Boolean} True if this element is an ancestor of el, else false
7405 contains : function(el){
7406 if(!el){return false;}
7407 return D.isAncestor(this.dom, el.dom ? el.dom : el);
7411 * Checks whether the element is currently visible using both visibility and display properties.
7412 * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
7413 * @return {Boolean} True if the element is currently visible, else false
7415 isVisible : function(deep) {
7416 var vis = !(this.getStyle("visibility") == "hidden" || this.getStyle("display") == "none");
7417 if(deep !== true || !vis){
7420 var p = this.dom.parentNode;
7421 while(p && p.tagName.toLowerCase() != "body"){
7422 if(!Roo.fly(p, '_isVisible').isVisible()){
7431 * Creates a {@link Roo.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
7432 * @param {String} selector The CSS selector
7433 * @param {Boolean} unique (optional) True to create a unique Roo.Element for each child (defaults to false, which creates a single shared flyweight object)
7434 * @return {CompositeElement/CompositeElementLite} The composite element
7436 select : function(selector, unique){
7437 return El.select(selector, unique, this.dom);
7441 * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
7442 * @param {String} selector The CSS selector
7443 * @return {Array} An array of the matched nodes
7445 query : function(selector, unique){
7446 return Roo.DomQuery.select(selector, this.dom);
7450 * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
7451 * @param {String} selector The CSS selector
7452 * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
7453 * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
7455 child : function(selector, returnDom){
7456 var n = Roo.DomQuery.selectNode(selector, this.dom);
7457 return returnDom ? n : Roo.get(n);
7461 * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
7462 * @param {String} selector The CSS selector
7463 * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
7464 * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
7466 down : function(selector, returnDom){
7467 var n = Roo.DomQuery.selectNode(" > " + selector, this.dom);
7468 return returnDom ? n : Roo.get(n);
7472 * Initializes a {@link Roo.dd.DD} drag drop object for this element.
7473 * @param {String} group The group the DD object is member of
7474 * @param {Object} config The DD config object
7475 * @param {Object} overrides An object containing methods to override/implement on the DD object
7476 * @return {Roo.dd.DD} The DD object
7478 initDD : function(group, config, overrides){
7479 var dd = new Roo.dd.DD(Roo.id(this.dom), group, config);
7480 return Roo.apply(dd, overrides);
7484 * Initializes a {@link Roo.dd.DDProxy} object for this element.
7485 * @param {String} group The group the DDProxy object is member of
7486 * @param {Object} config The DDProxy config object
7487 * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
7488 * @return {Roo.dd.DDProxy} The DDProxy object
7490 initDDProxy : function(group, config, overrides){
7491 var dd = new Roo.dd.DDProxy(Roo.id(this.dom), group, config);
7492 return Roo.apply(dd, overrides);
7496 * Initializes a {@link Roo.dd.DDTarget} object for this element.
7497 * @param {String} group The group the DDTarget object is member of
7498 * @param {Object} config The DDTarget config object
7499 * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
7500 * @return {Roo.dd.DDTarget} The DDTarget object
7502 initDDTarget : function(group, config, overrides){
7503 var dd = new Roo.dd.DDTarget(Roo.id(this.dom), group, config);
7504 return Roo.apply(dd, overrides);
7508 * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
7509 * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
7510 * @param {Boolean} visible Whether the element is visible
7511 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7512 * @return {Roo.Element} this
7514 setVisible : function(visible, animate){
7516 if(this.visibilityMode == El.DISPLAY){
7517 this.setDisplayed(visible);
7520 this.dom.style.visibility = visible ? "visible" : "hidden";
7523 // closure for composites
7525 var visMode = this.visibilityMode;
7527 this.setOpacity(.01);
7528 this.setVisible(true);
7530 this.anim({opacity: { to: (visible?1:0) }},
7531 this.preanim(arguments, 1),
7532 null, .35, 'easeIn', function(){
7534 if(visMode == El.DISPLAY){
7535 dom.style.display = "none";
7537 dom.style.visibility = "hidden";
7539 Roo.get(dom).setOpacity(1);
7547 * Returns true if display is not "none"
7550 isDisplayed : function() {
7551 return this.getStyle("display") != "none";
7555 * Toggles the element's visibility or display, depending on visibility mode.
7556 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7557 * @return {Roo.Element} this
7559 toggle : function(animate){
7560 this.setVisible(!this.isVisible(), this.preanim(arguments, 0));
7565 * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
7566 * @param {Boolean} value Boolean value to display the element using its default display, or a string to set the display directly
7567 * @return {Roo.Element} this
7569 setDisplayed : function(value) {
7570 if(typeof value == "boolean"){
7571 value = value ? this.originalDisplay : "none";
7573 this.setStyle("display", value);
7578 * Tries to focus the element. Any exceptions are caught and ignored.
7579 * @return {Roo.Element} this
7581 focus : function() {
7589 * Tries to blur the element. Any exceptions are caught and ignored.
7590 * @return {Roo.Element} this
7600 * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
7601 * @param {String/Array} className The CSS class to add, or an array of classes
7602 * @return {Roo.Element} this
7604 addClass : function(className){
7605 if(className instanceof Array){
7606 for(var i = 0, len = className.length; i < len; i++) {
7607 this.addClass(className[i]);
7610 if(className && !this.hasClass(className)){
7611 this.dom.className = this.dom.className + " " + className;
7618 * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
7619 * @param {String/Array} className The CSS class to add, or an array of classes
7620 * @return {Roo.Element} this
7622 radioClass : function(className){
7623 var siblings = this.dom.parentNode.childNodes;
7624 for(var i = 0; i < siblings.length; i++) {
7625 var s = siblings[i];
7626 if(s.nodeType == 1){
7627 Roo.get(s).removeClass(className);
7630 this.addClass(className);
7635 * Removes one or more CSS classes from the element.
7636 * @param {String/Array} className The CSS class to remove, or an array of classes
7637 * @return {Roo.Element} this
7639 removeClass : function(className){
7640 if(!className || !this.dom.className){
7643 if(className instanceof Array){
7644 for(var i = 0, len = className.length; i < len; i++) {
7645 this.removeClass(className[i]);
7648 if(this.hasClass(className)){
7649 var re = this.classReCache[className];
7651 re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
7652 this.classReCache[className] = re;
7654 this.dom.className =
7655 this.dom.className.replace(re, " ");
7665 * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
7666 * @param {String} className The CSS class to toggle
7667 * @return {Roo.Element} this
7669 toggleClass : function(className){
7670 if(this.hasClass(className)){
7671 this.removeClass(className);
7673 this.addClass(className);
7679 * Checks if the specified CSS class exists on this element's DOM node.
7680 * @param {String} className The CSS class to check for
7681 * @return {Boolean} True if the class exists, else false
7683 hasClass : function(className){
7684 return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
7688 * Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
7689 * @param {String} oldClassName The CSS class to replace
7690 * @param {String} newClassName The replacement CSS class
7691 * @return {Roo.Element} this
7693 replaceClass : function(oldClassName, newClassName){
7694 this.removeClass(oldClassName);
7695 this.addClass(newClassName);
7700 * Returns an object with properties matching the styles requested.
7701 * For example, el.getStyles('color', 'font-size', 'width') might return
7702 * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
7703 * @param {String} style1 A style name
7704 * @param {String} style2 A style name
7705 * @param {String} etc.
7706 * @return {Object} The style object
7708 getStyles : function(){
7709 var a = arguments, len = a.length, r = {};
7710 for(var i = 0; i < len; i++){
7711 r[a[i]] = this.getStyle(a[i]);
7717 * Normalizes currentStyle and computedStyle. This is not YUI getStyle, it is an optimised version.
7718 * @param {String} property The style property whose value is returned.
7719 * @return {String} The current value of the style property for this element.
7721 getStyle : function(){
7722 return view && view.getComputedStyle ?
7724 var el = this.dom, v, cs, camel;
7725 if(prop == 'float'){
7728 if(el.style && (v = el.style[prop])){
7731 if(cs = view.getComputedStyle(el, "")){
7732 if(!(camel = propCache[prop])){
7733 camel = propCache[prop] = prop.replace(camelRe, camelFn);
7740 var el = this.dom, v, cs, camel;
7741 if(prop == 'opacity'){
7742 if(typeof el.style.filter == 'string'){
7743 var m = el.style.filter.match(/alpha\(opacity=(.*)\)/i);
7745 var fv = parseFloat(m[1]);
7747 return fv ? fv / 100 : 0;
7752 }else if(prop == 'float'){
7753 prop = "styleFloat";
7755 if(!(camel = propCache[prop])){
7756 camel = propCache[prop] = prop.replace(camelRe, camelFn);
7758 if(v = el.style[camel]){
7761 if(cs = el.currentStyle){
7769 * Wrapper for setting style properties, also takes single object parameter of multiple styles.
7770 * @param {String/Object} property The style property to be set, or an object of multiple styles.
7771 * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
7772 * @return {Roo.Element} this
7774 setStyle : function(prop, value){
7775 if(typeof prop == "string"){
7777 if (prop == 'float') {
7778 this.setStyle(Roo.isIE ? 'styleFloat' : 'cssFloat', value);
7783 if(!(camel = propCache[prop])){
7784 camel = propCache[prop] = prop.replace(camelRe, camelFn);
7787 if(camel == 'opacity') {
7788 this.setOpacity(value);
7790 this.dom.style[camel] = value;
7793 for(var style in prop){
7794 if(typeof prop[style] != "function"){
7795 this.setStyle(style, prop[style]);
7803 * More flexible version of {@link #setStyle} for setting style properties.
7804 * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
7805 * a function which returns such a specification.
7806 * @return {Roo.Element} this
7808 applyStyles : function(style){
7809 Roo.DomHelper.applyStyles(this.dom, style);
7814 * 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).
7815 * @return {Number} The X position of the element
7818 return D.getX(this.dom);
7822 * 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).
7823 * @return {Number} The Y position of the element
7826 return D.getY(this.dom);
7830 * 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).
7831 * @return {Array} The XY position of the element
7834 return D.getXY(this.dom);
7838 * 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).
7839 * @param {Number} The X position of the element
7840 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7841 * @return {Roo.Element} this
7843 setX : function(x, animate){
7845 D.setX(this.dom, x);
7847 this.setXY([x, this.getY()], this.preanim(arguments, 1));
7853 * 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).
7854 * @param {Number} The Y position of the element
7855 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7856 * @return {Roo.Element} this
7858 setY : function(y, animate){
7860 D.setY(this.dom, y);
7862 this.setXY([this.getX(), y], this.preanim(arguments, 1));
7868 * Sets the element's left position directly using CSS style (instead of {@link #setX}).
7869 * @param {String} left The left CSS property value
7870 * @return {Roo.Element} this
7872 setLeft : function(left){
7873 this.setStyle("left", this.addUnits(left));
7878 * Sets the element's top position directly using CSS style (instead of {@link #setY}).
7879 * @param {String} top The top CSS property value
7880 * @return {Roo.Element} this
7882 setTop : function(top){
7883 this.setStyle("top", this.addUnits(top));
7888 * Sets the element's CSS right style.
7889 * @param {String} right The right CSS property value
7890 * @return {Roo.Element} this
7892 setRight : function(right){
7893 this.setStyle("right", this.addUnits(right));
7898 * Sets the element's CSS bottom style.
7899 * @param {String} bottom The bottom CSS property value
7900 * @return {Roo.Element} this
7902 setBottom : function(bottom){
7903 this.setStyle("bottom", this.addUnits(bottom));
7908 * Sets the position of the element in page coordinates, regardless of how the element is positioned.
7909 * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7910 * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
7911 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7912 * @return {Roo.Element} this
7914 setXY : function(pos, animate){
7916 D.setXY(this.dom, pos);
7918 this.anim({points: {to: pos}}, this.preanim(arguments, 1), 'motion');
7924 * Sets the position of the element in page coordinates, regardless of how the element is positioned.
7925 * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7926 * @param {Number} x X value for new position (coordinates are page-based)
7927 * @param {Number} y Y value for new position (coordinates are page-based)
7928 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7929 * @return {Roo.Element} this
7931 setLocation : function(x, y, animate){
7932 this.setXY([x, y], this.preanim(arguments, 2));
7937 * Sets the position of the element in page coordinates, regardless of how the element is positioned.
7938 * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7939 * @param {Number} x X value for new position (coordinates are page-based)
7940 * @param {Number} y Y value for new position (coordinates are page-based)
7941 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7942 * @return {Roo.Element} this
7944 moveTo : function(x, y, animate){
7945 this.setXY([x, y], this.preanim(arguments, 2));
7950 * Returns the region of the given element.
7951 * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
7952 * @return {Region} A Roo.lib.Region containing "top, left, bottom, right" member data.
7954 getRegion : function(){
7955 return D.getRegion(this.dom);
7959 * Returns the offset height of the element
7960 * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
7961 * @return {Number} The element's height
7963 getHeight : function(contentHeight){
7964 var h = this.dom.offsetHeight || 0;
7965 return contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
7969 * Returns the offset width of the element
7970 * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
7971 * @return {Number} The element's width
7973 getWidth : function(contentWidth){
7974 var w = this.dom.offsetWidth || 0;
7975 return contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
7979 * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
7980 * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
7981 * if a height has not been set using CSS.
7984 getComputedHeight : function(){
7985 var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight);
7987 h = parseInt(this.getStyle('height'), 10) || 0;
7988 if(!this.isBorderBox()){
7989 h += this.getFrameWidth('tb');
7996 * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
7997 * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
7998 * if a width has not been set using CSS.
8001 getComputedWidth : function(){
8002 var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
8004 w = parseInt(this.getStyle('width'), 10) || 0;
8005 if(!this.isBorderBox()){
8006 w += this.getFrameWidth('lr');
8013 * Returns the size of the element.
8014 * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
8015 * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
8017 getSize : function(contentSize){
8018 return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
8022 * Returns the width and height of the viewport.
8023 * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
8025 getViewSize : function(){
8026 var d = this.dom, doc = document, aw = 0, ah = 0;
8027 if(d == doc || d == doc.body){
8028 return {width : D.getViewWidth(), height: D.getViewHeight()};
8031 width : d.clientWidth,
8032 height: d.clientHeight
8038 * Returns the value of the "value" attribute
8039 * @param {Boolean} asNumber true to parse the value as a number
8040 * @return {String/Number}
8042 getValue : function(asNumber){
8043 return asNumber ? parseInt(this.dom.value, 10) : this.dom.value;
8047 adjustWidth : function(width){
8048 if(typeof width == "number"){
8049 if(this.autoBoxAdjust && !this.isBorderBox()){
8050 width -= (this.getBorderWidth("lr") + this.getPadding("lr"));
8060 adjustHeight : function(height){
8061 if(typeof height == "number"){
8062 if(this.autoBoxAdjust && !this.isBorderBox()){
8063 height -= (this.getBorderWidth("tb") + this.getPadding("tb"));
8073 * Set the width of the element
8074 * @param {Number} width The new width
8075 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8076 * @return {Roo.Element} this
8078 setWidth : function(width, animate){
8079 width = this.adjustWidth(width);
8081 this.dom.style.width = this.addUnits(width);
8083 this.anim({width: {to: width}}, this.preanim(arguments, 1));
8089 * Set the height of the element
8090 * @param {Number} height The new height
8091 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8092 * @return {Roo.Element} this
8094 setHeight : function(height, animate){
8095 height = this.adjustHeight(height);
8097 this.dom.style.height = this.addUnits(height);
8099 this.anim({height: {to: height}}, this.preanim(arguments, 1));
8105 * Set the size of the element. If animation is true, both width an height will be animated concurrently.
8106 * @param {Number} width The new width
8107 * @param {Number} height The new height
8108 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8109 * @return {Roo.Element} this
8111 setSize : function(width, height, animate){
8112 if(typeof width == "object"){ // in case of object from getSize()
8113 height = width.height; width = width.width;
8115 width = this.adjustWidth(width); height = this.adjustHeight(height);
8117 this.dom.style.width = this.addUnits(width);
8118 this.dom.style.height = this.addUnits(height);
8120 this.anim({width: {to: width}, height: {to: height}}, this.preanim(arguments, 2));
8126 * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
8127 * @param {Number} x X value for new position (coordinates are page-based)
8128 * @param {Number} y Y value for new position (coordinates are page-based)
8129 * @param {Number} width The new width
8130 * @param {Number} height The new height
8131 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8132 * @return {Roo.Element} this
8134 setBounds : function(x, y, width, height, animate){
8136 this.setSize(width, height);
8137 this.setLocation(x, y);
8139 width = this.adjustWidth(width); height = this.adjustHeight(height);
8140 this.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},
8141 this.preanim(arguments, 4), 'motion');
8147 * Sets the element's position and size the the specified region. If animation is true then width, height, x and y will be animated concurrently.
8148 * @param {Roo.lib.Region} region The region to fill
8149 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8150 * @return {Roo.Element} this
8152 setRegion : function(region, animate){
8153 this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.preanim(arguments, 1));
8158 * Appends an event handler
8160 * @param {String} eventName The type of event to append
8161 * @param {Function} fn The method the event invokes
8162 * @param {Object} scope (optional) The scope (this object) of the fn
8163 * @param {Object} options (optional)An object with standard {@link Roo.EventManager#addListener} options
8165 addListener : function(eventName, fn, scope, options){
8167 Roo.EventManager.on(this.dom, eventName, fn, scope || this, options);
8172 * Removes an event handler from this element
8173 * @param {String} eventName the type of event to remove
8174 * @param {Function} fn the method the event invokes
8175 * @return {Roo.Element} this
8177 removeListener : function(eventName, fn){
8178 Roo.EventManager.removeListener(this.dom, eventName, fn);
8183 * Removes all previous added listeners from this element
8184 * @return {Roo.Element} this
8186 removeAllListeners : function(){
8187 E.purgeElement(this.dom);
8191 relayEvent : function(eventName, observable){
8192 this.on(eventName, function(e){
8193 observable.fireEvent(eventName, e);
8198 * Set the opacity of the element
8199 * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
8200 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8201 * @return {Roo.Element} this
8203 setOpacity : function(opacity, animate){
8205 var s = this.dom.style;
8208 s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
8209 (opacity == 1 ? "" : "alpha(opacity=" + opacity * 100 + ")");
8211 s.opacity = opacity;
8214 this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
8220 * Gets the left X coordinate
8221 * @param {Boolean} local True to get the local css position instead of page coordinate
8224 getLeft : function(local){
8228 return parseInt(this.getStyle("left"), 10) || 0;
8233 * Gets the right X coordinate of the element (element X position + element width)
8234 * @param {Boolean} local True to get the local css position instead of page coordinate
8237 getRight : function(local){
8239 return this.getX() + this.getWidth();
8241 return (this.getLeft(true) + this.getWidth()) || 0;
8246 * Gets the top Y coordinate
8247 * @param {Boolean} local True to get the local css position instead of page coordinate
8250 getTop : function(local) {
8254 return parseInt(this.getStyle("top"), 10) || 0;
8259 * Gets the bottom Y coordinate of the element (element Y position + element height)
8260 * @param {Boolean} local True to get the local css position instead of page coordinate
8263 getBottom : function(local){
8265 return this.getY() + this.getHeight();
8267 return (this.getTop(true) + this.getHeight()) || 0;
8272 * Initializes positioning on this element. If a desired position is not passed, it will make the
8273 * the element positioned relative IF it is not already positioned.
8274 * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
8275 * @param {Number} zIndex (optional) The zIndex to apply
8276 * @param {Number} x (optional) Set the page X position
8277 * @param {Number} y (optional) Set the page Y position
8279 position : function(pos, zIndex, x, y){
8281 if(this.getStyle('position') == 'static'){
8282 this.setStyle('position', 'relative');
8285 this.setStyle("position", pos);
8288 this.setStyle("z-index", zIndex);
8290 if(x !== undefined && y !== undefined){
8292 }else if(x !== undefined){
8294 }else if(y !== undefined){
8300 * Clear positioning back to the default when the document was loaded
8301 * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
8302 * @return {Roo.Element} this
8304 clearPositioning : function(value){
8312 "position" : "static"
8318 * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
8319 * snapshot before performing an update and then restoring the element.
8322 getPositioning : function(){
8323 var l = this.getStyle("left");
8324 var t = this.getStyle("top");
8326 "position" : this.getStyle("position"),
8328 "right" : l ? "" : this.getStyle("right"),
8330 "bottom" : t ? "" : this.getStyle("bottom"),
8331 "z-index" : this.getStyle("z-index")
8336 * Gets the width of the border(s) for the specified side(s)
8337 * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
8338 * passing lr would get the border (l)eft width + the border (r)ight width.
8339 * @return {Number} The width of the sides passed added together
8341 getBorderWidth : function(side){
8342 return this.addStyles(side, El.borders);
8346 * Gets the width of the padding(s) for the specified side(s)
8347 * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
8348 * passing lr would get the padding (l)eft + the padding (r)ight.
8349 * @return {Number} The padding of the sides passed added together
8351 getPadding : function(side){
8352 return this.addStyles(side, El.paddings);
8356 * Set positioning with an object returned by getPositioning().
8357 * @param {Object} posCfg
8358 * @return {Roo.Element} this
8360 setPositioning : function(pc){
8361 this.applyStyles(pc);
8362 if(pc.right == "auto"){
8363 this.dom.style.right = "";
8365 if(pc.bottom == "auto"){
8366 this.dom.style.bottom = "";
8372 fixDisplay : function(){
8373 if(this.getStyle("display") == "none"){
8374 this.setStyle("visibility", "hidden");
8375 this.setStyle("display", this.originalDisplay); // first try reverting to default
8376 if(this.getStyle("display") == "none"){ // if that fails, default to block
8377 this.setStyle("display", "block");
8383 * Quick set left and top adding default units
8384 * @param {String} left The left CSS property value
8385 * @param {String} top The top CSS property value
8386 * @return {Roo.Element} this
8388 setLeftTop : function(left, top){
8389 this.dom.style.left = this.addUnits(left);
8390 this.dom.style.top = this.addUnits(top);
8395 * Move this element relative to its current position.
8396 * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
8397 * @param {Number} distance How far to move the element in pixels
8398 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8399 * @return {Roo.Element} this
8401 move : function(direction, distance, animate){
8402 var xy = this.getXY();
8403 direction = direction.toLowerCase();
8407 this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
8411 this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
8416 this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
8421 this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
8428 * Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
8429 * @return {Roo.Element} this
8432 if(!this.isClipped){
8433 this.isClipped = true;
8434 this.originalClip = {
8435 "o": this.getStyle("overflow"),
8436 "x": this.getStyle("overflow-x"),
8437 "y": this.getStyle("overflow-y")
8439 this.setStyle("overflow", "hidden");
8440 this.setStyle("overflow-x", "hidden");
8441 this.setStyle("overflow-y", "hidden");
8447 * Return clipping (overflow) to original clipping before clip() was called
8448 * @return {Roo.Element} this
8450 unclip : function(){
8452 this.isClipped = false;
8453 var o = this.originalClip;
8454 if(o.o){this.setStyle("overflow", o.o);}
8455 if(o.x){this.setStyle("overflow-x", o.x);}
8456 if(o.y){this.setStyle("overflow-y", o.y);}
8463 * Gets the x,y coordinates specified by the anchor position on the element.
8464 * @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo} for details on supported anchor positions.
8465 * @param {Object} size (optional) An object containing the size to use for calculating anchor position
8466 * {width: (target width), height: (target height)} (defaults to the element's current size)
8467 * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead of page coordinates
8468 * @return {Array} [x, y] An array containing the element's x and y coordinates
8470 getAnchorXY : function(anchor, local, s){
8471 //Passing a different size is useful for pre-calculating anchors,
8472 //especially for anchored animations that change the el size.
8474 var w, h, vp = false;
8477 if(d == document.body || d == document){
8479 w = D.getViewWidth(); h = D.getViewHeight();
8481 w = this.getWidth(); h = this.getHeight();
8484 w = s.width; h = s.height;
8486 var x = 0, y = 0, r = Math.round;
8487 switch((anchor || "tl").toLowerCase()){
8529 var sc = this.getScroll();
8530 return [x + sc.left, y + sc.top];
8532 //Add the element's offset xy
8533 var o = this.getXY();
8534 return [x+o[0], y+o[1]];
8538 * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
8539 * supported position values.
8540 * @param {String/HTMLElement/Roo.Element} element The element to align to.
8541 * @param {String} position The position to align to.
8542 * @param {Array} offsets (optional) Offset the positioning by [x, y]
8543 * @return {Array} [x, y]
8545 getAlignToXY : function(el, p, o){
8549 throw "Element.alignTo with an element that doesn't exist";
8551 var c = false; //constrain to viewport
8552 var p1 = "", p2 = "";
8559 }else if(p.indexOf("-") == -1){
8562 p = p.toLowerCase();
8563 var m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
8565 throw "Element.alignTo with an invalid alignment " + p;
8567 p1 = m[1]; p2 = m[2]; c = !!m[3];
8569 //Subtract the aligned el's internal xy from the target's offset xy
8570 //plus custom offset to get the aligned el's new offset xy
8571 var a1 = this.getAnchorXY(p1, true);
8572 var a2 = el.getAnchorXY(p2, false);
8573 var x = a2[0] - a1[0] + o[0];
8574 var y = a2[1] - a1[1] + o[1];
8576 //constrain the aligned el to viewport if necessary
8577 var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
8578 // 5px of margin for ie
8579 var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
8581 //If we are at a viewport boundary and the aligned el is anchored on a target border that is
8582 //perpendicular to the vp border, allow the aligned el to slide on that border,
8583 //otherwise swap the aligned el to the opposite border of the target.
8584 var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
8585 var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
8586 var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
8587 var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
8590 var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
8591 var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
8593 if((x+w) > dw + scrollX){
8594 x = swapX ? r.left-w : dw+scrollX-w;
8597 x = swapX ? r.right : scrollX;
8599 if((y+h) > dh + scrollY){
8600 y = swapY ? r.top-h : dh+scrollY-h;
8603 y = swapY ? r.bottom : scrollY;
8610 getConstrainToXY : function(){
8611 var os = {top:0, left:0, bottom:0, right: 0};
8613 return function(el, local, offsets, proposedXY){
8615 offsets = offsets ? Roo.applyIf(offsets, os) : os;
8617 var vw, vh, vx = 0, vy = 0;
8618 if(el.dom == document.body || el.dom == document){
8619 vw = Roo.lib.Dom.getViewWidth();
8620 vh = Roo.lib.Dom.getViewHeight();
8622 vw = el.dom.clientWidth;
8623 vh = el.dom.clientHeight;
8625 var vxy = el.getXY();
8631 var s = el.getScroll();
8633 vx += offsets.left + s.left;
8634 vy += offsets.top + s.top;
8636 vw -= offsets.right;
8637 vh -= offsets.bottom;
8642 var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
8643 var x = xy[0], y = xy[1];
8644 var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
8646 // only move it if it needs it
8649 // first validate right/bottom
8658 // then make sure top/left isn't negative
8667 return moved ? [x, y] : false;
8672 adjustForConstraints : function(xy, parent, offsets){
8673 return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
8677 * Aligns this element with another element relative to the specified anchor points. If the other element is the
8678 * document it aligns it to the viewport.
8679 * The position parameter is optional, and can be specified in any one of the following formats:
8681 * <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
8682 * <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
8683 * The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
8684 * deprecated in favor of the newer two anchor syntax below</i>.</li>
8685 * <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the
8686 * element's anchor point, and the second value is used as the target's anchor point.</li>
8688 * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
8689 * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
8690 * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
8691 * that specified in order to enforce the viewport constraints.
8692 * Following are all of the supported anchor positions:
8695 ----- -----------------------------
8696 tl The top left corner (default)
8697 t The center of the top edge
8698 tr The top right corner
8699 l The center of the left edge
8700 c In the center of the element
8701 r The center of the right edge
8702 bl The bottom left corner
8703 b The center of the bottom edge
8704 br The bottom right corner
8708 // align el to other-el using the default positioning ("tl-bl", non-constrained)
8709 el.alignTo("other-el");
8711 // align the top left corner of el with the top right corner of other-el (constrained to viewport)
8712 el.alignTo("other-el", "tr?");
8714 // align the bottom right corner of el with the center left edge of other-el
8715 el.alignTo("other-el", "br-l?");
8717 // align the center of el with the bottom left corner of other-el and
8718 // adjust the x position by -6 pixels (and the y position by 0)
8719 el.alignTo("other-el", "c-bl", [-6, 0]);
8721 * @param {String/HTMLElement/Roo.Element} element The element to align to.
8722 * @param {String} position The position to align to.
8723 * @param {Array} offsets (optional) Offset the positioning by [x, y]
8724 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8725 * @return {Roo.Element} this
8727 alignTo : function(element, position, offsets, animate){
8728 var xy = this.getAlignToXY(element, position, offsets);
8729 this.setXY(xy, this.preanim(arguments, 3));
8734 * Anchors an element to another element and realigns it when the window is resized.
8735 * @param {String/HTMLElement/Roo.Element} element The element to align to.
8736 * @param {String} position The position to align to.
8737 * @param {Array} offsets (optional) Offset the positioning by [x, y]
8738 * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
8739 * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
8740 * is a number, it is used as the buffer delay (defaults to 50ms).
8741 * @param {Function} callback The function to call after the animation finishes
8742 * @return {Roo.Element} this
8744 anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
8745 var action = function(){
8746 this.alignTo(el, alignment, offsets, animate);
8747 Roo.callback(callback, this);
8749 Roo.EventManager.onWindowResize(action, this);
8750 var tm = typeof monitorScroll;
8751 if(tm != 'undefined'){
8752 Roo.EventManager.on(window, 'scroll', action, this,
8753 {buffer: tm == 'number' ? monitorScroll : 50});
8755 action.call(this); // align immediately
8759 * Clears any opacity settings from this element. Required in some cases for IE.
8760 * @return {Roo.Element} this
8762 clearOpacity : function(){
8763 if (window.ActiveXObject) {
8764 if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
8765 this.dom.style.filter = "";
8768 this.dom.style.opacity = "";
8769 this.dom.style["-moz-opacity"] = "";
8770 this.dom.style["-khtml-opacity"] = "";
8776 * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
8777 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8778 * @return {Roo.Element} this
8780 hide : function(animate){
8781 this.setVisible(false, this.preanim(arguments, 0));
8786 * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
8787 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8788 * @return {Roo.Element} this
8790 show : function(animate){
8791 this.setVisible(true, this.preanim(arguments, 0));
8796 * @private Test if size has a unit, otherwise appends the default
8798 addUnits : function(size){
8799 return Roo.Element.addUnits(size, this.defaultUnit);
8803 * Temporarily enables offsets (width,height,x,y) for an element with display:none, use endMeasure() when done.
8804 * @return {Roo.Element} this
8806 beginMeasure : function(){
8808 if(el.offsetWidth || el.offsetHeight){
8809 return this; // offsets work already
8812 var p = this.dom, b = document.body; // start with this element
8813 while((!el.offsetWidth && !el.offsetHeight) && p && p.tagName && p != b){
8814 var pe = Roo.get(p);
8815 if(pe.getStyle('display') == 'none'){
8816 changed.push({el: p, visibility: pe.getStyle("visibility")});
8817 p.style.visibility = "hidden";
8818 p.style.display = "block";
8822 this._measureChanged = changed;
8828 * Restores displays to before beginMeasure was called
8829 * @return {Roo.Element} this
8831 endMeasure : function(){
8832 var changed = this._measureChanged;
8834 for(var i = 0, len = changed.length; i < len; i++) {
8836 r.el.style.visibility = r.visibility;
8837 r.el.style.display = "none";
8839 this._measureChanged = null;
8845 * Update the innerHTML of this element, optionally searching for and processing scripts
8846 * @param {String} html The new HTML
8847 * @param {Boolean} loadScripts (optional) true to look for and process scripts
8848 * @param {Function} callback For async script loading you can be noticed when the update completes
8849 * @return {Roo.Element} this
8851 update : function(html, loadScripts, callback){
8852 if(typeof html == "undefined"){
8855 if(loadScripts !== true){
8856 this.dom.innerHTML = html;
8857 if(typeof callback == "function"){
8865 html += '<span id="' + id + '"></span>';
8867 E.onAvailable(id, function(){
8868 var hd = document.getElementsByTagName("head")[0];
8869 var re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
8870 var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
8871 var typeRe = /\stype=([\'\"])(.*?)\1/i;
8874 while(match = re.exec(html)){
8875 var attrs = match[1];
8876 var srcMatch = attrs ? attrs.match(srcRe) : false;
8877 if(srcMatch && srcMatch[2]){
8878 var s = document.createElement("script");
8879 s.src = srcMatch[2];
8880 var typeMatch = attrs.match(typeRe);
8881 if(typeMatch && typeMatch[2]){
8882 s.type = typeMatch[2];
8885 }else if(match[2] && match[2].length > 0){
8886 if(window.execScript) {
8887 window.execScript(match[2]);
8895 window.eval(match[2]);
8899 var el = document.getElementById(id);
8900 if(el){el.parentNode.removeChild(el);}
8901 if(typeof callback == "function"){
8905 dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
8910 * Direct access to the UpdateManager update() method (takes the same parameters).
8911 * @param {String/Function} url The url for this request or a function to call to get the url
8912 * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
8913 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
8914 * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
8915 * @return {Roo.Element} this
8918 var um = this.getUpdateManager();
8919 um.update.apply(um, arguments);
8924 * Gets this element's UpdateManager
8925 * @return {Roo.UpdateManager} The UpdateManager
8927 getUpdateManager : function(){
8928 if(!this.updateManager){
8929 this.updateManager = new Roo.UpdateManager(this);
8931 return this.updateManager;
8935 * Disables text selection for this element (normalized across browsers)
8936 * @return {Roo.Element} this
8938 unselectable : function(){
8939 this.dom.unselectable = "on";
8940 this.swallowEvent("selectstart", true);
8941 this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
8942 this.addClass("x-unselectable");
8947 * Calculates the x, y to center this element on the screen
8948 * @return {Array} The x, y values [x, y]
8950 getCenterXY : function(){
8951 return this.getAlignToXY(document, 'c-c');
8955 * Centers the Element in either the viewport, or another Element.
8956 * @param {String/HTMLElement/Roo.Element} centerIn (optional) The element in which to center the element.
8958 center : function(centerIn){
8959 this.alignTo(centerIn || document, 'c-c');
8964 * Tests various css rules/browsers to determine if this element uses a border box
8967 isBorderBox : function(){
8968 return noBoxAdjust[this.dom.tagName.toLowerCase()] || Roo.isBorderBox;
8972 * Return a box {x, y, width, height} that can be used to set another elements
8973 * size/location to match this element.
8974 * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
8975 * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
8976 * @return {Object} box An object in the format {x, y, width, height}
8978 getBox : function(contentBox, local){
8983 var left = parseInt(this.getStyle("left"), 10) || 0;
8984 var top = parseInt(this.getStyle("top"), 10) || 0;
8987 var el = this.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
8989 bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
8991 var l = this.getBorderWidth("l")+this.getPadding("l");
8992 var r = this.getBorderWidth("r")+this.getPadding("r");
8993 var t = this.getBorderWidth("t")+this.getPadding("t");
8994 var b = this.getBorderWidth("b")+this.getPadding("b");
8995 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)};
8997 bx.right = bx.x + bx.width;
8998 bx.bottom = bx.y + bx.height;
9003 * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
9004 for more information about the sides.
9005 * @param {String} sides
9008 getFrameWidth : function(sides, onlyContentBox){
9009 return onlyContentBox && Roo.isBorderBox ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
9013 * 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.
9014 * @param {Object} box The box to fill {x, y, width, height}
9015 * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
9016 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9017 * @return {Roo.Element} this
9019 setBox : function(box, adjust, animate){
9020 var w = box.width, h = box.height;
9021 if((adjust && !this.autoBoxAdjust) && !this.isBorderBox()){
9022 w -= (this.getBorderWidth("lr") + this.getPadding("lr"));
9023 h -= (this.getBorderWidth("tb") + this.getPadding("tb"));
9025 this.setBounds(box.x, box.y, w, h, this.preanim(arguments, 2));
9030 * Forces the browser to repaint this element
9031 * @return {Roo.Element} this
9033 repaint : function(){
9035 this.addClass("x-repaint");
9036 setTimeout(function(){
9037 Roo.get(dom).removeClass("x-repaint");
9043 * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
9044 * then it returns the calculated width of the sides (see getPadding)
9045 * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
9046 * @return {Object/Number}
9048 getMargins : function(side){
9051 top: parseInt(this.getStyle("margin-top"), 10) || 0,
9052 left: parseInt(this.getStyle("margin-left"), 10) || 0,
9053 bottom: parseInt(this.getStyle("margin-bottom"), 10) || 0,
9054 right: parseInt(this.getStyle("margin-right"), 10) || 0
9057 return this.addStyles(side, El.margins);
9062 addStyles : function(sides, styles){
9064 for(var i = 0, len = sides.length; i < len; i++){
9065 v = this.getStyle(styles[sides.charAt(i)]);
9067 w = parseInt(v, 10);
9075 * Creates a proxy element of this element
9076 * @param {String/Object} config The class name of the proxy element or a DomHelper config object
9077 * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
9078 * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
9079 * @return {Roo.Element} The new proxy element
9081 createProxy : function(config, renderTo, matchBox){
9083 renderTo = Roo.getDom(renderTo);
9085 renderTo = document.body;
9087 config = typeof config == "object" ?
9088 config : {tag : "div", cls: config};
9089 var proxy = Roo.DomHelper.append(renderTo, config, true);
9091 proxy.setBox(this.getBox());
9097 * Puts a mask over this element to disable user interaction. Requires core.css.
9098 * This method can only be applied to elements which accept child nodes.
9099 * @param {String} msg (optional) A message to display in the mask
9100 * @param {String} msgCls (optional) A css class to apply to the msg element
9101 * @return {Element} The mask element
9103 mask : function(msg, msgCls)
9105 if(this.getStyle("position") == "static" && this.dom.tagName !== 'BODY'){
9106 this.setStyle("position", "relative");
9109 this._mask = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask"}, true);
9111 this.addClass("x-masked");
9112 this._mask.setDisplayed(true);
9117 while (dom && dom.style) {
9118 if (!isNaN(parseInt(dom.style.zIndex))) {
9119 z = Math.max(z, parseInt(dom.style.zIndex));
9121 dom = dom.parentNode;
9123 // if we are masking the body - then it hides everything..
9124 if (this.dom == document.body) {
9126 this._mask.setWidth(Roo.lib.Dom.getDocumentWidth());
9127 this._mask.setHeight(Roo.lib.Dom.getDocumentHeight());
9130 if(typeof msg == 'string'){
9132 this._maskMsg = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask-msg", cn:{tag:'div'}}, true);
9134 var mm = this._maskMsg;
9135 mm.dom.className = msgCls ? "roo-el-mask-msg " + msgCls : "roo-el-mask-msg";
9136 if (mm.dom.firstChild) { // weird IE issue?
9137 mm.dom.firstChild.innerHTML = msg;
9139 mm.setDisplayed(true);
9141 mm.setStyle('z-index', z + 102);
9143 if(Roo.isIE && !(Roo.isIE7 && Roo.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
9144 this._mask.setHeight(this.getHeight());
9146 this._mask.setStyle('z-index', z + 100);
9152 * Removes a previously applied mask. If removeEl is true the mask overlay is destroyed, otherwise
9153 * it is cached for reuse.
9155 unmask : function(removeEl){
9157 if(removeEl === true){
9158 this._mask.remove();
9161 this._maskMsg.remove();
9162 delete this._maskMsg;
9165 this._mask.setDisplayed(false);
9167 this._maskMsg.setDisplayed(false);
9171 this.removeClass("x-masked");
9175 * Returns true if this element is masked
9178 isMasked : function(){
9179 return this._mask && this._mask.isVisible();
9183 * Creates an iframe shim for this element to keep selects and other windowed objects from
9185 * @return {Roo.Element} The new shim element
9187 createShim : function(){
9188 var el = document.createElement('iframe');
9189 el.frameBorder = 'no';
9190 el.className = 'roo-shim';
9191 if(Roo.isIE && Roo.isSecure){
9192 el.src = Roo.SSL_SECURE_URL;
9194 var shim = Roo.get(this.dom.parentNode.insertBefore(el, this.dom));
9195 shim.autoBoxAdjust = false;
9200 * Removes this element from the DOM and deletes it from the cache
9202 remove : function(){
9203 if(this.dom.parentNode){
9204 this.dom.parentNode.removeChild(this.dom);
9206 delete El.cache[this.dom.id];
9210 * Sets up event handlers to add and remove a css class when the mouse is over this element
9211 * @param {String} className
9212 * @param {Boolean} preventFlicker (optional) If set to true, it prevents flickering by filtering
9213 * mouseout events for children elements
9214 * @return {Roo.Element} this
9216 addClassOnOver : function(className, preventFlicker){
9217 this.on("mouseover", function(){
9218 Roo.fly(this, '_internal').addClass(className);
9220 var removeFn = function(e){
9221 if(preventFlicker !== true || !e.within(this, true)){
9222 Roo.fly(this, '_internal').removeClass(className);
9225 this.on("mouseout", removeFn, this.dom);
9230 * Sets up event handlers to add and remove a css class when this element has the focus
9231 * @param {String} className
9232 * @return {Roo.Element} this
9234 addClassOnFocus : function(className){
9235 this.on("focus", function(){
9236 Roo.fly(this, '_internal').addClass(className);
9238 this.on("blur", function(){
9239 Roo.fly(this, '_internal').removeClass(className);
9244 * 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)
9245 * @param {String} className
9246 * @return {Roo.Element} this
9248 addClassOnClick : function(className){
9250 this.on("mousedown", function(){
9251 Roo.fly(dom, '_internal').addClass(className);
9252 var d = Roo.get(document);
9253 var fn = function(){
9254 Roo.fly(dom, '_internal').removeClass(className);
9255 d.removeListener("mouseup", fn);
9257 d.on("mouseup", fn);
9263 * Stops the specified event from bubbling and optionally prevents the default action
9264 * @param {String} eventName
9265 * @param {Boolean} preventDefault (optional) true to prevent the default action too
9266 * @return {Roo.Element} this
9268 swallowEvent : function(eventName, preventDefault){
9269 var fn = function(e){
9270 e.stopPropagation();
9275 if(eventName instanceof Array){
9276 for(var i = 0, len = eventName.length; i < len; i++){
9277 this.on(eventName[i], fn);
9281 this.on(eventName, fn);
9288 fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate
9291 * Sizes this element to its parent element's dimensions performing
9292 * neccessary box adjustments.
9293 * @param {Boolean} monitorResize (optional) If true maintains the fit when the browser window is resized.
9294 * @param {String/HTMLElment/Element} targetParent (optional) The target parent, default to the parentNode.
9295 * @return {Roo.Element} this
9297 fitToParent : function(monitorResize, targetParent) {
9298 Roo.EventManager.removeResizeListener(this.fitToParentDelegate); // always remove previous fitToParent delegate from onWindowResize
9299 this.fitToParentDelegate = Roo.emptyFn; // remove reference to previous delegate
9300 if (monitorResize === true && !this.dom.parentNode) { // check if this Element still exists
9303 var p = Roo.get(targetParent || this.dom.parentNode);
9304 this.setSize(p.getComputedWidth() - p.getFrameWidth('lr'), p.getComputedHeight() - p.getFrameWidth('tb'));
9305 if (monitorResize === true) {
9306 this.fitToParentDelegate = this.fitToParent.createDelegate(this, [true, targetParent]);
9307 Roo.EventManager.onWindowResize(this.fitToParentDelegate);
9313 * Gets the next sibling, skipping text nodes
9314 * @return {HTMLElement} The next sibling or null
9316 getNextSibling : function(){
9317 var n = this.dom.nextSibling;
9318 while(n && n.nodeType != 1){
9325 * Gets the previous sibling, skipping text nodes
9326 * @return {HTMLElement} The previous sibling or null
9328 getPrevSibling : function(){
9329 var n = this.dom.previousSibling;
9330 while(n && n.nodeType != 1){
9331 n = n.previousSibling;
9338 * Appends the passed element(s) to this element
9339 * @param {String/HTMLElement/Array/Element/CompositeElement} el
9340 * @return {Roo.Element} this
9342 appendChild: function(el){
9349 * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
9350 * @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be
9351 * automatically generated with the specified attributes.
9352 * @param {HTMLElement} insertBefore (optional) a child element of this element
9353 * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
9354 * @return {Roo.Element} The new child element
9356 createChild: function(config, insertBefore, returnDom){
9357 config = config || {tag:'div'};
9359 return Roo.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
9361 return Roo.DomHelper[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config, returnDom !== true);
9365 * Appends this element to the passed element
9366 * @param {String/HTMLElement/Element} el The new parent element
9367 * @return {Roo.Element} this
9369 appendTo: function(el){
9370 el = Roo.getDom(el);
9371 el.appendChild(this.dom);
9376 * Inserts this element before the passed element in the DOM
9377 * @param {String/HTMLElement/Element} el The element to insert before
9378 * @return {Roo.Element} this
9380 insertBefore: function(el){
9381 el = Roo.getDom(el);
9382 el.parentNode.insertBefore(this.dom, el);
9387 * Inserts this element after the passed element in the DOM
9388 * @param {String/HTMLElement/Element} el The element to insert after
9389 * @return {Roo.Element} this
9391 insertAfter: function(el){
9392 el = Roo.getDom(el);
9393 el.parentNode.insertBefore(this.dom, el.nextSibling);
9398 * Inserts (or creates) an element (or DomHelper config) as the first child of the this element
9399 * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
9400 * @return {Roo.Element} The new child
9402 insertFirst: function(el, returnDom){
9404 if(typeof el == 'object' && !el.nodeType){ // dh config
9405 return this.createChild(el, this.dom.firstChild, returnDom);
9407 el = Roo.getDom(el);
9408 this.dom.insertBefore(el, this.dom.firstChild);
9409 return !returnDom ? Roo.get(el) : el;
9414 * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
9415 * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
9416 * @param {String} where (optional) 'before' or 'after' defaults to before
9417 * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
9418 * @return {Roo.Element} the inserted Element
9420 insertSibling: function(el, where, returnDom){
9421 where = where ? where.toLowerCase() : 'before';
9423 var rt, refNode = where == 'before' ? this.dom : this.dom.nextSibling;
9425 if(typeof el == 'object' && !el.nodeType){ // dh config
9426 if(where == 'after' && !this.dom.nextSibling){
9427 rt = Roo.DomHelper.append(this.dom.parentNode, el, !returnDom);
9429 rt = Roo.DomHelper[where == 'after' ? 'insertAfter' : 'insertBefore'](this.dom, el, !returnDom);
9433 rt = this.dom.parentNode.insertBefore(Roo.getDom(el),
9434 where == 'before' ? this.dom : this.dom.nextSibling);
9443 * Creates and wraps this element with another element
9444 * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
9445 * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
9446 * @return {HTMLElement/Element} The newly created wrapper element
9448 wrap: function(config, returnDom){
9450 config = {tag: "div"};
9452 var newEl = Roo.DomHelper.insertBefore(this.dom, config, !returnDom);
9453 newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
9458 * Replaces the passed element with this element
9459 * @param {String/HTMLElement/Element} el The element to replace
9460 * @return {Roo.Element} this
9462 replace: function(el){
9464 this.insertBefore(el);
9470 * Inserts an html fragment into this element
9471 * @param {String} where Where to insert the html in relation to the this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
9472 * @param {String} html The HTML fragment
9473 * @param {Boolean} returnEl True to return an Roo.Element
9474 * @return {HTMLElement/Roo.Element} The inserted node (or nearest related if more than 1 inserted)
9476 insertHtml : function(where, html, returnEl){
9477 var el = Roo.DomHelper.insertHtml(where, this.dom, html);
9478 return returnEl ? Roo.get(el) : el;
9482 * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
9483 * @param {Object} o The object with the attributes
9484 * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
9485 * @return {Roo.Element} this
9487 set : function(o, useSet){
9489 useSet = typeof useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
9491 if(attr == "style" || typeof o[attr] == "function") { continue; }
9493 el.className = o["cls"];
9496 el.setAttribute(attr, o[attr]);
9503 Roo.DomHelper.applyStyles(el, o.style);
9509 * Convenience method for constructing a KeyMap
9510 * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
9511 * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
9512 * @param {Function} fn The function to call
9513 * @param {Object} scope (optional) The scope of the function
9514 * @return {Roo.KeyMap} The KeyMap created
9516 addKeyListener : function(key, fn, scope){
9518 if(typeof key != "object" || key instanceof Array){
9534 return new Roo.KeyMap(this, config);
9538 * Creates a KeyMap for this element
9539 * @param {Object} config The KeyMap config. See {@link Roo.KeyMap} for more details
9540 * @return {Roo.KeyMap} The KeyMap created
9542 addKeyMap : function(config){
9543 return new Roo.KeyMap(this, config);
9547 * Returns true if this element is scrollable.
9550 isScrollable : function(){
9552 return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
9556 * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
9557 * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
9558 * @param {Number} value The new scroll value
9559 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9560 * @return {Element} this
9563 scrollTo : function(side, value, animate){
9564 var prop = side.toLowerCase() == "left" ? "scrollLeft" : "scrollTop";
9566 this.dom[prop] = value;
9568 var to = prop == "scrollLeft" ? [value, this.dom.scrollTop] : [this.dom.scrollLeft, value];
9569 this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
9575 * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
9576 * within this element's scrollable range.
9577 * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
9578 * @param {Number} distance How far to scroll the element in pixels
9579 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9580 * @return {Boolean} Returns true if a scroll was triggered or false if the element
9581 * was scrolled as far as it could go.
9583 scroll : function(direction, distance, animate){
9584 if(!this.isScrollable()){
9588 var l = el.scrollLeft, t = el.scrollTop;
9589 var w = el.scrollWidth, h = el.scrollHeight;
9590 var cw = el.clientWidth, ch = el.clientHeight;
9591 direction = direction.toLowerCase();
9592 var scrolled = false;
9593 var a = this.preanim(arguments, 2);
9598 var v = Math.min(l + distance, w-cw);
9599 this.scrollTo("left", v, a);
9606 var v = Math.max(l - distance, 0);
9607 this.scrollTo("left", v, a);
9615 var v = Math.max(t - distance, 0);
9616 this.scrollTo("top", v, a);
9624 var v = Math.min(t + distance, h-ch);
9625 this.scrollTo("top", v, a);
9634 * Translates the passed page coordinates into left/top css values for this element
9635 * @param {Number/Array} x The page x or an array containing [x, y]
9636 * @param {Number} y The page y
9637 * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
9639 translatePoints : function(x, y){
9640 if(typeof x == 'object' || x instanceof Array){
9643 var p = this.getStyle('position');
9644 var o = this.getXY();
9646 var l = parseInt(this.getStyle('left'), 10);
9647 var t = parseInt(this.getStyle('top'), 10);
9650 l = (p == "relative") ? 0 : this.dom.offsetLeft;
9653 t = (p == "relative") ? 0 : this.dom.offsetTop;
9656 return {left: (x - o[0] + l), top: (y - o[1] + t)};
9660 * Returns the current scroll position of the element.
9661 * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
9663 getScroll : function(){
9664 var d = this.dom, doc = document;
9665 if(d == doc || d == doc.body){
9666 var l = window.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0;
9667 var t = window.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop || 0;
9668 return {left: l, top: t};
9670 return {left: d.scrollLeft, top: d.scrollTop};
9675 * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
9676 * are convert to standard 6 digit hex color.
9677 * @param {String} attr The css attribute
9678 * @param {String} defaultValue The default value to use when a valid color isn't found
9679 * @param {String} prefix (optional) defaults to #. Use an empty string when working with
9682 getColor : function(attr, defaultValue, prefix){
9683 var v = this.getStyle(attr);
9684 if(!v || v == "transparent" || v == "inherit") {
9685 return defaultValue;
9687 var color = typeof prefix == "undefined" ? "#" : prefix;
9688 if(v.substr(0, 4) == "rgb("){
9689 var rvs = v.slice(4, v.length -1).split(",");
9690 for(var i = 0; i < 3; i++){
9691 var h = parseInt(rvs[i]).toString(16);
9698 if(v.substr(0, 1) == "#"){
9700 for(var i = 1; i < 4; i++){
9701 var c = v.charAt(i);
9704 }else if(v.length == 7){
9705 color += v.substr(1);
9709 return(color.length > 5 ? color.toLowerCase() : defaultValue);
9713 * Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a
9714 * gradient background, rounded corners and a 4-way shadow.
9715 * @param {String} class (optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box').
9716 * Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
9717 * so if you supply an alternate base class, make sure you also supply all of the necessary rules.
9718 * @return {Roo.Element} this
9720 boxWrap : function(cls){
9721 cls = cls || 'x-box';
9722 var el = Roo.get(this.insertHtml('beforeBegin', String.format('<div class="{0}">'+El.boxMarkup+'</div>', cls)));
9723 el.child('.'+cls+'-mc').dom.appendChild(this.dom);
9728 * Returns the value of a namespaced attribute from the element's underlying DOM node.
9729 * @param {String} namespace The namespace in which to look for the attribute
9730 * @param {String} name The attribute name
9731 * @return {String} The attribute value
9733 getAttributeNS : Roo.isIE ? function(ns, name){
9735 var type = typeof d[ns+":"+name];
9736 if(type != 'undefined' && type != 'unknown'){
9737 return d[ns+":"+name];
9740 } : function(ns, name){
9742 return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
9747 * Sets or Returns the value the dom attribute value
9748 * @param {String|Object} name The attribute name (or object to set multiple attributes)
9749 * @param {String} value (optional) The value to set the attribute to
9750 * @return {String} The attribute value
9752 attr : function(name){
9753 if (arguments.length > 1) {
9754 this.dom.setAttribute(name, arguments[1]);
9755 return arguments[1];
9757 if (typeof(name) == 'object') {
9758 for(var i in name) {
9759 this.attr(i, name[i]);
9765 if (!this.dom.hasAttribute(name)) {
9768 return this.dom.getAttribute(name);
9775 var ep = El.prototype;
9778 * Appends an event handler (Shorthand for addListener)
9779 * @param {String} eventName The type of event to append
9780 * @param {Function} fn The method the event invokes
9781 * @param {Object} scope (optional) The scope (this object) of the fn
9782 * @param {Object} options (optional)An object with standard {@link Roo.EventManager#addListener} options
9785 ep.on = ep.addListener;
9787 ep.mon = ep.addListener;
9790 * Removes an event handler from this element (shorthand for removeListener)
9791 * @param {String} eventName the type of event to remove
9792 * @param {Function} fn the method the event invokes
9793 * @return {Roo.Element} this
9796 ep.un = ep.removeListener;
9799 * true to automatically adjust width and height settings for box-model issues (default to true)
9801 ep.autoBoxAdjust = true;
9804 El.unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;
9807 El.addUnits = function(v, defaultUnit){
9808 if(v === "" || v == "auto"){
9811 if(v === undefined){
9814 if(typeof v == "number" || !El.unitPattern.test(v)){
9815 return v + (defaultUnit || 'px');
9820 // special markup used throughout Roo when box wrapping elements
9821 El.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>';
9823 * Visibility mode constant - Use visibility to hide element
9829 * Visibility mode constant - Use display to hide element
9835 El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
9836 El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
9837 El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};
9849 * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
9850 * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
9851 * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
9852 * @return {Element} The Element object
9855 El.get = function(el){
9857 if(!el){ return null; }
9858 if(typeof el == "string"){ // element id
9859 if(!(elm = document.getElementById(el))){
9862 if(ex = El.cache[el]){
9865 ex = El.cache[el] = new El(elm);
9868 }else if(el.tagName){ // dom element
9872 if(ex = El.cache[id]){
9875 ex = El.cache[id] = new El(el);
9878 }else if(el instanceof El){
9880 el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
9881 // catch case where it hasn't been appended
9882 El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
9885 }else if(el.isComposite){
9887 }else if(el instanceof Array){
9888 return El.select(el);
9889 }else if(el == document){
9890 // create a bogus element object representing the document object
9892 var f = function(){};
9893 f.prototype = El.prototype;
9895 docEl.dom = document;
9903 El.uncache = function(el){
9904 for(var i = 0, a = arguments, len = a.length; i < len; i++) {
9906 delete El.cache[a[i].id || a[i]];
9912 // Garbage collection - uncache elements/purge listeners on orphaned elements
9913 // so we don't hold a reference and cause the browser to retain them
9914 El.garbageCollect = function(){
9915 if(!Roo.enableGarbageCollector){
9916 clearInterval(El.collectorThread);
9919 for(var eid in El.cache){
9920 var el = El.cache[eid], d = el.dom;
9921 // -------------------------------------------------------
9922 // Determining what is garbage:
9923 // -------------------------------------------------------
9925 // dom node is null, definitely garbage
9926 // -------------------------------------------------------
9928 // no parentNode == direct orphan, definitely garbage
9929 // -------------------------------------------------------
9930 // !d.offsetParent && !document.getElementById(eid)
9931 // display none elements have no offsetParent so we will
9932 // also try to look it up by it's id. However, check
9933 // offsetParent first so we don't do unneeded lookups.
9934 // This enables collection of elements that are not orphans
9935 // directly, but somewhere up the line they have an orphan
9937 // -------------------------------------------------------
9938 if(!d || !d.parentNode || (!d.offsetParent && !document.getElementById(eid))){
9939 delete El.cache[eid];
9940 if(d && Roo.enableListenerCollection){
9946 El.collectorThreadId = setInterval(El.garbageCollect, 30000);
9950 El.Flyweight = function(dom){
9953 El.Flyweight.prototype = El.prototype;
9955 El._flyweights = {};
9957 * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
9958 * the dom node can be overwritten by other code.
9959 * @param {String/HTMLElement} el The dom node or id
9960 * @param {String} named (optional) Allows for creation of named reusable flyweights to
9961 * prevent conflicts (e.g. internally Roo uses "_internal")
9963 * @return {Element} The shared Element object
9965 El.fly = function(el, named){
9966 named = named || '_global';
9967 el = Roo.getDom(el);
9971 if(!El._flyweights[named]){
9972 El._flyweights[named] = new El.Flyweight();
9974 El._flyweights[named].dom = el;
9975 return El._flyweights[named];
9979 * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
9980 * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
9981 * Shorthand of {@link Roo.Element#get}
9982 * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
9983 * @return {Element} The Element object
9989 * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
9990 * the dom node can be overwritten by other code.
9991 * Shorthand of {@link Roo.Element#fly}
9992 * @param {String/HTMLElement} el The dom node or id
9993 * @param {String} named (optional) Allows for creation of named reusable flyweights to
9994 * prevent conflicts (e.g. internally Roo uses "_internal")
9996 * @return {Element} The shared Element object
10002 // speedy lookup for elements never to box adjust
10003 var noBoxAdjust = Roo.isStrict ? {
10006 input:1, select:1, textarea:1
10008 if(Roo.isIE || Roo.isGecko){
10009 noBoxAdjust['button'] = 1;
10013 Roo.EventManager.on(window, 'unload', function(){
10015 delete El._flyweights;
10023 Roo.Element.selectorFunction = Roo.DomQuery.select;
10026 Roo.Element.select = function(selector, unique, root){
10028 if(typeof selector == "string"){
10029 els = Roo.Element.selectorFunction(selector, root);
10030 }else if(selector.length !== undefined){
10033 throw "Invalid selector";
10035 if(unique === true){
10036 return new Roo.CompositeElement(els);
10038 return new Roo.CompositeElementLite(els);
10042 * Selects elements based on the passed CSS selector to enable working on them as 1.
10043 * @param {String/Array} selector The CSS selector or an array of elements
10044 * @param {Boolean} unique (optional) true to create a unique Roo.Element for each element (defaults to a shared flyweight object)
10045 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
10046 * @return {CompositeElementLite/CompositeElement}
10050 Roo.select = Roo.Element.select;
10067 * Ext JS Library 1.1.1
10068 * Copyright(c) 2006-2007, Ext JS, LLC.
10070 * Originally Released Under LGPL - original licence link has changed is not relivant.
10073 * <script type="text/javascript">
10078 //Notifies Element that fx methods are available
10079 Roo.enableFx = true;
10083 * <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied
10084 * to the {@link Roo.Element} interface when included, so all effects calls should be performed via Element.
10085 * Conversely, since the effects are not actually defined in Element, Roo.Fx <b>must</b> be included in order for the
10086 * Element effects to work.</p><br/>
10088 * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
10089 * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
10090 * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
10091 * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason,
10092 * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
10093 * expected results and should be done with care.</p><br/>
10095 * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
10096 * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p>
10099 ----- -----------------------------
10100 tl The top left corner
10101 t The center of the top edge
10102 tr The top right corner
10103 l The center of the left edge
10104 r The center of the right edge
10105 bl The bottom left corner
10106 b The center of the bottom edge
10107 br The bottom right corner
10109 * <b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
10110 * below are common options that can be passed to any Fx method.</b>
10111 * @cfg {Function} callback A function called when the effect is finished
10112 * @cfg {Object} scope The scope of the effect function
10113 * @cfg {String} easing A valid Easing value for the effect
10114 * @cfg {String} afterCls A css class to apply after the effect
10115 * @cfg {Number} duration The length of time (in seconds) that the effect should last
10116 * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
10117 * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to
10118 * effects that end with the element being visually hidden, ignored otherwise)
10119 * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or
10120 * a function which returns such a specification that will be applied to the Element after the effect finishes
10121 * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
10122 * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
10123 * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
10127 * Slides the element into view. An anchor point can be optionally passed to set the point of
10128 * origin for the slide effect. This function automatically handles wrapping the element with
10129 * a fixed-size container if needed. See the Fx class overview for valid anchor point options.
10132 // default: slide the element in from the top
10135 // custom: slide the element in from the right with a 2-second duration
10136 el.slideIn('r', { duration: 2 });
10138 // common config options shown with default values
10144 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
10145 * @param {Object} options (optional) Object literal with any of the Fx config options
10146 * @return {Roo.Element} The Element
10148 slideIn : function(anchor, o){
10149 var el = this.getFxEl();
10152 el.queueFx(o, function(){
10154 anchor = anchor || "t";
10156 // fix display to visibility
10159 // restore values after effect
10160 var r = this.getFxRestore();
10161 var b = this.getBox();
10162 // fixed size for slide
10166 var wrap = this.fxWrap(r.pos, o, "hidden");
10168 var st = this.dom.style;
10169 st.visibility = "visible";
10170 st.position = "absolute";
10172 // clear out temp styles after slide and unwrap
10173 var after = function(){
10174 el.fxUnwrap(wrap, r.pos, o);
10175 st.width = r.width;
10176 st.height = r.height;
10179 // time to calc the positions
10180 var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};
10182 switch(anchor.toLowerCase()){
10184 wrap.setSize(b.width, 0);
10185 st.left = st.bottom = "0";
10189 wrap.setSize(0, b.height);
10190 st.right = st.top = "0";
10194 wrap.setSize(0, b.height);
10195 wrap.setX(b.right);
10196 st.left = st.top = "0";
10197 a = {width: bw, points: pt};
10200 wrap.setSize(b.width, 0);
10201 wrap.setY(b.bottom);
10202 st.left = st.top = "0";
10203 a = {height: bh, points: pt};
10206 wrap.setSize(0, 0);
10207 st.right = st.bottom = "0";
10208 a = {width: bw, height: bh};
10211 wrap.setSize(0, 0);
10212 wrap.setY(b.y+b.height);
10213 st.right = st.top = "0";
10214 a = {width: bw, height: bh, points: pt};
10217 wrap.setSize(0, 0);
10218 wrap.setXY([b.right, b.bottom]);
10219 st.left = st.top = "0";
10220 a = {width: bw, height: bh, points: pt};
10223 wrap.setSize(0, 0);
10224 wrap.setX(b.x+b.width);
10225 st.left = st.bottom = "0";
10226 a = {width: bw, height: bh, points: pt};
10229 this.dom.style.visibility = "visible";
10232 arguments.callee.anim = wrap.fxanim(a,
10242 * Slides the element out of view. An anchor point can be optionally passed to set the end point
10243 * for the slide effect. When the effect is completed, the element will be hidden (visibility =
10244 * 'hidden') but block elements will still take up space in the document. The element must be removed
10245 * from the DOM using the 'remove' config option if desired. This function automatically handles
10246 * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
10249 // default: slide the element out to the top
10252 // custom: slide the element out to the right with a 2-second duration
10253 el.slideOut('r', { duration: 2 });
10255 // common config options shown with default values
10263 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
10264 * @param {Object} options (optional) Object literal with any of the Fx config options
10265 * @return {Roo.Element} The Element
10267 slideOut : function(anchor, o){
10268 var el = this.getFxEl();
10271 el.queueFx(o, function(){
10273 anchor = anchor || "t";
10275 // restore values after effect
10276 var r = this.getFxRestore();
10278 var b = this.getBox();
10279 // fixed size for slide
10283 var wrap = this.fxWrap(r.pos, o, "visible");
10285 var st = this.dom.style;
10286 st.visibility = "visible";
10287 st.position = "absolute";
10291 var after = function(){
10293 el.setDisplayed(false);
10298 el.fxUnwrap(wrap, r.pos, o);
10300 st.width = r.width;
10301 st.height = r.height;
10306 var a, zero = {to: 0};
10307 switch(anchor.toLowerCase()){
10309 st.left = st.bottom = "0";
10310 a = {height: zero};
10313 st.right = st.top = "0";
10317 st.left = st.top = "0";
10318 a = {width: zero, points: {to:[b.right, b.y]}};
10321 st.left = st.top = "0";
10322 a = {height: zero, points: {to:[b.x, b.bottom]}};
10325 st.right = st.bottom = "0";
10326 a = {width: zero, height: zero};
10329 st.right = st.top = "0";
10330 a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
10333 st.left = st.top = "0";
10334 a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
10337 st.left = st.bottom = "0";
10338 a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
10342 arguments.callee.anim = wrap.fxanim(a,
10352 * Fades the element out while slowly expanding it in all directions. When the effect is completed, the
10353 * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
10354 * The element must be removed from the DOM using the 'remove' config option if desired.
10360 // common config options shown with default values
10368 * @param {Object} options (optional) Object literal with any of the Fx config options
10369 * @return {Roo.Element} The Element
10371 puff : function(o){
10372 var el = this.getFxEl();
10375 el.queueFx(o, function(){
10376 this.clearOpacity();
10379 // restore values after effect
10380 var r = this.getFxRestore();
10381 var st = this.dom.style;
10383 var after = function(){
10385 el.setDisplayed(false);
10392 el.setPositioning(r.pos);
10393 st.width = r.width;
10394 st.height = r.height;
10399 var width = this.getWidth();
10400 var height = this.getHeight();
10402 arguments.callee.anim = this.fxanim({
10403 width : {to: this.adjustWidth(width * 2)},
10404 height : {to: this.adjustHeight(height * 2)},
10405 points : {by: [-(width * .5), -(height * .5)]},
10407 fontSize: {to:200, unit: "%"}
10418 * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
10419 * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
10420 * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
10426 // all config options shown with default values
10434 * @param {Object} options (optional) Object literal with any of the Fx config options
10435 * @return {Roo.Element} The Element
10437 switchOff : function(o){
10438 var el = this.getFxEl();
10441 el.queueFx(o, function(){
10442 this.clearOpacity();
10445 // restore values after effect
10446 var r = this.getFxRestore();
10447 var st = this.dom.style;
10449 var after = function(){
10451 el.setDisplayed(false);
10457 el.setPositioning(r.pos);
10458 st.width = r.width;
10459 st.height = r.height;
10464 this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
10465 this.clearOpacity();
10469 points:{by:[0, this.getHeight() * .5]}
10470 }, o, 'motion', 0.3, 'easeIn', after);
10471 }).defer(100, this);
10478 * Highlights the Element by setting a color (applies to the background-color by default, but can be
10479 * changed using the "attr" config option) and then fading back to the original color. If no original
10480 * color is available, you should provide the "endColor" config option which will be cleared after the animation.
10483 // default: highlight background to yellow
10486 // custom: highlight foreground text to blue for 2 seconds
10487 el.highlight("0000ff", { attr: 'color', duration: 2 });
10489 // common config options shown with default values
10490 el.highlight("ffff9c", {
10491 attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
10492 endColor: (current color) or "ffffff",
10497 * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
10498 * @param {Object} options (optional) Object literal with any of the Fx config options
10499 * @return {Roo.Element} The Element
10501 highlight : function(color, o){
10502 var el = this.getFxEl();
10505 el.queueFx(o, function(){
10506 color = color || "ffff9c";
10507 attr = o.attr || "backgroundColor";
10509 this.clearOpacity();
10512 var origColor = this.getColor(attr);
10513 var restoreColor = this.dom.style[attr];
10514 endColor = (o.endColor || origColor) || "ffffff";
10516 var after = function(){
10517 el.dom.style[attr] = restoreColor;
10522 a[attr] = {from: color, to: endColor};
10523 arguments.callee.anim = this.fxanim(a,
10533 * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
10536 // default: a single light blue ripple
10539 // custom: 3 red ripples lasting 3 seconds total
10540 el.frame("ff0000", 3, { duration: 3 });
10542 // common config options shown with default values
10543 el.frame("C3DAF9", 1, {
10544 duration: 1 //duration of entire animation (not each individual ripple)
10545 // Note: Easing is not configurable and will be ignored if included
10548 * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
10549 * @param {Number} count (optional) The number of ripples to display (defaults to 1)
10550 * @param {Object} options (optional) Object literal with any of the Fx config options
10551 * @return {Roo.Element} The Element
10553 frame : function(color, count, o){
10554 var el = this.getFxEl();
10557 el.queueFx(o, function(){
10558 color = color || "#C3DAF9";
10559 if(color.length == 6){
10560 color = "#" + color;
10562 count = count || 1;
10563 duration = o.duration || 1;
10566 var b = this.getBox();
10567 var animFn = function(){
10568 var proxy = this.createProxy({
10571 visbility:"hidden",
10572 position:"absolute",
10573 "z-index":"35000", // yee haw
10574 border:"0px solid " + color
10577 var scale = Roo.isBorderBox ? 2 : 1;
10579 top:{from:b.y, to:b.y - 20},
10580 left:{from:b.x, to:b.x - 20},
10581 borderWidth:{from:0, to:10},
10582 opacity:{from:1, to:0},
10583 height:{from:b.height, to:(b.height + (20*scale))},
10584 width:{from:b.width, to:(b.width + (20*scale))}
10585 }, duration, function(){
10589 animFn.defer((duration/2)*1000, this);
10600 * Creates a pause before any subsequent queued effects begin. If there are
10601 * no effects queued after the pause it will have no effect.
10606 * @param {Number} seconds The length of time to pause (in seconds)
10607 * @return {Roo.Element} The Element
10609 pause : function(seconds){
10610 var el = this.getFxEl();
10613 el.queueFx(o, function(){
10614 setTimeout(function(){
10616 }, seconds * 1000);
10622 * Fade an element in (from transparent to opaque). The ending opacity can be specified
10623 * using the "endOpacity" config option.
10626 // default: fade in from opacity 0 to 100%
10629 // custom: fade in from opacity 0 to 75% over 2 seconds
10630 el.fadeIn({ endOpacity: .75, duration: 2});
10632 // common config options shown with default values
10634 endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
10639 * @param {Object} options (optional) Object literal with any of the Fx config options
10640 * @return {Roo.Element} The Element
10642 fadeIn : function(o){
10643 var el = this.getFxEl();
10645 el.queueFx(o, function(){
10646 this.setOpacity(0);
10648 this.dom.style.visibility = 'visible';
10649 var to = o.endOpacity || 1;
10650 arguments.callee.anim = this.fxanim({opacity:{to:to}},
10651 o, null, .5, "easeOut", function(){
10653 this.clearOpacity();
10662 * Fade an element out (from opaque to transparent). The ending opacity can be specified
10663 * using the "endOpacity" config option.
10666 // default: fade out from the element's current opacity to 0
10669 // custom: fade out from the element's current opacity to 25% over 2 seconds
10670 el.fadeOut({ endOpacity: .25, duration: 2});
10672 // common config options shown with default values
10674 endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
10681 * @param {Object} options (optional) Object literal with any of the Fx config options
10682 * @return {Roo.Element} The Element
10684 fadeOut : function(o){
10685 var el = this.getFxEl();
10687 el.queueFx(o, function(){
10688 arguments.callee.anim = this.fxanim({opacity:{to:o.endOpacity || 0}},
10689 o, null, .5, "easeOut", function(){
10690 if(this.visibilityMode == Roo.Element.DISPLAY || o.useDisplay){
10691 this.dom.style.display = "none";
10693 this.dom.style.visibility = "hidden";
10695 this.clearOpacity();
10703 * Animates the transition of an element's dimensions from a starting height/width
10704 * to an ending height/width.
10707 // change height and width to 100x100 pixels
10708 el.scale(100, 100);
10710 // common config options shown with default values. The height and width will default to
10711 // the element's existing values if passed as null.
10714 [element's height], {
10719 * @param {Number} width The new width (pass undefined to keep the original width)
10720 * @param {Number} height The new height (pass undefined to keep the original height)
10721 * @param {Object} options (optional) Object literal with any of the Fx config options
10722 * @return {Roo.Element} The Element
10724 scale : function(w, h, o){
10725 this.shift(Roo.apply({}, o, {
10733 * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
10734 * Any of these properties not specified in the config object will not be changed. This effect
10735 * requires that at least one new dimension, position or opacity setting must be passed in on
10736 * the config object in order for the function to have any effect.
10739 // slide the element horizontally to x position 200 while changing the height and opacity
10740 el.shift({ x: 200, height: 50, opacity: .8 });
10742 // common config options shown with default values.
10744 width: [element's width],
10745 height: [element's height],
10746 x: [element's x position],
10747 y: [element's y position],
10748 opacity: [element's opacity],
10753 * @param {Object} options Object literal with any of the Fx config options
10754 * @return {Roo.Element} The Element
10756 shift : function(o){
10757 var el = this.getFxEl();
10759 el.queueFx(o, function(){
10760 var a = {}, w = o.width, h = o.height, x = o.x, y = o.y, op = o.opacity;
10761 if(w !== undefined){
10762 a.width = {to: this.adjustWidth(w)};
10764 if(h !== undefined){
10765 a.height = {to: this.adjustHeight(h)};
10767 if(x !== undefined || y !== undefined){
10769 x !== undefined ? x : this.getX(),
10770 y !== undefined ? y : this.getY()
10773 if(op !== undefined){
10774 a.opacity = {to: op};
10776 if(o.xy !== undefined){
10777 a.points = {to: o.xy};
10779 arguments.callee.anim = this.fxanim(a,
10780 o, 'motion', .35, "easeOut", function(){
10788 * Slides the element while fading it out of view. An anchor point can be optionally passed to set the
10789 * ending point of the effect.
10792 // default: slide the element downward while fading out
10795 // custom: slide the element out to the right with a 2-second duration
10796 el.ghost('r', { duration: 2 });
10798 // common config options shown with default values
10806 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
10807 * @param {Object} options (optional) Object literal with any of the Fx config options
10808 * @return {Roo.Element} The Element
10810 ghost : function(anchor, o){
10811 var el = this.getFxEl();
10814 el.queueFx(o, function(){
10815 anchor = anchor || "b";
10817 // restore values after effect
10818 var r = this.getFxRestore();
10819 var w = this.getWidth(),
10820 h = this.getHeight();
10822 var st = this.dom.style;
10824 var after = function(){
10826 el.setDisplayed(false);
10832 el.setPositioning(r.pos);
10833 st.width = r.width;
10834 st.height = r.height;
10839 var a = {opacity: {to: 0}, points: {}}, pt = a.points;
10840 switch(anchor.toLowerCase()){
10867 arguments.callee.anim = this.fxanim(a,
10877 * Ensures that all effects queued after syncFx is called on the element are
10878 * run concurrently. This is the opposite of {@link #sequenceFx}.
10879 * @return {Roo.Element} The Element
10881 syncFx : function(){
10882 this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
10891 * Ensures that all effects queued after sequenceFx is called on the element are
10892 * run in sequence. This is the opposite of {@link #syncFx}.
10893 * @return {Roo.Element} The Element
10895 sequenceFx : function(){
10896 this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
10898 concurrent : false,
10905 nextFx : function(){
10906 var ef = this.fxQueue[0];
10913 * Returns true if the element has any effects actively running or queued, else returns false.
10914 * @return {Boolean} True if element has active effects, else false
10916 hasActiveFx : function(){
10917 return this.fxQueue && this.fxQueue[0];
10921 * Stops any running effects and clears the element's internal effects queue if it contains
10922 * any additional effects that haven't started yet.
10923 * @return {Roo.Element} The Element
10925 stopFx : function(){
10926 if(this.hasActiveFx()){
10927 var cur = this.fxQueue[0];
10928 if(cur && cur.anim && cur.anim.isAnimated()){
10929 this.fxQueue = [cur]; // clear out others
10930 cur.anim.stop(true);
10937 beforeFx : function(o){
10938 if(this.hasActiveFx() && !o.concurrent){
10949 * Returns true if the element is currently blocking so that no other effect can be queued
10950 * until this effect is finished, else returns false if blocking is not set. This is commonly
10951 * used to ensure that an effect initiated by a user action runs to completion prior to the
10952 * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
10953 * @return {Boolean} True if blocking, else false
10955 hasFxBlock : function(){
10956 var q = this.fxQueue;
10957 return q && q[0] && q[0].block;
10961 queueFx : function(o, fn){
10965 if(!this.hasFxBlock()){
10966 Roo.applyIf(o, this.fxDefaults);
10968 var run = this.beforeFx(o);
10969 fn.block = o.block;
10970 this.fxQueue.push(fn);
10982 fxWrap : function(pos, o, vis){
10984 if(!o.wrap || !(wrap = Roo.get(o.wrap))){
10987 wrapXY = this.getXY();
10989 var div = document.createElement("div");
10990 div.style.visibility = vis;
10991 wrap = Roo.get(this.dom.parentNode.insertBefore(div, this.dom));
10992 wrap.setPositioning(pos);
10993 if(wrap.getStyle("position") == "static"){
10994 wrap.position("relative");
10996 this.clearPositioning('auto');
10998 wrap.dom.appendChild(this.dom);
11000 wrap.setXY(wrapXY);
11007 fxUnwrap : function(wrap, pos, o){
11008 this.clearPositioning();
11009 this.setPositioning(pos);
11011 wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
11017 getFxRestore : function(){
11018 var st = this.dom.style;
11019 return {pos: this.getPositioning(), width: st.width, height : st.height};
11023 afterFx : function(o){
11025 this.applyStyles(o.afterStyle);
11028 this.addClass(o.afterCls);
11030 if(o.remove === true){
11033 Roo.callback(o.callback, o.scope, [this]);
11035 this.fxQueue.shift();
11041 getFxEl : function(){ // support for composite element fx
11042 return Roo.get(this.dom);
11046 fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
11047 animType = animType || 'run';
11049 var anim = Roo.lib.Anim[animType](
11051 (opt.duration || defaultDur) || .35,
11052 (opt.easing || defaultEase) || 'easeOut',
11054 Roo.callback(cb, this);
11063 // backwords compat
11064 Roo.Fx.resize = Roo.Fx.scale;
11066 //When included, Roo.Fx is automatically applied to Element so that all basic
11067 //effects are available directly via the Element API
11068 Roo.apply(Roo.Element.prototype, Roo.Fx);/*
11070 * Ext JS Library 1.1.1
11071 * Copyright(c) 2006-2007, Ext JS, LLC.
11073 * Originally Released Under LGPL - original licence link has changed is not relivant.
11076 * <script type="text/javascript">
11081 * @class Roo.CompositeElement
11082 * Standard composite class. Creates a Roo.Element for every element in the collection.
11084 * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
11085 * actions will be performed on all the elements in this collection.</b>
11087 * All methods return <i>this</i> and can be chained.
11089 var els = Roo.select("#some-el div.some-class", true);
11090 // or select directly from an existing element
11091 var el = Roo.get('some-el');
11092 el.select('div.some-class', true);
11094 els.setWidth(100); // all elements become 100 width
11095 els.hide(true); // all elements fade out and hide
11097 els.setWidth(100).hide(true);
11100 Roo.CompositeElement = function(els){
11101 this.elements = [];
11102 this.addElements(els);
11104 Roo.CompositeElement.prototype = {
11106 addElements : function(els){
11110 if(typeof els == "string"){
11111 els = Roo.Element.selectorFunction(els);
11113 var yels = this.elements;
11114 var index = yels.length-1;
11115 for(var i = 0, len = els.length; i < len; i++) {
11116 yels[++index] = Roo.get(els[i]);
11122 * Clears this composite and adds the elements returned by the passed selector.
11123 * @param {String/Array} els A string CSS selector, an array of elements or an element
11124 * @return {CompositeElement} this
11126 fill : function(els){
11127 this.elements = [];
11133 * Filters this composite to only elements that match the passed selector.
11134 * @param {String} selector A string CSS selector
11135 * @param {Boolean} inverse return inverse filter (not matches)
11136 * @return {CompositeElement} this
11138 filter : function(selector, inverse){
11140 inverse = inverse || false;
11141 this.each(function(el){
11142 var match = inverse ? !el.is(selector) : el.is(selector);
11144 els[els.length] = el.dom;
11151 invoke : function(fn, args){
11152 var els = this.elements;
11153 for(var i = 0, len = els.length; i < len; i++) {
11154 Roo.Element.prototype[fn].apply(els[i], args);
11159 * Adds elements to this composite.
11160 * @param {String/Array} els A string CSS selector, an array of elements or an element
11161 * @return {CompositeElement} this
11163 add : function(els){
11164 if(typeof els == "string"){
11165 this.addElements(Roo.Element.selectorFunction(els));
11166 }else if(els.length !== undefined){
11167 this.addElements(els);
11169 this.addElements([els]);
11174 * Calls the passed function passing (el, this, index) for each element in this composite.
11175 * @param {Function} fn The function to call
11176 * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
11177 * @return {CompositeElement} this
11179 each : function(fn, scope){
11180 var els = this.elements;
11181 for(var i = 0, len = els.length; i < len; i++){
11182 if(fn.call(scope || els[i], els[i], this, i) === false) {
11190 * Returns the Element object at the specified index
11191 * @param {Number} index
11192 * @return {Roo.Element}
11194 item : function(index){
11195 return this.elements[index] || null;
11199 * Returns the first Element
11200 * @return {Roo.Element}
11202 first : function(){
11203 return this.item(0);
11207 * Returns the last Element
11208 * @return {Roo.Element}
11211 return this.item(this.elements.length-1);
11215 * Returns the number of elements in this composite
11218 getCount : function(){
11219 return this.elements.length;
11223 * Returns true if this composite contains the passed element
11226 contains : function(el){
11227 return this.indexOf(el) !== -1;
11231 * Returns true if this composite contains the passed element
11234 indexOf : function(el){
11235 return this.elements.indexOf(Roo.get(el));
11240 * Removes the specified element(s).
11241 * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
11242 * or an array of any of those.
11243 * @param {Boolean} removeDom (optional) True to also remove the element from the document
11244 * @return {CompositeElement} this
11246 removeElement : function(el, removeDom){
11247 if(el instanceof Array){
11248 for(var i = 0, len = el.length; i < len; i++){
11249 this.removeElement(el[i]);
11253 var index = typeof el == 'number' ? el : this.indexOf(el);
11256 var d = this.elements[index];
11260 d.parentNode.removeChild(d);
11263 this.elements.splice(index, 1);
11269 * Replaces the specified element with the passed element.
11270 * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
11272 * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
11273 * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
11274 * @return {CompositeElement} this
11276 replaceElement : function(el, replacement, domReplace){
11277 var index = typeof el == 'number' ? el : this.indexOf(el);
11280 this.elements[index].replaceWith(replacement);
11282 this.elements.splice(index, 1, Roo.get(replacement))
11289 * Removes all elements.
11291 clear : function(){
11292 this.elements = [];
11296 Roo.CompositeElement.createCall = function(proto, fnName){
11297 if(!proto[fnName]){
11298 proto[fnName] = function(){
11299 return this.invoke(fnName, arguments);
11303 for(var fnName in Roo.Element.prototype){
11304 if(typeof Roo.Element.prototype[fnName] == "function"){
11305 Roo.CompositeElement.createCall(Roo.CompositeElement.prototype, fnName);
11311 * Ext JS Library 1.1.1
11312 * Copyright(c) 2006-2007, Ext JS, LLC.
11314 * Originally Released Under LGPL - original licence link has changed is not relivant.
11317 * <script type="text/javascript">
11321 * @class Roo.CompositeElementLite
11322 * @extends Roo.CompositeElement
11323 * Flyweight composite class. Reuses the same Roo.Element for element operations.
11325 var els = Roo.select("#some-el div.some-class");
11326 // or select directly from an existing element
11327 var el = Roo.get('some-el');
11328 el.select('div.some-class');
11330 els.setWidth(100); // all elements become 100 width
11331 els.hide(true); // all elements fade out and hide
11333 els.setWidth(100).hide(true);
11334 </code></pre><br><br>
11335 * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
11336 * actions will be performed on all the elements in this collection.</b>
11338 Roo.CompositeElementLite = function(els){
11339 Roo.CompositeElementLite.superclass.constructor.call(this, els);
11340 this.el = new Roo.Element.Flyweight();
11342 Roo.extend(Roo.CompositeElementLite, Roo.CompositeElement, {
11343 addElements : function(els){
11345 if(els instanceof Array){
11346 this.elements = this.elements.concat(els);
11348 var yels = this.elements;
11349 var index = yels.length-1;
11350 for(var i = 0, len = els.length; i < len; i++) {
11351 yels[++index] = els[i];
11357 invoke : function(fn, args){
11358 var els = this.elements;
11360 for(var i = 0, len = els.length; i < len; i++) {
11362 Roo.Element.prototype[fn].apply(el, args);
11367 * Returns a flyweight Element of the dom element object at the specified index
11368 * @param {Number} index
11369 * @return {Roo.Element}
11371 item : function(index){
11372 if(!this.elements[index]){
11375 this.el.dom = this.elements[index];
11379 // fixes scope with flyweight
11380 addListener : function(eventName, handler, scope, opt){
11381 var els = this.elements;
11382 for(var i = 0, len = els.length; i < len; i++) {
11383 Roo.EventManager.on(els[i], eventName, handler, scope || els[i], opt);
11389 * Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
11390 * passed is the flyweight (shared) Roo.Element instance, so if you require a
11391 * a reference to the dom node, use el.dom.</b>
11392 * @param {Function} fn The function to call
11393 * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
11394 * @return {CompositeElement} this
11396 each : function(fn, scope){
11397 var els = this.elements;
11399 for(var i = 0, len = els.length; i < len; i++){
11401 if(fn.call(scope || el, el, this, i) === false){
11408 indexOf : function(el){
11409 return this.elements.indexOf(Roo.getDom(el));
11412 replaceElement : function(el, replacement, domReplace){
11413 var index = typeof el == 'number' ? el : this.indexOf(el);
11415 replacement = Roo.getDom(replacement);
11417 var d = this.elements[index];
11418 d.parentNode.insertBefore(replacement, d);
11419 d.parentNode.removeChild(d);
11421 this.elements.splice(index, 1, replacement);
11426 Roo.CompositeElementLite.prototype.on = Roo.CompositeElementLite.prototype.addListener;
11430 * Ext JS Library 1.1.1
11431 * Copyright(c) 2006-2007, Ext JS, LLC.
11433 * Originally Released Under LGPL - original licence link has changed is not relivant.
11436 * <script type="text/javascript">
11442 * @class Roo.data.Connection
11443 * @extends Roo.util.Observable
11444 * The class encapsulates a connection to the page's originating domain, allowing requests to be made
11445 * either to a configured URL, or to a URL specified at request time.<br><br>
11447 * Requests made by this class are asynchronous, and will return immediately. No data from
11448 * the server will be available to the statement immediately following the {@link #request} call.
11449 * To process returned data, use a callback in the request options object, or an event listener.</p><br>
11451 * Note: If you are doing a file upload, you will not get a normal response object sent back to
11452 * your callback or event handler. Since the upload is handled via in IFRAME, there is no XMLHttpRequest.
11453 * The response object is created using the innerHTML of the IFRAME's document as the responseText
11454 * property and, if present, the IFRAME's XML document as the responseXML property.</p><br>
11455 * This means that a valid XML or HTML document must be returned. If JSON data is required, it is suggested
11456 * that it be placed either inside a <textarea> in an HTML document and retrieved from the responseText
11457 * using a regex, or inside a CDATA section in an XML document and retrieved from the responseXML using
11458 * standard DOM methods.
11460 * @param {Object} config a configuration object.
11462 Roo.data.Connection = function(config){
11463 Roo.apply(this, config);
11466 * @event beforerequest
11467 * Fires before a network request is made to retrieve a data object.
11468 * @param {Connection} conn This Connection object.
11469 * @param {Object} options The options config object passed to the {@link #request} method.
11471 "beforerequest" : true,
11473 * @event requestcomplete
11474 * Fires if the request was successfully completed.
11475 * @param {Connection} conn This Connection object.
11476 * @param {Object} response The XHR object containing the response data.
11477 * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
11478 * @param {Object} options The options config object passed to the {@link #request} method.
11480 "requestcomplete" : true,
11482 * @event requestexception
11483 * Fires if an error HTTP status was returned from the server.
11484 * See {@link http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html} for details of HTTP status codes.
11485 * @param {Connection} conn This Connection object.
11486 * @param {Object} response The XHR object containing the response data.
11487 * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
11488 * @param {Object} options The options config object passed to the {@link #request} method.
11490 "requestexception" : true
11492 Roo.data.Connection.superclass.constructor.call(this);
11495 Roo.extend(Roo.data.Connection, Roo.util.Observable, {
11497 * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
11500 * @cfg {Object} extraParams (Optional) An object containing properties which are used as
11501 * extra parameters to each request made by this object. (defaults to undefined)
11504 * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
11505 * to each request made by this object. (defaults to undefined)
11508 * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
11511 * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
11515 * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
11521 * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
11524 disableCaching: true,
11527 * Sends an HTTP request to a remote server.
11528 * @param {Object} options An object which may contain the following properties:<ul>
11529 * <li><b>url</b> {String} (Optional) The URL to which to send the request. Defaults to configured URL</li>
11530 * <li><b>params</b> {Object/String/Function} (Optional) An object containing properties which are used as parameters to the
11531 * request, a url encoded string or a function to call to get either.</li>
11532 * <li><b>method</b> {String} (Optional) The HTTP method to use for the request. Defaults to the configured method, or
11533 * if no method was configured, "GET" if no parameters are being sent, and "POST" if parameters are being sent.</li>
11534 * <li><b>callback</b> {Function} (Optional) The function to be called upon receipt of the HTTP response.
11535 * The callback is called regardless of success or failure and is passed the following parameters:<ul>
11536 * <li>options {Object} The parameter to the request call.</li>
11537 * <li>success {Boolean} True if the request succeeded.</li>
11538 * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
11540 * <li><b>success</b> {Function} (Optional) The function to be called upon success of the request.
11541 * The callback is passed the following parameters:<ul>
11542 * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
11543 * <li>options {Object} The parameter to the request call.</li>
11545 * <li><b>failure</b> {Function} (Optional) The function to be called upon failure of the request.
11546 * The callback is passed the following parameters:<ul>
11547 * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
11548 * <li>options {Object} The parameter to the request call.</li>
11550 * <li><b>scope</b> {Object} (Optional) The scope in which to execute the callbacks: The "this" object
11551 * for the callback function. Defaults to the browser window.</li>
11552 * <li><b>form</b> {Object/String} (Optional) A form object or id to pull parameters from.</li>
11553 * <li><b>isUpload</b> {Boolean} (Optional) True if the form object is a file upload (will usually be automatically detected).</li>
11554 * <li><b>headers</b> {Object} (Optional) Request headers to set for the request.</li>
11555 * <li><b>xmlData</b> {Object} (Optional) XML document to use for the post. Note: This will be used instead of
11556 * params for the post data. Any params will be appended to the URL.</li>
11557 * <li><b>disableCaching</b> {Boolean} (Optional) True to add a unique cache-buster param to GET requests.</li>
11559 * @return {Number} transactionId
11561 request : function(o){
11562 if(this.fireEvent("beforerequest", this, o) !== false){
11565 if(typeof p == "function"){
11566 p = p.call(o.scope||window, o);
11568 if(typeof p == "object"){
11569 p = Roo.urlEncode(o.params);
11571 if(this.extraParams){
11572 var extras = Roo.urlEncode(this.extraParams);
11573 p = p ? (p + '&' + extras) : extras;
11576 var url = o.url || this.url;
11577 if(typeof url == 'function'){
11578 url = url.call(o.scope||window, o);
11582 var form = Roo.getDom(o.form);
11583 url = url || form.action;
11585 var enctype = form.getAttribute("enctype");
11586 if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
11587 return this.doFormUpload(o, p, url);
11589 var f = Roo.lib.Ajax.serializeForm(form);
11590 p = p ? (p + '&' + f) : f;
11593 var hs = o.headers;
11594 if(this.defaultHeaders){
11595 hs = Roo.apply(hs || {}, this.defaultHeaders);
11602 success: this.handleResponse,
11603 failure: this.handleFailure,
11605 argument: {options: o},
11606 timeout : o.timeout || this.timeout
11609 var method = o.method||this.method||(p ? "POST" : "GET");
11611 if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
11612 url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
11615 if(typeof o.autoAbort == 'boolean'){ // options gets top priority
11619 }else if(this.autoAbort !== false){
11623 if((method == 'GET' && p) || o.xmlData){
11624 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
11627 this.transId = Roo.lib.Ajax.request(method, url, cb, p, o);
11628 return this.transId;
11630 Roo.callback(o.callback, o.scope, [o, null, null]);
11636 * Determine whether this object has a request outstanding.
11637 * @param {Number} transactionId (Optional) defaults to the last transaction
11638 * @return {Boolean} True if there is an outstanding request.
11640 isLoading : function(transId){
11642 return Roo.lib.Ajax.isCallInProgress(transId);
11644 return this.transId ? true : false;
11649 * Aborts any outstanding request.
11650 * @param {Number} transactionId (Optional) defaults to the last transaction
11652 abort : function(transId){
11653 if(transId || this.isLoading()){
11654 Roo.lib.Ajax.abort(transId || this.transId);
11659 handleResponse : function(response){
11660 this.transId = false;
11661 var options = response.argument.options;
11662 response.argument = options ? options.argument : null;
11663 this.fireEvent("requestcomplete", this, response, options);
11664 Roo.callback(options.success, options.scope, [response, options]);
11665 Roo.callback(options.callback, options.scope, [options, true, response]);
11669 handleFailure : function(response, e){
11670 this.transId = false;
11671 var options = response.argument.options;
11672 response.argument = options ? options.argument : null;
11673 this.fireEvent("requestexception", this, response, options, e);
11674 Roo.callback(options.failure, options.scope, [response, options]);
11675 Roo.callback(options.callback, options.scope, [options, false, response]);
11679 doFormUpload : function(o, ps, url){
11681 var frame = document.createElement('iframe');
11684 frame.className = 'x-hidden';
11686 frame.src = Roo.SSL_SECURE_URL;
11688 document.body.appendChild(frame);
11691 document.frames[id].name = id;
11694 var form = Roo.getDom(o.form);
11696 form.method = 'POST';
11697 form.enctype = form.encoding = 'multipart/form-data';
11703 if(ps){ // add dynamic params
11705 ps = Roo.urlDecode(ps, false);
11707 if(ps.hasOwnProperty(k)){
11708 hd = document.createElement('input');
11709 hd.type = 'hidden';
11712 form.appendChild(hd);
11719 var r = { // bogus response object
11724 r.argument = o ? o.argument : null;
11729 doc = frame.contentWindow.document;
11731 doc = (frame.contentDocument || window.frames[id].document);
11733 if(doc && doc.body){
11734 r.responseText = doc.body.innerHTML;
11736 if(doc && doc.XMLDocument){
11737 r.responseXML = doc.XMLDocument;
11739 r.responseXML = doc;
11746 Roo.EventManager.removeListener(frame, 'load', cb, this);
11748 this.fireEvent("requestcomplete", this, r, o);
11749 Roo.callback(o.success, o.scope, [r, o]);
11750 Roo.callback(o.callback, o.scope, [o, true, r]);
11752 setTimeout(function(){document.body.removeChild(frame);}, 100);
11755 Roo.EventManager.on(frame, 'load', cb, this);
11758 if(hiddens){ // remove dynamic params
11759 for(var i = 0, len = hiddens.length; i < len; i++){
11760 form.removeChild(hiddens[i]);
11767 * Ext JS Library 1.1.1
11768 * Copyright(c) 2006-2007, Ext JS, LLC.
11770 * Originally Released Under LGPL - original licence link has changed is not relivant.
11773 * <script type="text/javascript">
11777 * Global Ajax request class.
11780 * @extends Roo.data.Connection
11783 * @cfg {String} url The default URL to be used for requests to the server. (defaults to undefined)
11784 * @cfg {Object} extraParams An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined)
11785 * @cfg {Object} defaultHeaders An object containing request headers which are added to each request made by this object. (defaults to undefined)
11786 * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
11787 * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
11788 * @cfg {Boolean} autoAbort (Optional) Whether a new request should abort any pending requests. (defaults to false)
11789 * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
11791 Roo.Ajax = new Roo.data.Connection({
11800 * Serialize the passed form into a url encoded string
11802 * @param {String/HTMLElement} form
11805 serializeForm : function(form){
11806 return Roo.lib.Ajax.serializeForm(form);
11810 * Ext JS Library 1.1.1
11811 * Copyright(c) 2006-2007, Ext JS, LLC.
11813 * Originally Released Under LGPL - original licence link has changed is not relivant.
11816 * <script type="text/javascript">
11821 * @class Roo.UpdateManager
11822 * @extends Roo.util.Observable
11823 * Provides AJAX-style update for Element object.<br><br>
11826 * // Get it from a Roo.Element object
11827 * var el = Roo.get("foo");
11828 * var mgr = el.getUpdateManager();
11829 * mgr.update("http://myserver.com/index.php", "param1=1&param2=2");
11831 * mgr.formUpdate("myFormId", "http://myserver.com/index.php");
11833 * // or directly (returns the same UpdateManager instance)
11834 * var mgr = new Roo.UpdateManager("myElementId");
11835 * mgr.startAutoRefresh(60, "http://myserver.com/index.php");
11836 * mgr.on("update", myFcnNeedsToKnow);
11838 // short handed call directly from the element object
11839 Roo.get("foo").load({
11843 text: "Loading Foo..."
11847 * Create new UpdateManager directly.
11848 * @param {String/HTMLElement/Roo.Element} el The element to update
11849 * @param {Boolean} forceNew (optional) By default the constructor checks to see if the passed element already has an UpdateManager and if it does it returns the same instance. This will skip that check (useful for extending this class).
11851 Roo.UpdateManager = function(el, forceNew){
11853 if(!forceNew && el.updateManager){
11854 return el.updateManager;
11857 * The Element object
11858 * @type Roo.Element
11862 * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
11865 this.defaultUrl = null;
11869 * @event beforeupdate
11870 * Fired before an update is made, return false from your handler and the update is cancelled.
11871 * @param {Roo.Element} el
11872 * @param {String/Object/Function} url
11873 * @param {String/Object} params
11875 "beforeupdate": true,
11878 * Fired after successful update is made.
11879 * @param {Roo.Element} el
11880 * @param {Object} oResponseObject The response Object
11885 * Fired on update failure.
11886 * @param {Roo.Element} el
11887 * @param {Object} oResponseObject The response Object
11891 var d = Roo.UpdateManager.defaults;
11893 * Blank page URL to use with SSL file uploads (Defaults to Roo.UpdateManager.defaults.sslBlankUrl or "about:blank").
11896 this.sslBlankUrl = d.sslBlankUrl;
11898 * Whether to append unique parameter on get request to disable caching (Defaults to Roo.UpdateManager.defaults.disableCaching or false).
11901 this.disableCaching = d.disableCaching;
11903 * Text for loading indicator (Defaults to Roo.UpdateManager.defaults.indicatorText or '<div class="loading-indicator">Loading...</div>').
11906 this.indicatorText = d.indicatorText;
11908 * Whether to show indicatorText when loading (Defaults to Roo.UpdateManager.defaults.showLoadIndicator or true).
11911 this.showLoadIndicator = d.showLoadIndicator;
11913 * Timeout for requests or form posts in seconds (Defaults to Roo.UpdateManager.defaults.timeout or 30 seconds).
11916 this.timeout = d.timeout;
11919 * True to process scripts in the output (Defaults to Roo.UpdateManager.defaults.loadScripts (false)).
11922 this.loadScripts = d.loadScripts;
11925 * Transaction object of current executing transaction
11927 this.transaction = null;
11932 this.autoRefreshProcId = null;
11934 * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
11937 this.refreshDelegate = this.refresh.createDelegate(this);
11939 * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
11942 this.updateDelegate = this.update.createDelegate(this);
11944 * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
11947 this.formUpdateDelegate = this.formUpdate.createDelegate(this);
11951 this.successDelegate = this.processSuccess.createDelegate(this);
11955 this.failureDelegate = this.processFailure.createDelegate(this);
11957 if(!this.renderer){
11959 * The renderer for this UpdateManager. Defaults to {@link Roo.UpdateManager.BasicRenderer}.
11961 this.renderer = new Roo.UpdateManager.BasicRenderer();
11964 Roo.UpdateManager.superclass.constructor.call(this);
11967 Roo.extend(Roo.UpdateManager, Roo.util.Observable, {
11969 * Get the Element this UpdateManager is bound to
11970 * @return {Roo.Element} The element
11972 getEl : function(){
11976 * Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise it uses GET.
11977 * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
11980 url: "your-url.php",<br/>
11981 params: {param1: "foo", param2: "bar"}, // or a URL encoded string<br/>
11982 callback: yourFunction,<br/>
11983 scope: yourObject, //(optional scope) <br/>
11984 discardUrl: false, <br/>
11985 nocache: false,<br/>
11986 text: "Loading...",<br/>
11988 scripts: false<br/>
11991 * The only required property is url. The optional properties nocache, text and scripts
11992 * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this UpdateManager instance.
11993 * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
11994 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
11995 * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
11997 update : function(url, params, callback, discardUrl){
11998 if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
11999 var method = this.method,
12001 if(typeof url == "object"){ // must be config object
12004 params = params || cfg.params;
12005 callback = callback || cfg.callback;
12006 discardUrl = discardUrl || cfg.discardUrl;
12007 if(callback && cfg.scope){
12008 callback = callback.createDelegate(cfg.scope);
12010 if(typeof cfg.method != "undefined"){method = cfg.method;};
12011 if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
12012 if(typeof cfg.text != "undefined"){this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
12013 if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
12014 if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
12016 this.showLoading();
12018 this.defaultUrl = url;
12020 if(typeof url == "function"){
12021 url = url.call(this);
12024 method = method || (params ? "POST" : "GET");
12025 if(method == "GET"){
12026 url = this.prepareUrl(url);
12029 var o = Roo.apply(cfg ||{}, {
12032 success: this.successDelegate,
12033 failure: this.failureDelegate,
12034 callback: undefined,
12035 timeout: (this.timeout*1000),
12036 argument: {"url": url, "form": null, "callback": callback, "params": params}
12038 Roo.log("updated manager called with timeout of " + o.timeout);
12039 this.transaction = Roo.Ajax.request(o);
12044 * Performs an async form post, updating this element with the response. If the form has the attribute enctype="multipart/form-data", it assumes it's a file upload.
12045 * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
12046 * @param {String/HTMLElement} form The form Id or form element
12047 * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
12048 * @param {Boolean} reset (optional) Whether to try to reset the form after the update
12049 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
12051 formUpdate : function(form, url, reset, callback){
12052 if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
12053 if(typeof url == "function"){
12054 url = url.call(this);
12056 form = Roo.getDom(form);
12057 this.transaction = Roo.Ajax.request({
12060 success: this.successDelegate,
12061 failure: this.failureDelegate,
12062 timeout: (this.timeout*1000),
12063 argument: {"url": url, "form": form, "callback": callback, "reset": reset}
12065 this.showLoading.defer(1, this);
12070 * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
12071 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
12073 refresh : function(callback){
12074 if(this.defaultUrl == null){
12077 this.update(this.defaultUrl, null, callback, true);
12081 * Set this element to auto refresh.
12082 * @param {Number} interval How often to update (in seconds).
12083 * @param {String/Function} url (optional) The url for this request or a function to call to get the url (Defaults to the last used url)
12084 * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "¶m1=1¶m2=2" or as an object {param1: 1, param2: 2}
12085 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
12086 * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
12088 startAutoRefresh : function(interval, url, params, callback, refreshNow){
12090 this.update(url || this.defaultUrl, params, callback, true);
12092 if(this.autoRefreshProcId){
12093 clearInterval(this.autoRefreshProcId);
12095 this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
12099 * Stop auto refresh on this element.
12101 stopAutoRefresh : function(){
12102 if(this.autoRefreshProcId){
12103 clearInterval(this.autoRefreshProcId);
12104 delete this.autoRefreshProcId;
12108 isAutoRefreshing : function(){
12109 return this.autoRefreshProcId ? true : false;
12112 * Called to update the element to "Loading" state. Override to perform custom action.
12114 showLoading : function(){
12115 if(this.showLoadIndicator){
12116 this.el.update(this.indicatorText);
12121 * Adds unique parameter to query string if disableCaching = true
12124 prepareUrl : function(url){
12125 if(this.disableCaching){
12126 var append = "_dc=" + (new Date().getTime());
12127 if(url.indexOf("?") !== -1){
12128 url += "&" + append;
12130 url += "?" + append;
12139 processSuccess : function(response){
12140 this.transaction = null;
12141 if(response.argument.form && response.argument.reset){
12142 try{ // put in try/catch since some older FF releases had problems with this
12143 response.argument.form.reset();
12146 if(this.loadScripts){
12147 this.renderer.render(this.el, response, this,
12148 this.updateComplete.createDelegate(this, [response]));
12150 this.renderer.render(this.el, response, this);
12151 this.updateComplete(response);
12155 updateComplete : function(response){
12156 this.fireEvent("update", this.el, response);
12157 if(typeof response.argument.callback == "function"){
12158 response.argument.callback(this.el, true, response);
12165 processFailure : function(response){
12166 this.transaction = null;
12167 this.fireEvent("failure", this.el, response);
12168 if(typeof response.argument.callback == "function"){
12169 response.argument.callback(this.el, false, response);
12174 * Set the content renderer for this UpdateManager. See {@link Roo.UpdateManager.BasicRenderer#render} for more details.
12175 * @param {Object} renderer The object implementing the render() method
12177 setRenderer : function(renderer){
12178 this.renderer = renderer;
12181 getRenderer : function(){
12182 return this.renderer;
12186 * Set the defaultUrl used for updates
12187 * @param {String/Function} defaultUrl The url or a function to call to get the url
12189 setDefaultUrl : function(defaultUrl){
12190 this.defaultUrl = defaultUrl;
12194 * Aborts the executing transaction
12196 abort : function(){
12197 if(this.transaction){
12198 Roo.Ajax.abort(this.transaction);
12203 * Returns true if an update is in progress
12204 * @return {Boolean}
12206 isUpdating : function(){
12207 if(this.transaction){
12208 return Roo.Ajax.isLoading(this.transaction);
12215 * @class Roo.UpdateManager.defaults
12216 * @static (not really - but it helps the doc tool)
12217 * The defaults collection enables customizing the default properties of UpdateManager
12219 Roo.UpdateManager.defaults = {
12221 * Timeout for requests or form posts in seconds (Defaults 30 seconds).
12227 * True to process scripts by default (Defaults to false).
12230 loadScripts : false,
12233 * Blank page URL to use with SSL file uploads (Defaults to "javascript:false").
12236 sslBlankUrl : (Roo.SSL_SECURE_URL || "javascript:false"),
12238 * Whether to append unique parameter on get request to disable caching (Defaults to false).
12241 disableCaching : false,
12243 * Whether to show indicatorText when loading (Defaults to true).
12246 showLoadIndicator : true,
12248 * Text for loading indicator (Defaults to '<div class="loading-indicator">Loading...</div>').
12251 indicatorText : '<div class="loading-indicator">Loading...</div>'
12255 * Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
12257 * <pre><code>Roo.UpdateManager.updateElement("my-div", "stuff.php");</code></pre>
12258 * @param {String/HTMLElement/Roo.Element} el The element to update
12259 * @param {String} url The url
12260 * @param {String/Object} params (optional) Url encoded param string or an object of name/value pairs
12261 * @param {Object} options (optional) A config object with any of the UpdateManager properties you want to set - for example: {disableCaching:true, indicatorText: "Loading data..."}
12264 * @member Roo.UpdateManager
12266 Roo.UpdateManager.updateElement = function(el, url, params, options){
12267 var um = Roo.get(el, true).getUpdateManager();
12268 Roo.apply(um, options);
12269 um.update(url, params, options ? options.callback : null);
12271 // alias for backwards compat
12272 Roo.UpdateManager.update = Roo.UpdateManager.updateElement;
12274 * @class Roo.UpdateManager.BasicRenderer
12275 * Default Content renderer. Updates the elements innerHTML with the responseText.
12277 Roo.UpdateManager.BasicRenderer = function(){};
12279 Roo.UpdateManager.BasicRenderer.prototype = {
12281 * This is called when the transaction is completed and it's time to update the element - The BasicRenderer
12282 * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
12283 * create an object with a "render(el, response)" method and pass it to setRenderer on the UpdateManager.
12284 * @param {Roo.Element} el The element being rendered
12285 * @param {Object} response The YUI Connect response object
12286 * @param {UpdateManager} updateManager The calling update manager
12287 * @param {Function} callback A callback that will need to be called if loadScripts is true on the UpdateManager
12289 render : function(el, response, updateManager, callback){
12290 el.update(response.responseText, updateManager.loadScripts, callback);
12296 * (c)) Alan Knowles
12302 * @class Roo.DomTemplate
12303 * @extends Roo.Template
12304 * An effort at a dom based template engine..
12306 * Similar to XTemplate, except it uses dom parsing to create the template..
12308 * Supported features:
12313 {a_variable} - output encoded.
12314 {a_variable.format:("Y-m-d")} - call a method on the variable
12315 {a_variable:raw} - unencoded output
12316 {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
12317 {a_variable:this.method_on_template(...)} - call a method on the template object.
12322 <div roo-for="a_variable or condition.."></div>
12323 <div roo-if="a_variable or condition"></div>
12324 <div roo-exec="some javascript"></div>
12325 <div roo-name="named_template"></div>
12330 Roo.DomTemplate = function()
12332 Roo.DomTemplate.superclass.constructor.apply(this, arguments);
12339 Roo.extend(Roo.DomTemplate, Roo.Template, {
12341 * id counter for sub templates.
12345 * flag to indicate if dom parser is inside a pre,
12346 * it will strip whitespace if not.
12351 * The various sub templates
12359 * basic tag replacing syntax
12362 * // you can fake an object call by doing this
12366 re : /(\{|\%7B)([\w-\.]+)(?:\:([\w\.]*)(?:\(([^)]*?)?\))?)?(\}|\%7D)/g,
12367 //re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
12369 iterChild : function (node, method) {
12371 var oldPre = this.inPre;
12372 if (node.tagName == 'PRE') {
12375 for( var i = 0; i < node.childNodes.length; i++) {
12376 method.call(this, node.childNodes[i]);
12378 this.inPre = oldPre;
12384 * compile the template
12386 * This is not recursive, so I'm not sure how nested templates are really going to be handled..
12389 compile: function()
12393 // covert the html into DOM...
12397 doc = document.implementation.createHTMLDocument("");
12398 doc.documentElement.innerHTML = this.html ;
12399 div = doc.documentElement;
12401 // old IE... - nasty -- it causes all sorts of issues.. with
12402 // images getting pulled from server..
12403 div = document.createElement('div');
12404 div.innerHTML = this.html;
12406 //doc.documentElement.innerHTML = htmlBody
12412 this.iterChild(div, function(n) {_t.compileNode(n, true); });
12414 var tpls = this.tpls;
12416 // create a top level template from the snippet..
12418 //Roo.log(div.innerHTML);
12425 body : div.innerHTML,
12438 Roo.each(tpls, function(tp){
12439 this.compileTpl(tp);
12440 this.tpls[tp.id] = tp;
12443 this.master = tpls[0];
12449 compileNode : function(node, istop) {
12454 // skip anything not a tag..
12455 if (node.nodeType != 1) {
12456 if (node.nodeType == 3 && !this.inPre) {
12457 // reduce white space..
12458 node.nodeValue = node.nodeValue.replace(/\s+/g, ' ');
12481 case (node.hasAttribute('roo-for')): tpl.attr = 'for'; break;
12482 case (node.hasAttribute('roo-if')): tpl.attr = 'if'; break;
12483 case (node.hasAttribute('roo-name')): tpl.attr = 'name'; break;
12484 case (node.hasAttribute('roo-exec')): tpl.attr = 'exec'; break;
12490 // just itterate children..
12491 this.iterChild(node,this.compileNode);
12494 tpl.uid = this.id++;
12495 tpl.value = node.getAttribute('roo-' + tpl.attr);
12496 node.removeAttribute('roo-'+ tpl.attr);
12497 if (tpl.attr != 'name') {
12498 var placeholder = document.createTextNode('{domtpl' + tpl.uid + '}');
12499 node.parentNode.replaceChild(placeholder, node);
12502 var placeholder = document.createElement('span');
12503 placeholder.className = 'roo-tpl-' + tpl.value;
12504 node.parentNode.replaceChild(placeholder, node);
12507 // parent now sees '{domtplXXXX}
12508 this.iterChild(node,this.compileNode);
12510 // we should now have node body...
12511 var div = document.createElement('div');
12512 div.appendChild(node);
12514 // this has the unfortunate side effect of converting tagged attributes
12515 // eg. href="{...}" into %7C...%7D
12516 // this has been fixed by searching for those combo's although it's a bit hacky..
12519 tpl.body = div.innerHTML;
12526 switch (tpl.value) {
12527 case '.': tpl.forCall = new Function('values', 'parent', 'with(values){ return values; }'); break;
12528 case '..': tpl.forCall= new Function('values', 'parent', 'with(values){ return parent; }'); break;
12529 default: tpl.forCall= new Function('values', 'parent', 'with(values){ return '+tpl.value+'; }');
12534 tpl.execCall = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
12538 tpl.ifCall = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
12542 tpl.id = tpl.value; // replace non characters???
12548 this.tpls.push(tpl);
12558 * Compile a segment of the template into a 'sub-template'
12564 compileTpl : function(tpl)
12566 var fm = Roo.util.Format;
12567 var useF = this.disableFormats !== true;
12569 var sep = Roo.isGecko ? "+\n" : ",\n";
12571 var undef = function(str) {
12572 Roo.debug && Roo.log("Property not found :" + str);
12576 //Roo.log(tpl.body);
12580 var fn = function(m, lbrace, name, format, args)
12583 //Roo.log(arguments);
12584 args = args ? args.replace(/\\'/g,"'") : args;
12585 //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
12586 if (typeof(format) == 'undefined') {
12587 format = 'htmlEncode';
12589 if (format == 'raw' ) {
12593 if(name.substr(0, 6) == 'domtpl'){
12594 return "'"+ sep +'this.applySubTemplate('+name.substr(6)+', values, parent)'+sep+"'";
12597 // build an array of options to determine if value is undefined..
12599 // basically get 'xxxx.yyyy' then do
12600 // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
12601 // (function () { Roo.log("Property not found"); return ''; })() :
12606 Roo.each(name.split('.'), function(st) {
12607 lookfor += (lookfor.length ? '.': '') + st;
12608 udef_ar.push( "(typeof(" + lookfor + ") == 'undefined')" );
12611 var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
12614 if(format && useF){
12616 args = args ? ',' + args : "";
12618 if(format.substr(0, 5) != "this."){
12619 format = "fm." + format + '(';
12621 format = 'this.call("'+ format.substr(5) + '", ';
12625 return "'"+ sep + udef_st + format + name + args + "))"+sep+"'";
12628 if (args && args.length) {
12629 // called with xxyx.yuu:(test,test)
12631 return "'"+ sep + udef_st + name + '(' + args + "))"+sep+"'";
12633 // raw.. - :raw modifier..
12634 return "'"+ sep + udef_st + name + ")"+sep+"'";
12638 // branched to use + in gecko and [].join() in others
12640 body = "tpl.compiled = function(values, parent){ with(values) { return '" +
12641 tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
12644 body = ["tpl.compiled = function(values, parent){ with (values) { return ['"];
12645 body.push(tpl.body.replace(/(\r\n|\n)/g,
12646 '\\n').replace(/'/g, "\\'").replace(this.re, fn));
12647 body.push("'].join('');};};");
12648 body = body.join('');
12651 Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
12653 /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef */
12660 * same as applyTemplate, except it's done to one of the subTemplates
12661 * when using named templates, you can do:
12663 * var str = pl.applySubTemplate('your-name', values);
12666 * @param {Number} id of the template
12667 * @param {Object} values to apply to template
12668 * @param {Object} parent (normaly the instance of this object)
12670 applySubTemplate : function(id, values, parent)
12674 var t = this.tpls[id];
12678 if(t.ifCall && !t.ifCall.call(this, values, parent)){
12679 Roo.debug && Roo.log('if call on ' + t.value + ' return false');
12683 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-if="' + t.value + '" - ' + e.toString());
12690 if(t.execCall && t.execCall.call(this, values, parent)){
12694 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
12700 var vs = t.forCall ? t.forCall.call(this, values, parent) : values;
12701 parent = t.target ? values : parent;
12702 if(t.forCall && vs instanceof Array){
12704 for(var i = 0, len = vs.length; i < len; i++){
12706 buf[buf.length] = t.compiled.call(this, vs[i], parent);
12708 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
12710 //Roo.log(t.compiled);
12714 return buf.join('');
12717 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
12722 return t.compiled.call(this, vs, parent);
12724 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
12726 //Roo.log(t.compiled);
12734 applyTemplate : function(values){
12735 return this.master.compiled.call(this, values, {});
12736 //var s = this.subs;
12739 apply : function(){
12740 return this.applyTemplate.apply(this, arguments);
12745 Roo.DomTemplate.from = function(el){
12746 el = Roo.getDom(el);
12747 return new Roo.Domtemplate(el.value || el.innerHTML);
12750 * Ext JS Library 1.1.1
12751 * Copyright(c) 2006-2007, Ext JS, LLC.
12753 * Originally Released Under LGPL - original licence link has changed is not relivant.
12756 * <script type="text/javascript">
12760 * @class Roo.util.DelayedTask
12761 * Provides a convenient method of performing setTimeout where a new
12762 * timeout cancels the old timeout. An example would be performing validation on a keypress.
12763 * You can use this class to buffer
12764 * the keypress events for a certain number of milliseconds, and perform only if they stop
12765 * for that amount of time.
12766 * @constructor The parameters to this constructor serve as defaults and are not required.
12767 * @param {Function} fn (optional) The default function to timeout
12768 * @param {Object} scope (optional) The default scope of that timeout
12769 * @param {Array} args (optional) The default Array of arguments
12771 Roo.util.DelayedTask = function(fn, scope, args){
12772 var id = null, d, t;
12774 var call = function(){
12775 var now = new Date().getTime();
12779 fn.apply(scope, args || []);
12783 * Cancels any pending timeout and queues a new one
12784 * @param {Number} delay The milliseconds to delay
12785 * @param {Function} newFn (optional) Overrides function passed to constructor
12786 * @param {Object} newScope (optional) Overrides scope passed to constructor
12787 * @param {Array} newArgs (optional) Overrides args passed to constructor
12789 this.delay = function(delay, newFn, newScope, newArgs){
12790 if(id && delay != d){
12794 t = new Date().getTime();
12796 scope = newScope || scope;
12797 args = newArgs || args;
12799 id = setInterval(call, d);
12804 * Cancel the last queued timeout
12806 this.cancel = function(){
12814 * Ext JS Library 1.1.1
12815 * Copyright(c) 2006-2007, Ext JS, LLC.
12817 * Originally Released Under LGPL - original licence link has changed is not relivant.
12820 * <script type="text/javascript">
12824 Roo.util.TaskRunner = function(interval){
12825 interval = interval || 10;
12826 var tasks = [], removeQueue = [];
12828 var running = false;
12830 var stopThread = function(){
12836 var startThread = function(){
12839 id = setInterval(runTasks, interval);
12843 var removeTask = function(task){
12844 removeQueue.push(task);
12850 var runTasks = function(){
12851 if(removeQueue.length > 0){
12852 for(var i = 0, len = removeQueue.length; i < len; i++){
12853 tasks.remove(removeQueue[i]);
12856 if(tasks.length < 1){
12861 var now = new Date().getTime();
12862 for(var i = 0, len = tasks.length; i < len; ++i){
12864 var itime = now - t.taskRunTime;
12865 if(t.interval <= itime){
12866 var rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]);
12867 t.taskRunTime = now;
12868 if(rt === false || t.taskRunCount === t.repeat){
12873 if(t.duration && t.duration <= (now - t.taskStartTime)){
12880 * Queues a new task.
12881 * @param {Object} task
12883 this.start = function(task){
12885 task.taskStartTime = new Date().getTime();
12886 task.taskRunTime = 0;
12887 task.taskRunCount = 0;
12892 this.stop = function(task){
12897 this.stopAll = function(){
12899 for(var i = 0, len = tasks.length; i < len; i++){
12900 if(tasks[i].onStop){
12909 Roo.TaskMgr = new Roo.util.TaskRunner();/*
12911 * Ext JS Library 1.1.1
12912 * Copyright(c) 2006-2007, Ext JS, LLC.
12914 * Originally Released Under LGPL - original licence link has changed is not relivant.
12917 * <script type="text/javascript">
12922 * @class Roo.util.MixedCollection
12923 * @extends Roo.util.Observable
12924 * A Collection class that maintains both numeric indexes and keys and exposes events.
12926 * @param {Boolean} allowFunctions True if the addAll function should add function references to the
12927 * collection (defaults to false)
12928 * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection
12929 * and return the key value for that item. This is used when available to look up the key on items that
12930 * were passed without an explicit key parameter to a MixedCollection method. Passing this parameter is
12931 * equivalent to providing an implementation for the {@link #getKey} method.
12933 Roo.util.MixedCollection = function(allowFunctions, keyFn){
12941 * Fires when the collection is cleared.
12946 * Fires when an item is added to the collection.
12947 * @param {Number} index The index at which the item was added.
12948 * @param {Object} o The item added.
12949 * @param {String} key The key associated with the added item.
12954 * Fires when an item is replaced in the collection.
12955 * @param {String} key he key associated with the new added.
12956 * @param {Object} old The item being replaced.
12957 * @param {Object} new The new item.
12962 * Fires when an item is removed from the collection.
12963 * @param {Object} o The item being removed.
12964 * @param {String} key (optional) The key associated with the removed item.
12969 this.allowFunctions = allowFunctions === true;
12971 this.getKey = keyFn;
12973 Roo.util.MixedCollection.superclass.constructor.call(this);
12976 Roo.extend(Roo.util.MixedCollection, Roo.util.Observable, {
12977 allowFunctions : false,
12980 * Adds an item to the collection.
12981 * @param {String} key The key to associate with the item
12982 * @param {Object} o The item to add.
12983 * @return {Object} The item added.
12985 add : function(key, o){
12986 if(arguments.length == 1){
12988 key = this.getKey(o);
12990 if(typeof key == "undefined" || key === null){
12992 this.items.push(o);
12993 this.keys.push(null);
12995 var old = this.map[key];
12997 return this.replace(key, o);
13000 this.items.push(o);
13002 this.keys.push(key);
13004 this.fireEvent("add", this.length-1, o, key);
13009 * MixedCollection has a generic way to fetch keys if you implement getKey.
13012 var mc = new Roo.util.MixedCollection();
13013 mc.add(someEl.dom.id, someEl);
13014 mc.add(otherEl.dom.id, otherEl);
13018 var mc = new Roo.util.MixedCollection();
13019 mc.getKey = function(el){
13025 // or via the constructor
13026 var mc = new Roo.util.MixedCollection(false, function(el){
13032 * @param o {Object} The item for which to find the key.
13033 * @return {Object} The key for the passed item.
13035 getKey : function(o){
13040 * Replaces an item in the collection.
13041 * @param {String} key The key associated with the item to replace, or the item to replace.
13042 * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate with that key.
13043 * @return {Object} The new item.
13045 replace : function(key, o){
13046 if(arguments.length == 1){
13048 key = this.getKey(o);
13050 var old = this.item(key);
13051 if(typeof key == "undefined" || key === null || typeof old == "undefined"){
13052 return this.add(key, o);
13054 var index = this.indexOfKey(key);
13055 this.items[index] = o;
13057 this.fireEvent("replace", key, old, o);
13062 * Adds all elements of an Array or an Object to the collection.
13063 * @param {Object/Array} objs An Object containing properties which will be added to the collection, or
13064 * an Array of values, each of which are added to the collection.
13066 addAll : function(objs){
13067 if(arguments.length > 1 || objs instanceof Array){
13068 var args = arguments.length > 1 ? arguments : objs;
13069 for(var i = 0, len = args.length; i < len; i++){
13073 for(var key in objs){
13074 if(this.allowFunctions || typeof objs[key] != "function"){
13075 this.add(key, objs[key]);
13082 * Executes the specified function once for every item in the collection, passing each
13083 * item as the first and only parameter. returning false from the function will stop the iteration.
13084 * @param {Function} fn The function to execute for each item.
13085 * @param {Object} scope (optional) The scope in which to execute the function.
13087 each : function(fn, scope){
13088 var items = [].concat(this.items); // each safe for removal
13089 for(var i = 0, len = items.length; i < len; i++){
13090 if(fn.call(scope || items[i], items[i], i, len) === false){
13097 * Executes the specified function once for every key in the collection, passing each
13098 * key, and its associated item as the first two parameters.
13099 * @param {Function} fn The function to execute for each item.
13100 * @param {Object} scope (optional) The scope in which to execute the function.
13102 eachKey : function(fn, scope){
13103 for(var i = 0, len = this.keys.length; i < len; i++){
13104 fn.call(scope || window, this.keys[i], this.items[i], i, len);
13109 * Returns the first item in the collection which elicits a true return value from the
13110 * passed selection function.
13111 * @param {Function} fn The selection function to execute for each item.
13112 * @param {Object} scope (optional) The scope in which to execute the function.
13113 * @return {Object} The first item in the collection which returned true from the selection function.
13115 find : function(fn, scope){
13116 for(var i = 0, len = this.items.length; i < len; i++){
13117 if(fn.call(scope || window, this.items[i], this.keys[i])){
13118 return this.items[i];
13125 * Inserts an item at the specified index in the collection.
13126 * @param {Number} index The index to insert the item at.
13127 * @param {String} key The key to associate with the new item, or the item itself.
13128 * @param {Object} o (optional) If the second parameter was a key, the new item.
13129 * @return {Object} The item inserted.
13131 insert : function(index, key, o){
13132 if(arguments.length == 2){
13134 key = this.getKey(o);
13136 if(index >= this.length){
13137 return this.add(key, o);
13140 this.items.splice(index, 0, o);
13141 if(typeof key != "undefined" && key != null){
13144 this.keys.splice(index, 0, key);
13145 this.fireEvent("add", index, o, key);
13150 * Removed an item from the collection.
13151 * @param {Object} o The item to remove.
13152 * @return {Object} The item removed.
13154 remove : function(o){
13155 return this.removeAt(this.indexOf(o));
13159 * Remove an item from a specified index in the collection.
13160 * @param {Number} index The index within the collection of the item to remove.
13162 removeAt : function(index){
13163 if(index < this.length && index >= 0){
13165 var o = this.items[index];
13166 this.items.splice(index, 1);
13167 var key = this.keys[index];
13168 if(typeof key != "undefined"){
13169 delete this.map[key];
13171 this.keys.splice(index, 1);
13172 this.fireEvent("remove", o, key);
13177 * Removed an item associated with the passed key fom the collection.
13178 * @param {String} key The key of the item to remove.
13180 removeKey : function(key){
13181 return this.removeAt(this.indexOfKey(key));
13185 * Returns the number of items in the collection.
13186 * @return {Number} the number of items in the collection.
13188 getCount : function(){
13189 return this.length;
13193 * Returns index within the collection of the passed Object.
13194 * @param {Object} o The item to find the index of.
13195 * @return {Number} index of the item.
13197 indexOf : function(o){
13198 if(!this.items.indexOf){
13199 for(var i = 0, len = this.items.length; i < len; i++){
13200 if(this.items[i] == o) {
13206 return this.items.indexOf(o);
13211 * Returns index within the collection of the passed key.
13212 * @param {String} key The key to find the index of.
13213 * @return {Number} index of the key.
13215 indexOfKey : function(key){
13216 if(!this.keys.indexOf){
13217 for(var i = 0, len = this.keys.length; i < len; i++){
13218 if(this.keys[i] == key) {
13224 return this.keys.indexOf(key);
13229 * Returns the item associated with the passed key OR index. Key has priority over index.
13230 * @param {String/Number} key The key or index of the item.
13231 * @return {Object} The item associated with the passed key.
13233 item : function(key){
13234 var item = typeof this.map[key] != "undefined" ? this.map[key] : this.items[key];
13235 return typeof item != 'function' || this.allowFunctions ? item : null; // for prototype!
13239 * Returns the item at the specified index.
13240 * @param {Number} index The index of the item.
13243 itemAt : function(index){
13244 return this.items[index];
13248 * Returns the item associated with the passed key.
13249 * @param {String/Number} key The key of the item.
13250 * @return {Object} The item associated with the passed key.
13252 key : function(key){
13253 return this.map[key];
13257 * Returns true if the collection contains the passed Object as an item.
13258 * @param {Object} o The Object to look for in the collection.
13259 * @return {Boolean} True if the collection contains the Object as an item.
13261 contains : function(o){
13262 return this.indexOf(o) != -1;
13266 * Returns true if the collection contains the passed Object as a key.
13267 * @param {String} key The key to look for in the collection.
13268 * @return {Boolean} True if the collection contains the Object as a key.
13270 containsKey : function(key){
13271 return typeof this.map[key] != "undefined";
13275 * Removes all items from the collection.
13277 clear : function(){
13282 this.fireEvent("clear");
13286 * Returns the first item in the collection.
13287 * @return {Object} the first item in the collection..
13289 first : function(){
13290 return this.items[0];
13294 * Returns the last item in the collection.
13295 * @return {Object} the last item in the collection..
13298 return this.items[this.length-1];
13301 _sort : function(property, dir, fn){
13302 var dsc = String(dir).toUpperCase() == "DESC" ? -1 : 1;
13303 fn = fn || function(a, b){
13306 var c = [], k = this.keys, items = this.items;
13307 for(var i = 0, len = items.length; i < len; i++){
13308 c[c.length] = {key: k[i], value: items[i], index: i};
13310 c.sort(function(a, b){
13311 var v = fn(a[property], b[property]) * dsc;
13313 v = (a.index < b.index ? -1 : 1);
13317 for(var i = 0, len = c.length; i < len; i++){
13318 items[i] = c[i].value;
13321 this.fireEvent("sort", this);
13325 * Sorts this collection with the passed comparison function
13326 * @param {String} direction (optional) "ASC" or "DESC"
13327 * @param {Function} fn (optional) comparison function
13329 sort : function(dir, fn){
13330 this._sort("value", dir, fn);
13334 * Sorts this collection by keys
13335 * @param {String} direction (optional) "ASC" or "DESC"
13336 * @param {Function} fn (optional) a comparison function (defaults to case insensitive string)
13338 keySort : function(dir, fn){
13339 this._sort("key", dir, fn || function(a, b){
13340 return String(a).toUpperCase()-String(b).toUpperCase();
13345 * Returns a range of items in this collection
13346 * @param {Number} startIndex (optional) defaults to 0
13347 * @param {Number} endIndex (optional) default to the last item
13348 * @return {Array} An array of items
13350 getRange : function(start, end){
13351 var items = this.items;
13352 if(items.length < 1){
13355 start = start || 0;
13356 end = Math.min(typeof end == "undefined" ? this.length-1 : end, this.length-1);
13359 for(var i = start; i <= end; i++) {
13360 r[r.length] = items[i];
13363 for(var i = start; i >= end; i--) {
13364 r[r.length] = items[i];
13371 * Filter the <i>objects</i> in this collection by a specific property.
13372 * Returns a new collection that has been filtered.
13373 * @param {String} property A property on your objects
13374 * @param {String/RegExp} value Either string that the property values
13375 * should start with or a RegExp to test against the property
13376 * @return {MixedCollection} The new filtered collection
13378 filter : function(property, value){
13379 if(!value.exec){ // not a regex
13380 value = String(value);
13381 if(value.length == 0){
13382 return this.clone();
13384 value = new RegExp("^" + Roo.escapeRe(value), "i");
13386 return this.filterBy(function(o){
13387 return o && value.test(o[property]);
13392 * Filter by a function. * Returns a new collection that has been filtered.
13393 * The passed function will be called with each
13394 * object in the collection. If the function returns true, the value is included
13395 * otherwise it is filtered.
13396 * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)
13397 * @param {Object} scope (optional) The scope of the function (defaults to this)
13398 * @return {MixedCollection} The new filtered collection
13400 filterBy : function(fn, scope){
13401 var r = new Roo.util.MixedCollection();
13402 r.getKey = this.getKey;
13403 var k = this.keys, it = this.items;
13404 for(var i = 0, len = it.length; i < len; i++){
13405 if(fn.call(scope||this, it[i], k[i])){
13406 r.add(k[i], it[i]);
13413 * Creates a duplicate of this collection
13414 * @return {MixedCollection}
13416 clone : function(){
13417 var r = new Roo.util.MixedCollection();
13418 var k = this.keys, it = this.items;
13419 for(var i = 0, len = it.length; i < len; i++){
13420 r.add(k[i], it[i]);
13422 r.getKey = this.getKey;
13427 * Returns the item associated with the passed key or index.
13429 * @param {String/Number} key The key or index of the item.
13430 * @return {Object} The item associated with the passed key.
13432 Roo.util.MixedCollection.prototype.get = Roo.util.MixedCollection.prototype.item;/*
13434 * Ext JS Library 1.1.1
13435 * Copyright(c) 2006-2007, Ext JS, LLC.
13437 * Originally Released Under LGPL - original licence link has changed is not relivant.
13440 * <script type="text/javascript">
13443 * @class Roo.util.JSON
13444 * Modified version of Douglas Crockford"s json.js that doesn"t
13445 * mess with the Object prototype
13446 * http://www.json.org/js.html
13449 Roo.util.JSON = new (function(){
13450 var useHasOwn = {}.hasOwnProperty ? true : false;
13452 // crashes Safari in some instances
13453 //var validRE = /^("(\\.|[^"\\\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/;
13455 var pad = function(n) {
13456 return n < 10 ? "0" + n : n;
13469 var encodeString = function(s){
13470 if (/["\\\x00-\x1f]/.test(s)) {
13471 return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
13476 c = b.charCodeAt();
13478 Math.floor(c / 16).toString(16) +
13479 (c % 16).toString(16);
13482 return '"' + s + '"';
13485 var encodeArray = function(o){
13486 var a = ["["], b, i, l = o.length, v;
13487 for (i = 0; i < l; i += 1) {
13489 switch (typeof v) {
13498 a.push(v === null ? "null" : Roo.util.JSON.encode(v));
13506 var encodeDate = function(o){
13507 return '"' + o.getFullYear() + "-" +
13508 pad(o.getMonth() + 1) + "-" +
13509 pad(o.getDate()) + "T" +
13510 pad(o.getHours()) + ":" +
13511 pad(o.getMinutes()) + ":" +
13512 pad(o.getSeconds()) + '"';
13516 * Encodes an Object, Array or other value
13517 * @param {Mixed} o The variable to encode
13518 * @return {String} The JSON string
13520 this.encode = function(o)
13522 // should this be extended to fully wrap stringify..
13524 if(typeof o == "undefined" || o === null){
13526 }else if(o instanceof Array){
13527 return encodeArray(o);
13528 }else if(o instanceof Date){
13529 return encodeDate(o);
13530 }else if(typeof o == "string"){
13531 return encodeString(o);
13532 }else if(typeof o == "number"){
13533 return isFinite(o) ? String(o) : "null";
13534 }else if(typeof o == "boolean"){
13537 var a = ["{"], b, i, v;
13539 if(!useHasOwn || o.hasOwnProperty(i)) {
13541 switch (typeof v) {
13550 a.push(this.encode(i), ":",
13551 v === null ? "null" : this.encode(v));
13562 * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError.
13563 * @param {String} json The JSON string
13564 * @return {Object} The resulting object
13566 this.decode = function(json){
13568 return /** eval:var:json */ eval("(" + json + ')');
13572 * Shorthand for {@link Roo.util.JSON#encode}
13573 * @member Roo encode
13575 Roo.encode = typeof(JSON) != 'undefined' && JSON.stringify ? JSON.stringify : Roo.util.JSON.encode;
13577 * Shorthand for {@link Roo.util.JSON#decode}
13578 * @member Roo decode
13580 Roo.decode = typeof(JSON) != 'undefined' && JSON.parse ? JSON.parse : Roo.util.JSON.decode;
13583 * Ext JS Library 1.1.1
13584 * Copyright(c) 2006-2007, Ext JS, LLC.
13586 * Originally Released Under LGPL - original licence link has changed is not relivant.
13589 * <script type="text/javascript">
13593 * @class Roo.util.Format
13594 * Reusable data formatting functions
13597 Roo.util.Format = function(){
13598 var trimRe = /^\s+|\s+$/g;
13601 * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length
13602 * @param {String} value The string to truncate
13603 * @param {Number} length The maximum length to allow before truncating
13604 * @return {String} The converted text
13606 ellipsis : function(value, len){
13607 if(value && value.length > len){
13608 return value.substr(0, len-3)+"...";
13614 * Checks a reference and converts it to empty string if it is undefined
13615 * @param {Mixed} value Reference to check
13616 * @return {Mixed} Empty string if converted, otherwise the original value
13618 undef : function(value){
13619 return typeof value != "undefined" ? value : "";
13623 * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
13624 * @param {String} value The string to encode
13625 * @return {String} The encoded text
13627 htmlEncode : function(value){
13628 return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);
13632 * Convert certain characters (&, <, >, and ') from their HTML character equivalents.
13633 * @param {String} value The string to decode
13634 * @return {String} The decoded text
13636 htmlDecode : function(value){
13637 return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"');
13641 * Trims any whitespace from either side of a string
13642 * @param {String} value The text to trim
13643 * @return {String} The trimmed text
13645 trim : function(value){
13646 return String(value).replace(trimRe, "");
13650 * Returns a substring from within an original string
13651 * @param {String} value The original text
13652 * @param {Number} start The start index of the substring
13653 * @param {Number} length The length of the substring
13654 * @return {String} The substring
13656 substr : function(value, start, length){
13657 return String(value).substr(start, length);
13661 * Converts a string to all lower case letters
13662 * @param {String} value The text to convert
13663 * @return {String} The converted text
13665 lowercase : function(value){
13666 return String(value).toLowerCase();
13670 * Converts a string to all upper case letters
13671 * @param {String} value The text to convert
13672 * @return {String} The converted text
13674 uppercase : function(value){
13675 return String(value).toUpperCase();
13679 * Converts the first character only of a string to upper case
13680 * @param {String} value The text to convert
13681 * @return {String} The converted text
13683 capitalize : function(value){
13684 return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
13688 call : function(value, fn){
13689 if(arguments.length > 2){
13690 var args = Array.prototype.slice.call(arguments, 2);
13691 args.unshift(value);
13693 return /** eval:var:value */ eval(fn).apply(window, args);
13695 /** eval:var:value */
13696 return /** eval:var:value */ eval(fn).call(window, value);
13702 * safer version of Math.toFixed..??/
13703 * @param {Number/String} value The numeric value to format
13704 * @param {Number/String} value Decimal places
13705 * @return {String} The formatted currency string
13707 toFixed : function(v, n)
13709 // why not use to fixed - precision is buggered???
13711 return Math.round(v-0);
13713 var fact = Math.pow(10,n+1);
13714 v = (Math.round((v-0)*fact))/fact;
13715 var z = (''+fact).substring(2);
13716 if (v == Math.floor(v)) {
13717 return Math.floor(v) + '.' + z;
13720 // now just padd decimals..
13721 var ps = String(v).split('.');
13722 var fd = (ps[1] + z);
13723 var r = fd.substring(0,n);
13724 var rm = fd.substring(n);
13726 return ps[0] + '.' + r;
13728 r*=1; // turn it into a number;
13730 if (String(r).length != n) {
13733 r = String(r).substring(1); // chop the end off.
13736 return ps[0] + '.' + r;
13741 * Format a number as US currency
13742 * @param {Number/String} value The numeric value to format
13743 * @return {String} The formatted currency string
13745 usMoney : function(v){
13746 return '$' + Roo.util.Format.number(v);
13751 * eventually this should probably emulate php's number_format
13752 * @param {Number/String} value The numeric value to format
13753 * @param {Number} decimals number of decimal places
13754 * @return {String} The formatted currency string
13756 number : function(v,decimals)
13758 // multiply and round.
13759 decimals = typeof(decimals) == 'undefined' ? 2 : decimals;
13760 var mul = Math.pow(10, decimals);
13761 var zero = String(mul).substring(1);
13762 v = (Math.round((v-0)*mul))/mul;
13764 // if it's '0' number.. then
13766 //v = (v == Math.floor(v)) ? v + "." + zero : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
13768 var ps = v.split('.');
13772 var r = /(\d+)(\d{3})/;
13774 while (r.test(whole)) {
13775 whole = whole.replace(r, '$1' + ',' + '$2');
13781 (decimals ? ('.'+ ps[1] + zero.substring(ps[1].length)) : '') :
13782 // does not have decimals
13783 (decimals ? ('.' + zero) : '');
13786 return whole + sub ;
13790 * Parse a value into a formatted date using the specified format pattern.
13791 * @param {Mixed} value The value to format
13792 * @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')
13793 * @return {String} The formatted date string
13795 date : function(v, format){
13799 if(!(v instanceof Date)){
13800 v = new Date(Date.parse(v));
13802 return v.dateFormat(format || Roo.util.Format.defaults.date);
13806 * Returns a date rendering function that can be reused to apply a date format multiple times efficiently
13807 * @param {String} format Any valid date format string
13808 * @return {Function} The date formatting function
13810 dateRenderer : function(format){
13811 return function(v){
13812 return Roo.util.Format.date(v, format);
13817 stripTagsRE : /<\/?[^>]+>/gi,
13820 * Strips all HTML tags
13821 * @param {Mixed} value The text from which to strip tags
13822 * @return {String} The stripped text
13824 stripTags : function(v){
13825 return !v ? v : String(v).replace(this.stripTagsRE, "");
13829 Roo.util.Format.defaults = {
13833 * Ext JS Library 1.1.1
13834 * Copyright(c) 2006-2007, Ext JS, LLC.
13836 * Originally Released Under LGPL - original licence link has changed is not relivant.
13839 * <script type="text/javascript">
13846 * @class Roo.MasterTemplate
13847 * @extends Roo.Template
13848 * Provides a template that can have child templates. The syntax is:
13850 var t = new Roo.MasterTemplate(
13851 '<select name="{name}">',
13852 '<tpl name="options"><option value="{value:trim}">{text:ellipsis(10)}</option></tpl>',
13855 t.add('options', {value: 'foo', text: 'bar'});
13856 // or you can add multiple child elements in one shot
13857 t.addAll('options', [
13858 {value: 'foo', text: 'bar'},
13859 {value: 'foo2', text: 'bar2'},
13860 {value: 'foo3', text: 'bar3'}
13862 // then append, applying the master template values
13863 t.append('my-form', {name: 'my-select'});
13865 * A name attribute for the child template is not required if you have only one child
13866 * template or you want to refer to them by index.
13868 Roo.MasterTemplate = function(){
13869 Roo.MasterTemplate.superclass.constructor.apply(this, arguments);
13870 this.originalHtml = this.html;
13872 var m, re = this.subTemplateRe;
13875 while(m = re.exec(this.html)){
13876 var name = m[1], content = m[2];
13881 tpl : new Roo.Template(content)
13884 st[name] = st[subIndex];
13886 st[subIndex].tpl.compile();
13887 st[subIndex].tpl.call = this.call.createDelegate(this);
13890 this.subCount = subIndex;
13893 Roo.extend(Roo.MasterTemplate, Roo.Template, {
13895 * The regular expression used to match sub templates
13899 subTemplateRe : /<tpl(?:\sname="([\w-]+)")?>((?:.|\n)*?)<\/tpl>/gi,
13902 * Applies the passed values to a child template.
13903 * @param {String/Number} name (optional) The name or index of the child template
13904 * @param {Array/Object} values The values to be applied to the template
13905 * @return {MasterTemplate} this
13907 add : function(name, values){
13908 if(arguments.length == 1){
13909 values = arguments[0];
13912 var s = this.subs[name];
13913 s.buffer[s.buffer.length] = s.tpl.apply(values);
13918 * Applies all the passed values to a child template.
13919 * @param {String/Number} name (optional) The name or index of the child template
13920 * @param {Array} values The values to be applied to the template, this should be an array of objects.
13921 * @param {Boolean} reset (optional) True to reset the template first
13922 * @return {MasterTemplate} this
13924 fill : function(name, values, reset){
13926 if(a.length == 1 || (a.length == 2 && typeof a[1] == "boolean")){
13934 for(var i = 0, len = values.length; i < len; i++){
13935 this.add(name, values[i]);
13941 * Resets the template for reuse
13942 * @return {MasterTemplate} this
13944 reset : function(){
13946 for(var i = 0; i < this.subCount; i++){
13952 applyTemplate : function(values){
13954 var replaceIndex = -1;
13955 this.html = this.originalHtml.replace(this.subTemplateRe, function(m, name){
13956 return s[++replaceIndex].buffer.join("");
13958 return Roo.MasterTemplate.superclass.applyTemplate.call(this, values);
13961 apply : function(){
13962 return this.applyTemplate.apply(this, arguments);
13965 compile : function(){return this;}
13969 * Alias for fill().
13972 Roo.MasterTemplate.prototype.addAll = Roo.MasterTemplate.prototype.fill;
13974 * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML. e.g.
13975 * var tpl = Roo.MasterTemplate.from('element-id');
13976 * @param {String/HTMLElement} el
13977 * @param {Object} config
13980 Roo.MasterTemplate.from = function(el, config){
13981 el = Roo.getDom(el);
13982 return new Roo.MasterTemplate(el.value || el.innerHTML, config || '');
13985 * Ext JS Library 1.1.1
13986 * Copyright(c) 2006-2007, Ext JS, LLC.
13988 * Originally Released Under LGPL - original licence link has changed is not relivant.
13991 * <script type="text/javascript">
13996 * @class Roo.util.CSS
13997 * Utility class for manipulating CSS rules
14000 Roo.util.CSS = function(){
14002 var doc = document;
14004 var camelRe = /(-[a-z])/gi;
14005 var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
14009 * Very simple dynamic creation of stylesheets from a text blob of rules. The text will wrapped in a style
14010 * tag and appended to the HEAD of the document.
14011 * @param {String|Object} cssText The text containing the css rules
14012 * @param {String} id An id to add to the stylesheet for later removal
14013 * @return {StyleSheet}
14015 createStyleSheet : function(cssText, id){
14017 var head = doc.getElementsByTagName("head")[0];
14018 var nrules = doc.createElement("style");
14019 nrules.setAttribute("type", "text/css");
14021 nrules.setAttribute("id", id);
14023 if (typeof(cssText) != 'string') {
14024 // support object maps..
14025 // not sure if this a good idea..
14026 // perhaps it should be merged with the general css handling
14027 // and handle js style props.
14028 var cssTextNew = [];
14029 for(var n in cssText) {
14031 for(var k in cssText[n]) {
14032 citems.push( k + ' : ' +cssText[n][k] + ';' );
14034 cssTextNew.push( n + ' { ' + citems.join(' ') + '} ');
14037 cssText = cssTextNew.join("\n");
14043 head.appendChild(nrules);
14044 ss = nrules.styleSheet;
14045 ss.cssText = cssText;
14048 nrules.appendChild(doc.createTextNode(cssText));
14050 nrules.cssText = cssText;
14052 head.appendChild(nrules);
14053 ss = nrules.styleSheet ? nrules.styleSheet : (nrules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
14055 this.cacheStyleSheet(ss);
14060 * Removes a style or link tag by id
14061 * @param {String} id The id of the tag
14063 removeStyleSheet : function(id){
14064 var existing = doc.getElementById(id);
14066 existing.parentNode.removeChild(existing);
14071 * Dynamically swaps an existing stylesheet reference for a new one
14072 * @param {String} id The id of an existing link tag to remove
14073 * @param {String} url The href of the new stylesheet to include
14075 swapStyleSheet : function(id, url){
14076 this.removeStyleSheet(id);
14077 var ss = doc.createElement("link");
14078 ss.setAttribute("rel", "stylesheet");
14079 ss.setAttribute("type", "text/css");
14080 ss.setAttribute("id", id);
14081 ss.setAttribute("href", url);
14082 doc.getElementsByTagName("head")[0].appendChild(ss);
14086 * Refresh the rule cache if you have dynamically added stylesheets
14087 * @return {Object} An object (hash) of rules indexed by selector
14089 refreshCache : function(){
14090 return this.getRules(true);
14094 cacheStyleSheet : function(stylesheet){
14098 try{// try catch for cross domain access issue
14099 var ssRules = stylesheet.cssRules || stylesheet.rules;
14100 for(var j = ssRules.length-1; j >= 0; --j){
14101 rules[ssRules[j].selectorText] = ssRules[j];
14107 * Gets all css rules for the document
14108 * @param {Boolean} refreshCache true to refresh the internal cache
14109 * @return {Object} An object (hash) of rules indexed by selector
14111 getRules : function(refreshCache){
14112 if(rules == null || refreshCache){
14114 var ds = doc.styleSheets;
14115 for(var i =0, len = ds.length; i < len; i++){
14117 this.cacheStyleSheet(ds[i]);
14125 * Gets an an individual CSS rule by selector(s)
14126 * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
14127 * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
14128 * @return {CSSRule} The CSS rule or null if one is not found
14130 getRule : function(selector, refreshCache){
14131 var rs = this.getRules(refreshCache);
14132 if(!(selector instanceof Array)){
14133 return rs[selector];
14135 for(var i = 0; i < selector.length; i++){
14136 if(rs[selector[i]]){
14137 return rs[selector[i]];
14145 * Updates a rule property
14146 * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
14147 * @param {String} property The css property
14148 * @param {String} value The new value for the property
14149 * @return {Boolean} true If a rule was found and updated
14151 updateRule : function(selector, property, value){
14152 if(!(selector instanceof Array)){
14153 var rule = this.getRule(selector);
14155 rule.style[property.replace(camelRe, camelFn)] = value;
14159 for(var i = 0; i < selector.length; i++){
14160 if(this.updateRule(selector[i], property, value)){
14170 * Ext JS Library 1.1.1
14171 * Copyright(c) 2006-2007, Ext JS, LLC.
14173 * Originally Released Under LGPL - original licence link has changed is not relivant.
14176 * <script type="text/javascript">
14182 * @class Roo.util.ClickRepeater
14183 * @extends Roo.util.Observable
14185 * A wrapper class which can be applied to any element. Fires a "click" event while the
14186 * mouse is pressed. The interval between firings may be specified in the config but
14187 * defaults to 10 milliseconds.
14189 * Optionally, a CSS class may be applied to the element during the time it is pressed.
14191 * @cfg {String/HTMLElement/Element} el The element to act as a button.
14192 * @cfg {Number} delay The initial delay before the repeating event begins firing.
14193 * Similar to an autorepeat key delay.
14194 * @cfg {Number} interval The interval between firings of the "click" event. Default 10 ms.
14195 * @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
14196 * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
14197 * "interval" and "delay" are ignored. "immediate" is honored.
14198 * @cfg {Boolean} preventDefault True to prevent the default click event
14199 * @cfg {Boolean} stopDefault True to stop the default click event
14202 * 2007-02-02 jvs Original code contributed by Nige "Animal" White
14203 * 2007-02-02 jvs Renamed to ClickRepeater
14204 * 2007-02-03 jvs Modifications for FF Mac and Safari
14207 * @param {String/HTMLElement/Element} el The element to listen on
14208 * @param {Object} config
14210 Roo.util.ClickRepeater = function(el, config)
14212 this.el = Roo.get(el);
14213 this.el.unselectable();
14215 Roo.apply(this, config);
14220 * Fires when the mouse button is depressed.
14221 * @param {Roo.util.ClickRepeater} this
14223 "mousedown" : true,
14226 * Fires on a specified interval during the time the element is pressed.
14227 * @param {Roo.util.ClickRepeater} this
14232 * Fires when the mouse key is released.
14233 * @param {Roo.util.ClickRepeater} this
14238 this.el.on("mousedown", this.handleMouseDown, this);
14239 if(this.preventDefault || this.stopDefault){
14240 this.el.on("click", function(e){
14241 if(this.preventDefault){
14242 e.preventDefault();
14244 if(this.stopDefault){
14250 // allow inline handler
14252 this.on("click", this.handler, this.scope || this);
14255 Roo.util.ClickRepeater.superclass.constructor.call(this);
14258 Roo.extend(Roo.util.ClickRepeater, Roo.util.Observable, {
14261 preventDefault : true,
14262 stopDefault : false,
14266 handleMouseDown : function(){
14267 clearTimeout(this.timer);
14269 if(this.pressClass){
14270 this.el.addClass(this.pressClass);
14272 this.mousedownTime = new Date();
14274 Roo.get(document).on("mouseup", this.handleMouseUp, this);
14275 this.el.on("mouseout", this.handleMouseOut, this);
14277 this.fireEvent("mousedown", this);
14278 this.fireEvent("click", this);
14280 this.timer = this.click.defer(this.delay || this.interval, this);
14284 click : function(){
14285 this.fireEvent("click", this);
14286 this.timer = this.click.defer(this.getInterval(), this);
14290 getInterval: function(){
14291 if(!this.accelerate){
14292 return this.interval;
14294 var pressTime = this.mousedownTime.getElapsed();
14295 if(pressTime < 500){
14297 }else if(pressTime < 1700){
14299 }else if(pressTime < 2600){
14301 }else if(pressTime < 3500){
14303 }else if(pressTime < 4400){
14305 }else if(pressTime < 5300){
14307 }else if(pressTime < 6200){
14315 handleMouseOut : function(){
14316 clearTimeout(this.timer);
14317 if(this.pressClass){
14318 this.el.removeClass(this.pressClass);
14320 this.el.on("mouseover", this.handleMouseReturn, this);
14324 handleMouseReturn : function(){
14325 this.el.un("mouseover", this.handleMouseReturn);
14326 if(this.pressClass){
14327 this.el.addClass(this.pressClass);
14333 handleMouseUp : function(){
14334 clearTimeout(this.timer);
14335 this.el.un("mouseover", this.handleMouseReturn);
14336 this.el.un("mouseout", this.handleMouseOut);
14337 Roo.get(document).un("mouseup", this.handleMouseUp);
14338 this.el.removeClass(this.pressClass);
14339 this.fireEvent("mouseup", this);
14343 * Ext JS Library 1.1.1
14344 * Copyright(c) 2006-2007, Ext JS, LLC.
14346 * Originally Released Under LGPL - original licence link has changed is not relivant.
14349 * <script type="text/javascript">
14354 * @class Roo.KeyNav
14355 * <p>Provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind
14356 * navigation keys to function calls that will get called when the keys are pressed, providing an easy
14357 * way to implement custom navigation schemes for any UI component.</p>
14358 * <p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
14359 * pageUp, pageDown, del, home, end. Usage:</p>
14361 var nav = new Roo.KeyNav("my-element", {
14362 "left" : function(e){
14363 this.moveLeft(e.ctrlKey);
14365 "right" : function(e){
14366 this.moveRight(e.ctrlKey);
14368 "enter" : function(e){
14375 * @param {String/HTMLElement/Roo.Element} el The element to bind to
14376 * @param {Object} config The config
14378 Roo.KeyNav = function(el, config){
14379 this.el = Roo.get(el);
14380 Roo.apply(this, config);
14381 if(!this.disabled){
14382 this.disabled = true;
14387 Roo.KeyNav.prototype = {
14389 * @cfg {Boolean} disabled
14390 * True to disable this KeyNav instance (defaults to false)
14394 * @cfg {String} defaultEventAction
14395 * The method to call on the {@link Roo.EventObject} after this KeyNav intercepts a key. Valid values are
14396 * {@link Roo.EventObject#stopEvent}, {@link Roo.EventObject#preventDefault} and
14397 * {@link Roo.EventObject#stopPropagation} (defaults to 'stopEvent')
14399 defaultEventAction: "stopEvent",
14401 * @cfg {Boolean} forceKeyDown
14402 * Handle the keydown event instead of keypress (defaults to false). KeyNav automatically does this for IE since
14403 * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
14404 * handle keydown instead of keypress.
14406 forceKeyDown : false,
14409 prepareEvent : function(e){
14410 var k = e.getKey();
14411 var h = this.keyToHandler[k];
14412 //if(h && this[h]){
14413 // e.stopPropagation();
14415 if(Roo.isSafari && h && k >= 37 && k <= 40){
14421 relay : function(e){
14422 var k = e.getKey();
14423 var h = this.keyToHandler[k];
14425 if(this.doRelay(e, this[h], h) !== true){
14426 e[this.defaultEventAction]();
14432 doRelay : function(e, h, hname){
14433 return h.call(this.scope || this, e);
14436 // possible handlers
14450 // quick lookup hash
14467 * Enable this KeyNav
14469 enable: function(){
14471 // ie won't do special keys on keypress, no one else will repeat keys with keydown
14472 // the EventObject will normalize Safari automatically
14473 if(this.forceKeyDown || Roo.isIE || Roo.isAir){
14474 this.el.on("keydown", this.relay, this);
14476 this.el.on("keydown", this.prepareEvent, this);
14477 this.el.on("keypress", this.relay, this);
14479 this.disabled = false;
14484 * Disable this KeyNav
14486 disable: function(){
14487 if(!this.disabled){
14488 if(this.forceKeyDown || Roo.isIE || Roo.isAir){
14489 this.el.un("keydown", this.relay);
14491 this.el.un("keydown", this.prepareEvent);
14492 this.el.un("keypress", this.relay);
14494 this.disabled = true;
14499 * Ext JS Library 1.1.1
14500 * Copyright(c) 2006-2007, Ext JS, LLC.
14502 * Originally Released Under LGPL - original licence link has changed is not relivant.
14505 * <script type="text/javascript">
14510 * @class Roo.KeyMap
14511 * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
14512 * The constructor accepts the same config object as defined by {@link #addBinding}.
14513 * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
14514 * combination it will call the function with this signature (if the match is a multi-key
14515 * combination the callback will still be called only once): (String key, Roo.EventObject e)
14516 * A KeyMap can also handle a string representation of keys.<br />
14519 // map one key by key code
14520 var map = new Roo.KeyMap("my-element", {
14521 key: 13, // or Roo.EventObject.ENTER
14526 // map multiple keys to one action by string
14527 var map = new Roo.KeyMap("my-element", {
14533 // map multiple keys to multiple actions by strings and array of codes
14534 var map = new Roo.KeyMap("my-element", [
14537 fn: function(){ alert("Return was pressed"); }
14540 fn: function(){ alert('a, b or c was pressed'); }
14545 fn: function(){ alert('Control + shift + tab was pressed.'); }
14549 * <b>Note: A KeyMap starts enabled</b>
14551 * @param {String/HTMLElement/Roo.Element} el The element to bind to
14552 * @param {Object} config The config (see {@link #addBinding})
14553 * @param {String} eventName (optional) The event to bind to (defaults to "keydown")
14555 Roo.KeyMap = function(el, config, eventName){
14556 this.el = Roo.get(el);
14557 this.eventName = eventName || "keydown";
14558 this.bindings = [];
14560 this.addBinding(config);
14565 Roo.KeyMap.prototype = {
14567 * True to stop the event from bubbling and prevent the default browser action if the
14568 * key was handled by the KeyMap (defaults to false)
14574 * Add a new binding to this KeyMap. The following config object properties are supported:
14576 Property Type Description
14577 ---------- --------------- ----------------------------------------------------------------------
14578 key String/Array A single keycode or an array of keycodes to handle
14579 shift Boolean True to handle key only when shift is pressed (defaults to false)
14580 ctrl Boolean True to handle key only when ctrl is pressed (defaults to false)
14581 alt Boolean True to handle key only when alt is pressed (defaults to false)
14582 fn Function The function to call when KeyMap finds the expected key combination
14583 scope Object The scope of the callback function
14589 var map = new Roo.KeyMap(document, {
14590 key: Roo.EventObject.ENTER,
14595 //Add a new binding to the existing KeyMap later
14603 * @param {Object/Array} config A single KeyMap config or an array of configs
14605 addBinding : function(config){
14606 if(config instanceof Array){
14607 for(var i = 0, len = config.length; i < len; i++){
14608 this.addBinding(config[i]);
14612 var keyCode = config.key,
14613 shift = config.shift,
14614 ctrl = config.ctrl,
14617 scope = config.scope;
14618 if(typeof keyCode == "string"){
14620 var keyString = keyCode.toUpperCase();
14621 for(var j = 0, len = keyString.length; j < len; j++){
14622 ks.push(keyString.charCodeAt(j));
14626 var keyArray = keyCode instanceof Array;
14627 var handler = function(e){
14628 if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
14629 var k = e.getKey();
14631 for(var i = 0, len = keyCode.length; i < len; i++){
14632 if(keyCode[i] == k){
14633 if(this.stopEvent){
14636 fn.call(scope || window, k, e);
14642 if(this.stopEvent){
14645 fn.call(scope || window, k, e);
14650 this.bindings.push(handler);
14654 * Shorthand for adding a single key listener
14655 * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the
14656 * following options:
14657 * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
14658 * @param {Function} fn The function to call
14659 * @param {Object} scope (optional) The scope of the function
14661 on : function(key, fn, scope){
14662 var keyCode, shift, ctrl, alt;
14663 if(typeof key == "object" && !(key instanceof Array)){
14682 handleKeyDown : function(e){
14683 if(this.enabled){ //just in case
14684 var b = this.bindings;
14685 for(var i = 0, len = b.length; i < len; i++){
14686 b[i].call(this, e);
14692 * Returns true if this KeyMap is enabled
14693 * @return {Boolean}
14695 isEnabled : function(){
14696 return this.enabled;
14700 * Enables this KeyMap
14702 enable: function(){
14704 this.el.on(this.eventName, this.handleKeyDown, this);
14705 this.enabled = true;
14710 * Disable this KeyMap
14712 disable: function(){
14714 this.el.removeListener(this.eventName, this.handleKeyDown, this);
14715 this.enabled = false;
14720 * Ext JS Library 1.1.1
14721 * Copyright(c) 2006-2007, Ext JS, LLC.
14723 * Originally Released Under LGPL - original licence link has changed is not relivant.
14726 * <script type="text/javascript">
14731 * @class Roo.util.TextMetrics
14732 * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
14733 * wide, in pixels, a given block of text will be.
14736 Roo.util.TextMetrics = function(){
14740 * Measures the size of the specified text
14741 * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
14742 * that can affect the size of the rendered text
14743 * @param {String} text The text to measure
14744 * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
14745 * in order to accurately measure the text height
14746 * @return {Object} An object containing the text's size {width: (width), height: (height)}
14748 measure : function(el, text, fixedWidth){
14750 shared = Roo.util.TextMetrics.Instance(el, fixedWidth);
14753 shared.setFixedWidth(fixedWidth || 'auto');
14754 return shared.getSize(text);
14758 * Return a unique TextMetrics instance that can be bound directly to an element and reused. This reduces
14759 * the overhead of multiple calls to initialize the style properties on each measurement.
14760 * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
14761 * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
14762 * in order to accurately measure the text height
14763 * @return {Roo.util.TextMetrics.Instance} instance The new instance
14765 createInstance : function(el, fixedWidth){
14766 return Roo.util.TextMetrics.Instance(el, fixedWidth);
14773 Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth){
14774 var ml = new Roo.Element(document.createElement('div'));
14775 document.body.appendChild(ml.dom);
14776 ml.position('absolute');
14777 ml.setLeftTop(-1000, -1000);
14781 ml.setWidth(fixedWidth);
14786 * Returns the size of the specified text based on the internal element's style and width properties
14787 * @memberOf Roo.util.TextMetrics.Instance#
14788 * @param {String} text The text to measure
14789 * @return {Object} An object containing the text's size {width: (width), height: (height)}
14791 getSize : function(text){
14793 var s = ml.getSize();
14799 * Binds this TextMetrics instance to an element from which to copy existing CSS styles
14800 * that can affect the size of the rendered text
14801 * @memberOf Roo.util.TextMetrics.Instance#
14802 * @param {String/HTMLElement} el The element, dom node or id
14804 bind : function(el){
14806 Roo.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
14811 * Sets a fixed width on the internal measurement element. If the text will be multiline, you have
14812 * to set a fixed width in order to accurately measure the text height.
14813 * @memberOf Roo.util.TextMetrics.Instance#
14814 * @param {Number} width The width to set on the element
14816 setFixedWidth : function(width){
14817 ml.setWidth(width);
14821 * Returns the measured width of the specified text
14822 * @memberOf Roo.util.TextMetrics.Instance#
14823 * @param {String} text The text to measure
14824 * @return {Number} width The width in pixels
14826 getWidth : function(text){
14827 ml.dom.style.width = 'auto';
14828 return this.getSize(text).width;
14832 * Returns the measured height of the specified text. For multiline text, be sure to call
14833 * {@link #setFixedWidth} if necessary.
14834 * @memberOf Roo.util.TextMetrics.Instance#
14835 * @param {String} text The text to measure
14836 * @return {Number} height The height in pixels
14838 getHeight : function(text){
14839 return this.getSize(text).height;
14843 instance.bind(bindTo);
14848 // backwards compat
14849 Roo.Element.measureText = Roo.util.TextMetrics.measure;/*
14851 * Ext JS Library 1.1.1
14852 * Copyright(c) 2006-2007, Ext JS, LLC.
14854 * Originally Released Under LGPL - original licence link has changed is not relivant.
14857 * <script type="text/javascript">
14861 * @class Roo.state.Provider
14862 * Abstract base class for state provider implementations. This class provides methods
14863 * for encoding and decoding <b>typed</b> variables including dates and defines the
14864 * Provider interface.
14866 Roo.state.Provider = function(){
14868 * @event statechange
14869 * Fires when a state change occurs.
14870 * @param {Provider} this This state provider
14871 * @param {String} key The state key which was changed
14872 * @param {String} value The encoded value for the state
14875 "statechange": true
14878 Roo.state.Provider.superclass.constructor.call(this);
14880 Roo.extend(Roo.state.Provider, Roo.util.Observable, {
14882 * Returns the current value for a key
14883 * @param {String} name The key name
14884 * @param {Mixed} defaultValue A default value to return if the key's value is not found
14885 * @return {Mixed} The state data
14887 get : function(name, defaultValue){
14888 return typeof this.state[name] == "undefined" ?
14889 defaultValue : this.state[name];
14893 * Clears a value from the state
14894 * @param {String} name The key name
14896 clear : function(name){
14897 delete this.state[name];
14898 this.fireEvent("statechange", this, name, null);
14902 * Sets the value for a key
14903 * @param {String} name The key name
14904 * @param {Mixed} value The value to set
14906 set : function(name, value){
14907 this.state[name] = value;
14908 this.fireEvent("statechange", this, name, value);
14912 * Decodes a string previously encoded with {@link #encodeValue}.
14913 * @param {String} value The value to decode
14914 * @return {Mixed} The decoded value
14916 decodeValue : function(cookie){
14917 var re = /^(a|n|d|b|s|o)\:(.*)$/;
14918 var matches = re.exec(unescape(cookie));
14919 if(!matches || !matches[1]) {
14920 return; // non state cookie
14922 var type = matches[1];
14923 var v = matches[2];
14926 return parseFloat(v);
14928 return new Date(Date.parse(v));
14933 var values = v.split("^");
14934 for(var i = 0, len = values.length; i < len; i++){
14935 all.push(this.decodeValue(values[i]));
14940 var values = v.split("^");
14941 for(var i = 0, len = values.length; i < len; i++){
14942 var kv = values[i].split("=");
14943 all[kv[0]] = this.decodeValue(kv[1]);
14952 * Encodes a value including type information. Decode with {@link #decodeValue}.
14953 * @param {Mixed} value The value to encode
14954 * @return {String} The encoded value
14956 encodeValue : function(v){
14958 if(typeof v == "number"){
14960 }else if(typeof v == "boolean"){
14961 enc = "b:" + (v ? "1" : "0");
14962 }else if(v instanceof Date){
14963 enc = "d:" + v.toGMTString();
14964 }else if(v instanceof Array){
14966 for(var i = 0, len = v.length; i < len; i++){
14967 flat += this.encodeValue(v[i]);
14973 }else if(typeof v == "object"){
14976 if(typeof v[key] != "function"){
14977 flat += key + "=" + this.encodeValue(v[key]) + "^";
14980 enc = "o:" + flat.substring(0, flat.length-1);
14984 return escape(enc);
14990 * Ext JS Library 1.1.1
14991 * Copyright(c) 2006-2007, Ext JS, LLC.
14993 * Originally Released Under LGPL - original licence link has changed is not relivant.
14996 * <script type="text/javascript">
14999 * @class Roo.state.Manager
15000 * This is the global state manager. By default all components that are "state aware" check this class
15001 * for state information if you don't pass them a custom state provider. In order for this class
15002 * to be useful, it must be initialized with a provider when your application initializes.
15004 // in your initialization function
15006 Roo.state.Manager.setProvider(new Roo.state.CookieProvider());
15008 // supposed you have a {@link Roo.BorderLayout}
15009 var layout = new Roo.BorderLayout(...);
15010 layout.restoreState();
15011 // or a {Roo.BasicDialog}
15012 var dialog = new Roo.BasicDialog(...);
15013 dialog.restoreState();
15017 Roo.state.Manager = function(){
15018 var provider = new Roo.state.Provider();
15022 * Configures the default state provider for your application
15023 * @param {Provider} stateProvider The state provider to set
15025 setProvider : function(stateProvider){
15026 provider = stateProvider;
15030 * Returns the current value for a key
15031 * @param {String} name The key name
15032 * @param {Mixed} defaultValue The default value to return if the key lookup does not match
15033 * @return {Mixed} The state data
15035 get : function(key, defaultValue){
15036 return provider.get(key, defaultValue);
15040 * Sets the value for a key
15041 * @param {String} name The key name
15042 * @param {Mixed} value The state data
15044 set : function(key, value){
15045 provider.set(key, value);
15049 * Clears a value from the state
15050 * @param {String} name The key name
15052 clear : function(key){
15053 provider.clear(key);
15057 * Gets the currently configured state provider
15058 * @return {Provider} The state provider
15060 getProvider : function(){
15067 * Ext JS Library 1.1.1
15068 * Copyright(c) 2006-2007, Ext JS, LLC.
15070 * Originally Released Under LGPL - original licence link has changed is not relivant.
15073 * <script type="text/javascript">
15076 * @class Roo.state.CookieProvider
15077 * @extends Roo.state.Provider
15078 * The default Provider implementation which saves state via cookies.
15081 var cp = new Roo.state.CookieProvider({
15083 expires: new Date(new Date().getTime()+(1000*60*60*24*30)); //30 days
15084 domain: "roojs.com"
15086 Roo.state.Manager.setProvider(cp);
15088 * @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
15089 * @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
15090 * @cfg {String} domain The domain to save the cookie for. Note that you cannot specify a different domain than
15091 * your page is on, but you can specify a sub-domain, or simply the domain itself like 'roojs.com' to include
15092 * all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
15093 * domain the page is running on including the 'www' like 'www.roojs.com')
15094 * @cfg {Boolean} secure True if the site is using SSL (defaults to false)
15096 * Create a new CookieProvider
15097 * @param {Object} config The configuration object
15099 Roo.state.CookieProvider = function(config){
15100 Roo.state.CookieProvider.superclass.constructor.call(this);
15102 this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
15103 this.domain = null;
15104 this.secure = false;
15105 Roo.apply(this, config);
15106 this.state = this.readCookies();
15109 Roo.extend(Roo.state.CookieProvider, Roo.state.Provider, {
15111 set : function(name, value){
15112 if(typeof value == "undefined" || value === null){
15116 this.setCookie(name, value);
15117 Roo.state.CookieProvider.superclass.set.call(this, name, value);
15121 clear : function(name){
15122 this.clearCookie(name);
15123 Roo.state.CookieProvider.superclass.clear.call(this, name);
15127 readCookies : function(){
15129 var c = document.cookie + ";";
15130 var re = /\s?(.*?)=(.*?);/g;
15132 while((matches = re.exec(c)) != null){
15133 var name = matches[1];
15134 var value = matches[2];
15135 if(name && name.substring(0,3) == "ys-"){
15136 cookies[name.substr(3)] = this.decodeValue(value);
15143 setCookie : function(name, value){
15144 document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
15145 ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
15146 ((this.path == null) ? "" : ("; path=" + this.path)) +
15147 ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
15148 ((this.secure == true) ? "; secure" : "");
15152 clearCookie : function(name){
15153 document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
15154 ((this.path == null) ? "" : ("; path=" + this.path)) +
15155 ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
15156 ((this.secure == true) ? "; secure" : "");
15160 * Ext JS Library 1.1.1
15161 * Copyright(c) 2006-2007, Ext JS, LLC.
15163 * Originally Released Under LGPL - original licence link has changed is not relivant.
15166 * <script type="text/javascript">
15171 * @class Roo.ComponentMgr
15172 * Provides a common registry of all components on a page so that they can be easily accessed by component id (see {@link Roo.getCmp}).
15175 Roo.ComponentMgr = function(){
15176 var all = new Roo.util.MixedCollection();
15180 * Registers a component.
15181 * @param {Roo.Component} c The component
15183 register : function(c){
15188 * Unregisters a component.
15189 * @param {Roo.Component} c The component
15191 unregister : function(c){
15196 * Returns a component by id
15197 * @param {String} id The component id
15199 get : function(id){
15200 return all.get(id);
15204 * Registers a function that will be called when a specified component is added to ComponentMgr
15205 * @param {String} id The component id
15206 * @param {Funtction} fn The callback function
15207 * @param {Object} scope The scope of the callback
15209 onAvailable : function(id, fn, scope){
15210 all.on("add", function(index, o){
15212 fn.call(scope || o, o);
15213 all.un("add", fn, scope);
15220 * Ext JS Library 1.1.1
15221 * Copyright(c) 2006-2007, Ext JS, LLC.
15223 * Originally Released Under LGPL - original licence link has changed is not relivant.
15226 * <script type="text/javascript">
15230 * @class Roo.Component
15231 * @extends Roo.util.Observable
15232 * Base class for all major Roo components. All subclasses of Component can automatically participate in the standard
15233 * Roo component lifecycle of creation, rendering and destruction. They also have automatic support for basic hide/show
15234 * and enable/disable behavior. Component allows any subclass to be lazy-rendered into any {@link Roo.Container} and
15235 * to be automatically registered with the {@link Roo.ComponentMgr} so that it can be referenced at any time via {@link Roo.getCmp}.
15236 * All visual components (widgets) that require rendering into a layout should subclass Component.
15238 * @param {Roo.Element/String/Object} config The configuration options. If an element is passed, it is set as the internal
15239 * element and its id used as the component id. If a string is passed, it is assumed to be the id of an existing element
15240 * and is used as the component id. Otherwise, it is assumed to be a standard config object and is applied to the component.
15242 Roo.Component = function(config){
15243 config = config || {};
15244 if(config.tagName || config.dom || typeof config == "string"){ // element object
15245 config = {el: config, id: config.id || config};
15247 this.initialConfig = config;
15249 Roo.apply(this, config);
15253 * Fires after the component is disabled.
15254 * @param {Roo.Component} this
15259 * Fires after the component is enabled.
15260 * @param {Roo.Component} this
15264 * @event beforeshow
15265 * Fires before the component is shown. Return false to stop the show.
15266 * @param {Roo.Component} this
15271 * Fires after the component is shown.
15272 * @param {Roo.Component} this
15276 * @event beforehide
15277 * Fires before the component is hidden. Return false to stop the hide.
15278 * @param {Roo.Component} this
15283 * Fires after the component is hidden.
15284 * @param {Roo.Component} this
15288 * @event beforerender
15289 * Fires before the component is rendered. Return false to stop the render.
15290 * @param {Roo.Component} this
15292 beforerender : true,
15295 * Fires after the component is rendered.
15296 * @param {Roo.Component} this
15300 * @event beforedestroy
15301 * Fires before the component is destroyed. Return false to stop the destroy.
15302 * @param {Roo.Component} this
15304 beforedestroy : true,
15307 * Fires after the component is destroyed.
15308 * @param {Roo.Component} this
15313 this.id = "roo-comp-" + (++Roo.Component.AUTO_ID);
15315 Roo.ComponentMgr.register(this);
15316 Roo.Component.superclass.constructor.call(this);
15317 this.initComponent();
15318 if(this.renderTo){ // not supported by all components yet. use at your own risk!
15319 this.render(this.renderTo);
15320 delete this.renderTo;
15325 Roo.Component.AUTO_ID = 1000;
15327 Roo.extend(Roo.Component, Roo.util.Observable, {
15329 * @scope Roo.Component.prototype
15331 * true if this component is hidden. Read-only.
15336 * true if this component is disabled. Read-only.
15341 * true if this component has been rendered. Read-only.
15345 /** @cfg {String} disableClass
15346 * CSS class added to the component when it is disabled (defaults to "x-item-disabled").
15348 disabledClass : "x-item-disabled",
15349 /** @cfg {Boolean} allowDomMove
15350 * Whether the component can move the Dom node when rendering (defaults to true).
15352 allowDomMove : true,
15353 /** @cfg {String} hideMode (display|visibility)
15354 * How this component should hidden. Supported values are
15355 * "visibility" (css visibility), "offsets" (negative offset position) and
15356 * "display" (css display) - defaults to "display".
15358 hideMode: 'display',
15361 ctype : "Roo.Component",
15364 * @cfg {String} actionMode
15365 * which property holds the element that used for hide() / show() / disable() / enable()
15371 getActionEl : function(){
15372 return this[this.actionMode];
15375 initComponent : Roo.emptyFn,
15377 * If this is a lazy rendering component, render it to its container element.
15378 * @param {String/HTMLElement/Element} container (optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.
15380 render : function(container, position){
15381 if(!this.rendered && this.fireEvent("beforerender", this) !== false){
15382 if(!container && this.el){
15383 this.el = Roo.get(this.el);
15384 container = this.el.dom.parentNode;
15385 this.allowDomMove = false;
15387 this.container = Roo.get(container);
15388 this.rendered = true;
15389 if(position !== undefined){
15390 if(typeof position == 'number'){
15391 position = this.container.dom.childNodes[position];
15393 position = Roo.getDom(position);
15396 this.onRender(this.container, position || null);
15398 this.el.addClass(this.cls);
15402 this.el.applyStyles(this.style);
15405 this.fireEvent("render", this);
15406 this.afterRender(this.container);
15418 // default function is not really useful
15419 onRender : function(ct, position){
15421 this.el = Roo.get(this.el);
15422 if(this.allowDomMove !== false){
15423 ct.dom.insertBefore(this.el.dom, position);
15429 getAutoCreate : function(){
15430 var cfg = typeof this.autoCreate == "object" ?
15431 this.autoCreate : Roo.apply({}, this.defaultAutoCreate);
15432 if(this.id && !cfg.id){
15439 afterRender : Roo.emptyFn,
15442 * Destroys this component by purging any event listeners, removing the component's element from the DOM,
15443 * removing the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.
15445 destroy : function(){
15446 if(this.fireEvent("beforedestroy", this) !== false){
15447 this.purgeListeners();
15448 this.beforeDestroy();
15450 this.el.removeAllListeners();
15452 if(this.actionMode == "container"){
15453 this.container.remove();
15457 Roo.ComponentMgr.unregister(this);
15458 this.fireEvent("destroy", this);
15463 beforeDestroy : function(){
15468 onDestroy : function(){
15473 * Returns the underlying {@link Roo.Element}.
15474 * @return {Roo.Element} The element
15476 getEl : function(){
15481 * Returns the id of this component.
15484 getId : function(){
15489 * Try to focus this component.
15490 * @param {Boolean} selectText True to also select the text in this component (if applicable)
15491 * @return {Roo.Component} this
15493 focus : function(selectText){
15496 if(selectText === true){
15497 this.el.dom.select();
15512 * Disable this component.
15513 * @return {Roo.Component} this
15515 disable : function(){
15519 this.disabled = true;
15520 this.fireEvent("disable", this);
15525 onDisable : function(){
15526 this.getActionEl().addClass(this.disabledClass);
15527 this.el.dom.disabled = true;
15531 * Enable this component.
15532 * @return {Roo.Component} this
15534 enable : function(){
15538 this.disabled = false;
15539 this.fireEvent("enable", this);
15544 onEnable : function(){
15545 this.getActionEl().removeClass(this.disabledClass);
15546 this.el.dom.disabled = false;
15550 * Convenience function for setting disabled/enabled by boolean.
15551 * @param {Boolean} disabled
15553 setDisabled : function(disabled){
15554 this[disabled ? "disable" : "enable"]();
15558 * Show this component.
15559 * @return {Roo.Component} this
15562 if(this.fireEvent("beforeshow", this) !== false){
15563 this.hidden = false;
15567 this.fireEvent("show", this);
15573 onShow : function(){
15574 var ae = this.getActionEl();
15575 if(this.hideMode == 'visibility'){
15576 ae.dom.style.visibility = "visible";
15577 }else if(this.hideMode == 'offsets'){
15578 ae.removeClass('x-hidden');
15580 ae.dom.style.display = "";
15585 * Hide this component.
15586 * @return {Roo.Component} this
15589 if(this.fireEvent("beforehide", this) !== false){
15590 this.hidden = true;
15594 this.fireEvent("hide", this);
15600 onHide : function(){
15601 var ae = this.getActionEl();
15602 if(this.hideMode == 'visibility'){
15603 ae.dom.style.visibility = "hidden";
15604 }else if(this.hideMode == 'offsets'){
15605 ae.addClass('x-hidden');
15607 ae.dom.style.display = "none";
15612 * Convenience function to hide or show this component by boolean.
15613 * @param {Boolean} visible True to show, false to hide
15614 * @return {Roo.Component} this
15616 setVisible: function(visible){
15626 * Returns true if this component is visible.
15628 isVisible : function(){
15629 return this.getActionEl().isVisible();
15632 cloneConfig : function(overrides){
15633 overrides = overrides || {};
15634 var id = overrides.id || Roo.id();
15635 var cfg = Roo.applyIf(overrides, this.initialConfig);
15636 cfg.id = id; // prevent dup id
15637 return new this.constructor(cfg);
15641 * Ext JS Library 1.1.1
15642 * Copyright(c) 2006-2007, Ext JS, LLC.
15644 * Originally Released Under LGPL - original licence link has changed is not relivant.
15647 * <script type="text/javascript">
15651 * @class Roo.BoxComponent
15652 * @extends Roo.Component
15653 * Base class for any visual {@link Roo.Component} that uses a box container. BoxComponent provides automatic box
15654 * model adjustments for sizing and positioning and will work correctly withnin the Component rendering model. All
15655 * container classes should subclass BoxComponent so that they will work consistently when nested within other Ext
15656 * layout containers.
15658 * @param {Roo.Element/String/Object} config The configuration options.
15660 Roo.BoxComponent = function(config){
15661 Roo.Component.call(this, config);
15665 * Fires after the component is resized.
15666 * @param {Roo.Component} this
15667 * @param {Number} adjWidth The box-adjusted width that was set
15668 * @param {Number} adjHeight The box-adjusted height that was set
15669 * @param {Number} rawWidth The width that was originally specified
15670 * @param {Number} rawHeight The height that was originally specified
15675 * Fires after the component is moved.
15676 * @param {Roo.Component} this
15677 * @param {Number} x The new x position
15678 * @param {Number} y The new y position
15684 Roo.extend(Roo.BoxComponent, Roo.Component, {
15685 // private, set in afterRender to signify that the component has been rendered
15687 // private, used to defer height settings to subclasses
15688 deferHeight: false,
15689 /** @cfg {Number} width
15690 * width (optional) size of component
15692 /** @cfg {Number} height
15693 * height (optional) size of component
15697 * Sets the width and height of the component. This method fires the resize event. This method can accept
15698 * either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
15699 * @param {Number/Object} width The new width to set, or a size object in the format {width, height}
15700 * @param {Number} height The new height to set (not required if a size object is passed as the first arg)
15701 * @return {Roo.BoxComponent} this
15703 setSize : function(w, h){
15704 // support for standard size objects
15705 if(typeof w == 'object'){
15710 if(!this.boxReady){
15716 // prevent recalcs when not needed
15717 if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
15720 this.lastSize = {width: w, height: h};
15722 var adj = this.adjustSize(w, h);
15723 var aw = adj.width, ah = adj.height;
15724 if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
15725 var rz = this.getResizeEl();
15726 if(!this.deferHeight && aw !== undefined && ah !== undefined){
15727 rz.setSize(aw, ah);
15728 }else if(!this.deferHeight && ah !== undefined){
15730 }else if(aw !== undefined){
15733 this.onResize(aw, ah, w, h);
15734 this.fireEvent('resize', this, aw, ah, w, h);
15740 * Gets the current size of the component's underlying element.
15741 * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
15743 getSize : function(){
15744 return this.el.getSize();
15748 * Gets the current XY position of the component's underlying element.
15749 * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
15750 * @return {Array} The XY position of the element (e.g., [100, 200])
15752 getPosition : function(local){
15753 if(local === true){
15754 return [this.el.getLeft(true), this.el.getTop(true)];
15756 return this.xy || this.el.getXY();
15760 * Gets the current box measurements of the component's underlying element.
15761 * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
15762 * @returns {Object} box An object in the format {x, y, width, height}
15764 getBox : function(local){
15765 var s = this.el.getSize();
15767 s.x = this.el.getLeft(true);
15768 s.y = this.el.getTop(true);
15770 var xy = this.xy || this.el.getXY();
15778 * Sets the current box measurements of the component's underlying element.
15779 * @param {Object} box An object in the format {x, y, width, height}
15780 * @returns {Roo.BoxComponent} this
15782 updateBox : function(box){
15783 this.setSize(box.width, box.height);
15784 this.setPagePosition(box.x, box.y);
15789 getResizeEl : function(){
15790 return this.resizeEl || this.el;
15794 getPositionEl : function(){
15795 return this.positionEl || this.el;
15799 * Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}.
15800 * This method fires the move event.
15801 * @param {Number} left The new left
15802 * @param {Number} top The new top
15803 * @returns {Roo.BoxComponent} this
15805 setPosition : function(x, y){
15808 if(!this.boxReady){
15811 var adj = this.adjustPosition(x, y);
15812 var ax = adj.x, ay = adj.y;
15814 var el = this.getPositionEl();
15815 if(ax !== undefined || ay !== undefined){
15816 if(ax !== undefined && ay !== undefined){
15817 el.setLeftTop(ax, ay);
15818 }else if(ax !== undefined){
15820 }else if(ay !== undefined){
15823 this.onPosition(ax, ay);
15824 this.fireEvent('move', this, ax, ay);
15830 * Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
15831 * This method fires the move event.
15832 * @param {Number} x The new x position
15833 * @param {Number} y The new y position
15834 * @returns {Roo.BoxComponent} this
15836 setPagePosition : function(x, y){
15839 if(!this.boxReady){
15842 if(x === undefined || y === undefined){ // cannot translate undefined points
15845 var p = this.el.translatePoints(x, y);
15846 this.setPosition(p.left, p.top);
15851 onRender : function(ct, position){
15852 Roo.BoxComponent.superclass.onRender.call(this, ct, position);
15854 this.resizeEl = Roo.get(this.resizeEl);
15856 if(this.positionEl){
15857 this.positionEl = Roo.get(this.positionEl);
15862 afterRender : function(){
15863 Roo.BoxComponent.superclass.afterRender.call(this);
15864 this.boxReady = true;
15865 this.setSize(this.width, this.height);
15866 if(this.x || this.y){
15867 this.setPosition(this.x, this.y);
15869 if(this.pageX || this.pageY){
15870 this.setPagePosition(this.pageX, this.pageY);
15875 * Force the component's size to recalculate based on the underlying element's current height and width.
15876 * @returns {Roo.BoxComponent} this
15878 syncSize : function(){
15879 delete this.lastSize;
15880 this.setSize(this.el.getWidth(), this.el.getHeight());
15885 * Called after the component is resized, this method is empty by default but can be implemented by any
15886 * subclass that needs to perform custom logic after a resize occurs.
15887 * @param {Number} adjWidth The box-adjusted width that was set
15888 * @param {Number} adjHeight The box-adjusted height that was set
15889 * @param {Number} rawWidth The width that was originally specified
15890 * @param {Number} rawHeight The height that was originally specified
15892 onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
15897 * Called after the component is moved, this method is empty by default but can be implemented by any
15898 * subclass that needs to perform custom logic after a move occurs.
15899 * @param {Number} x The new x position
15900 * @param {Number} y The new y position
15902 onPosition : function(x, y){
15907 adjustSize : function(w, h){
15908 if(this.autoWidth){
15911 if(this.autoHeight){
15914 return {width : w, height: h};
15918 adjustPosition : function(x, y){
15919 return {x : x, y: y};
15922 * Original code for Roojs - LGPL
15923 * <script type="text/javascript">
15927 * @class Roo.XComponent
15928 * A delayed Element creator...
15929 * Or a way to group chunks of interface together.
15930 * technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
15931 * used in conjunction with XComponent.build() it will create an instance of each element,
15932 * then call addxtype() to build the User interface.
15934 * Mypart.xyx = new Roo.XComponent({
15936 parent : 'Mypart.xyz', // empty == document.element.!!
15940 disabled : function() {}
15942 tree : function() { // return an tree of xtype declared components
15946 xtype : 'NestedLayoutPanel',
15953 * It can be used to build a big heiracy, with parent etc.
15954 * or you can just use this to render a single compoent to a dom element
15955 * MYPART.render(Roo.Element | String(id) | dom_element )
15962 * Roo is designed primarily as a single page application, so the UI build for a standard interface will
15963 * expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.
15965 * Each sub module is expected to have a parent pointing to the class name of it's parent module.
15967 * When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
15968 * - if mulitple topModules exist, the last one is defined as the top module.
15972 * When the top level or multiple modules are to embedded into a existing HTML page,
15973 * the parent element can container '#id' of the element where the module will be drawn.
15977 * Unlike classic Roo, the bootstrap tends not to be used as a single page.
15978 * it relies more on a include mechanism, where sub modules are included into an outer page.
15979 * This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )
15981 * Bootstrap Roo Included elements
15983 * Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
15984 * hence confusing the component builder as it thinks there are multiple top level elements.
15988 * @extends Roo.util.Observable
15990 * @param cfg {Object} configuration of component
15993 Roo.XComponent = function(cfg) {
15994 Roo.apply(this, cfg);
15998 * Fires when this the componnt is built
15999 * @param {Roo.XComponent} c the component
16004 this.region = this.region || 'center'; // default..
16005 Roo.XComponent.register(this);
16006 this.modules = false;
16007 this.el = false; // where the layout goes..
16011 Roo.extend(Roo.XComponent, Roo.util.Observable, {
16014 * The created element (with Roo.factory())
16015 * @type {Roo.Layout}
16021 * for BC - use el in new code
16022 * @type {Roo.Layout}
16028 * for BC - use el in new code
16029 * @type {Roo.Layout}
16034 * @cfg {Function|boolean} disabled
16035 * If this module is disabled by some rule, return true from the funtion
16040 * @cfg {String} parent
16041 * Name of parent element which it get xtype added to..
16046 * @cfg {String} order
16047 * Used to set the order in which elements are created (usefull for multiple tabs)
16052 * @cfg {String} name
16053 * String to display while loading.
16057 * @cfg {String} region
16058 * Region to render component to (defaults to center)
16063 * @cfg {Array} items
16064 * A single item array - the first element is the root of the tree..
16065 * It's done this way to stay compatible with the Xtype system...
16071 * The method that retuns the tree of parts that make up this compoennt
16078 * render element to dom or tree
16079 * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
16082 render : function(el)
16086 var hp = this.parent ? 1 : 0;
16087 Roo.debug && Roo.log(this);
16089 var tree = this._tree ? this._tree() : this.tree();
16092 if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
16093 // if parent is a '#.....' string, then let's use that..
16094 var ename = this.parent.substr(1);
16095 this.parent = false;
16096 Roo.debug && Roo.log(ename);
16098 case 'bootstrap-body':
16099 if (typeof(tree.el) != 'undefined' && tree.el == document.body) {
16100 // this is the BorderLayout standard?
16101 this.parent = { el : true };
16104 if (["Nest", "Content", "Grid", "Tree"].indexOf(tree.xtype) > -1) {
16105 // need to insert stuff...
16107 el : new Roo.bootstrap.layout.Border({
16108 el : document.body,
16114 tabPosition: 'top',
16115 //resizeTabs: true,
16116 alwaysShowTabs: true,
16126 if (typeof(Roo.bootstrap.Body) != 'undefined' ) {
16127 this.parent = { el : new Roo.bootstrap.Body() };
16128 Roo.debug && Roo.log("setting el to doc body");
16131 throw "Container is bootstrap body, but Roo.bootstrap.Body is not defined";
16135 this.parent = { el : true};
16138 el = Roo.get(ename);
16139 if (typeof(Roo.bootstrap) != 'undefined' && tree['|xns'] == 'Roo.bootstrap') {
16140 this.parent = { el : true};
16147 if (!el && !this.parent) {
16148 Roo.debug && Roo.log("Warning - element can not be found :#" + ename );
16153 Roo.debug && Roo.log("EL:");
16154 Roo.debug && Roo.log(el);
16155 Roo.debug && Roo.log("this.parent.el:");
16156 Roo.debug && Roo.log(this.parent.el);
16159 // altertive root elements ??? - we need a better way to indicate these.
16160 var is_alt = Roo.XComponent.is_alt ||
16161 (typeof(tree.el) != 'undefined' && tree.el == document.body) ||
16162 (typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) ||
16163 (typeof(Roo.mailer) != 'undefined' && tree.xns == Roo.mailer) ;
16167 if (!this.parent && is_alt) {
16168 //el = Roo.get(document.body);
16169 this.parent = { el : true };
16174 if (!this.parent) {
16176 Roo.debug && Roo.log("no parent - creating one");
16178 el = el ? Roo.get(el) : false;
16180 if (typeof(Roo.BorderLayout) == 'undefined' ) {
16183 el : new Roo.bootstrap.layout.Border({
16184 el: el || document.body,
16190 tabPosition: 'top',
16191 //resizeTabs: true,
16192 alwaysShowTabs: false,
16195 overflow: 'visible'
16201 // it's a top level one..
16203 el : new Roo.BorderLayout(el || document.body, {
16208 tabPosition: 'top',
16209 //resizeTabs: true,
16210 alwaysShowTabs: el && hp? false : true,
16211 hideTabs: el || !hp ? true : false,
16219 if (!this.parent.el) {
16220 // probably an old style ctor, which has been disabled.
16224 // The 'tree' method is '_tree now'
16226 tree.region = tree.region || this.region;
16227 var is_body = false;
16228 if (this.parent.el === true) {
16229 // bootstrap... - body..
16233 this.parent.el = Roo.factory(tree);
16237 this.el = this.parent.el.addxtype(tree, undefined, is_body);
16238 this.fireEvent('built', this);
16240 this.panel = this.el;
16241 this.layout = this.panel.layout;
16242 this.parentLayout = this.parent.layout || false;
16248 Roo.apply(Roo.XComponent, {
16250 * @property hideProgress
16251 * true to disable the building progress bar.. usefull on single page renders.
16254 hideProgress : false,
16256 * @property buildCompleted
16257 * True when the builder has completed building the interface.
16260 buildCompleted : false,
16263 * @property topModule
16264 * the upper most module - uses document.element as it's constructor.
16271 * @property modules
16272 * array of modules to be created by registration system.
16273 * @type {Array} of Roo.XComponent
16278 * @property elmodules
16279 * array of modules to be created by which use #ID
16280 * @type {Array} of Roo.XComponent
16287 * Is an alternative Root - normally used by bootstrap or other systems,
16288 * where the top element in the tree can wrap 'body'
16289 * @type {boolean} (default false)
16294 * @property build_from_html
16295 * Build elements from html - used by bootstrap HTML stuff
16296 * - this is cleared after build is completed
16297 * @type {boolean} (default false)
16300 build_from_html : false,
16302 * Register components to be built later.
16304 * This solves the following issues
16305 * - Building is not done on page load, but after an authentication process has occured.
16306 * - Interface elements are registered on page load
16307 * - Parent Interface elements may not be loaded before child, so this handles that..
16314 module : 'Pman.Tab.projectMgr',
16316 parent : 'Pman.layout',
16317 disabled : false, // or use a function..
16320 * * @param {Object} details about module
16322 register : function(obj) {
16324 Roo.XComponent.event.fireEvent('register', obj);
16325 switch(typeof(obj.disabled) ) {
16331 if ( obj.disabled() ) {
16337 if (obj.disabled) {
16343 this.modules.push(obj);
16347 * convert a string to an object..
16348 * eg. 'AAA.BBB' -> finds AAA.BBB
16352 toObject : function(str)
16354 if (!str || typeof(str) == 'object') {
16357 if (str.substring(0,1) == '#') {
16361 var ar = str.split('.');
16366 eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
16368 throw "Module not found : " + str;
16372 throw "Module not found : " + str;
16374 Roo.each(ar, function(e) {
16375 if (typeof(o[e]) == 'undefined') {
16376 throw "Module not found : " + str;
16387 * move modules into their correct place in the tree..
16390 preBuild : function ()
16393 Roo.each(this.modules , function (obj)
16395 Roo.XComponent.event.fireEvent('beforebuild', obj);
16397 var opar = obj.parent;
16399 obj.parent = this.toObject(opar);
16401 Roo.debug && Roo.log("parent:toObject failed: " + e.toString());
16406 Roo.debug && Roo.log("GOT top level module");
16407 Roo.debug && Roo.log(obj);
16408 obj.modules = new Roo.util.MixedCollection(false,
16409 function(o) { return o.order + '' }
16411 this.topModule = obj;
16414 // parent is a string (usually a dom element name..)
16415 if (typeof(obj.parent) == 'string') {
16416 this.elmodules.push(obj);
16419 if (obj.parent.constructor != Roo.XComponent) {
16420 Roo.debug && Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
16422 if (!obj.parent.modules) {
16423 obj.parent.modules = new Roo.util.MixedCollection(false,
16424 function(o) { return o.order + '' }
16427 if (obj.parent.disabled) {
16428 obj.disabled = true;
16430 obj.parent.modules.add(obj);
16435 * make a list of modules to build.
16436 * @return {Array} list of modules.
16439 buildOrder : function()
16442 var cmp = function(a,b) {
16443 return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
16445 if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
16446 throw "No top level modules to build";
16449 // make a flat list in order of modules to build.
16450 var mods = this.topModule ? [ this.topModule ] : [];
16453 // elmodules (is a list of DOM based modules )
16454 Roo.each(this.elmodules, function(e) {
16456 if (!this.topModule &&
16457 typeof(e.parent) == 'string' &&
16458 e.parent.substring(0,1) == '#' &&
16459 Roo.get(e.parent.substr(1))
16462 _this.topModule = e;
16468 // add modules to their parents..
16469 var addMod = function(m) {
16470 Roo.debug && Roo.log("build Order: add: " + m.name);
16473 if (m.modules && !m.disabled) {
16474 Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules");
16475 m.modules.keySort('ASC', cmp );
16476 Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules (after sort)");
16478 m.modules.each(addMod);
16480 Roo.debug && Roo.log("build Order: no child modules");
16482 // not sure if this is used any more..
16484 m.finalize.name = m.name + " (clean up) ";
16485 mods.push(m.finalize);
16489 if (this.topModule && this.topModule.modules) {
16490 this.topModule.modules.keySort('ASC', cmp );
16491 this.topModule.modules.each(addMod);
16497 * Build the registered modules.
16498 * @param {Object} parent element.
16499 * @param {Function} optional method to call after module has been added.
16503 build : function(opts)
16506 if (typeof(opts) != 'undefined') {
16507 Roo.apply(this,opts);
16511 var mods = this.buildOrder();
16513 //this.allmods = mods;
16514 //Roo.debug && Roo.log(mods);
16516 if (!mods.length) { // should not happen
16517 throw "NO modules!!!";
16521 var msg = "Building Interface...";
16522 // flash it up as modal - so we store the mask!?
16523 if (!this.hideProgress && Roo.MessageBox) {
16524 Roo.MessageBox.show({ title: 'loading' });
16525 Roo.MessageBox.show({
16526 title: "Please wait...",
16535 var total = mods.length;
16538 var progressRun = function() {
16539 if (!mods.length) {
16540 Roo.debug && Roo.log('hide?');
16541 if (!this.hideProgress && Roo.MessageBox) {
16542 Roo.MessageBox.hide();
16544 Roo.XComponent.build_from_html = false; // reset, so dialogs will be build from javascript
16546 Roo.XComponent.event.fireEvent('buildcomplete', _this.topModule);
16552 var m = mods.shift();
16555 Roo.debug && Roo.log(m);
16556 // not sure if this is supported any more.. - modules that are are just function
16557 if (typeof(m) == 'function') {
16559 return progressRun.defer(10, _this);
16563 msg = "Building Interface " + (total - mods.length) +
16565 (m.name ? (' - ' + m.name) : '');
16566 Roo.debug && Roo.log(msg);
16567 if (!_this.hideProgress && Roo.MessageBox) {
16568 Roo.MessageBox.updateProgress( (total - mods.length)/total, msg );
16572 // is the module disabled?
16573 var disabled = (typeof(m.disabled) == 'function') ?
16574 m.disabled.call(m.module.disabled) : m.disabled;
16578 return progressRun(); // we do not update the display!
16586 // it's 10 on top level, and 1 on others??? why...
16587 return progressRun.defer(10, _this);
16590 progressRun.defer(1, _this);
16604 * wrapper for event.on - aliased later..
16605 * Typically use to register a event handler for register:
16607 * eg. Roo.XComponent.on('register', function(comp) { comp.disable = true } );
16616 Roo.XComponent.event = new Roo.util.Observable({
16620 * Fires when an Component is registered,
16621 * set the disable property on the Component to stop registration.
16622 * @param {Roo.XComponent} c the component being registerd.
16627 * @event beforebuild
16628 * Fires before each Component is built
16629 * can be used to apply permissions.
16630 * @param {Roo.XComponent} c the component being registerd.
16633 'beforebuild' : true,
16635 * @event buildcomplete
16636 * Fires on the top level element when all elements have been built
16637 * @param {Roo.XComponent} the top level component.
16639 'buildcomplete' : true
16644 Roo.XComponent.on = Roo.XComponent.event.on.createDelegate(Roo.XComponent.event);
16647 * marked - a markdown parser
16648 * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)
16649 * https://github.com/chjj/marked
16655 * Roo.Markdown - is a very crude wrapper around marked..
16659 * alert( Roo.Markdown.toHtml("Markdown *rocks*.") );
16661 * Note: move the sample code to the bottom of this
16662 * file before uncommenting it.
16667 Roo.Markdown.toHtml = function(text) {
16669 var c = new Roo.Markdown.marked.setOptions({
16670 renderer: new Roo.Markdown.marked.Renderer(),
16681 text = text.replace(/\\\n/g,' ');
16682 return Roo.Markdown.marked(text);
16687 // Wraps all "globals" so that the only thing
16688 // exposed is makeHtml().
16693 * Block-Level Grammar
16698 code: /^( {4}[^\n]+\n*)+/,
16700 hr: /^( *[-*_]){3,} *(?:\n+|$)/,
16701 heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
16703 lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
16704 blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
16705 list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
16706 html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,
16707 def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
16709 paragraph: /^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,
16713 block.bullet = /(?:[*+-]|\d+\.)/;
16714 block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
16715 block.item = replace(block.item, 'gm')
16716 (/bull/g, block.bullet)
16719 block.list = replace(block.list)
16720 (/bull/g, block.bullet)
16721 ('hr', '\\n+(?=\\1?(?:[-*_] *){3,}(?:\\n+|$))')
16722 ('def', '\\n+(?=' + block.def.source + ')')
16725 block.blockquote = replace(block.blockquote)
16729 block._tag = '(?!(?:'
16730 + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
16731 + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'
16732 + '|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|[^\\w\\s@]*@)\\b';
16734 block.html = replace(block.html)
16735 ('comment', /<!--[\s\S]*?-->/)
16736 ('closed', /<(tag)[\s\S]+?<\/\1>/)
16737 ('closing', /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)
16738 (/tag/g, block._tag)
16741 block.paragraph = replace(block.paragraph)
16743 ('heading', block.heading)
16744 ('lheading', block.lheading)
16745 ('blockquote', block.blockquote)
16746 ('tag', '<' + block._tag)
16751 * Normal Block Grammar
16754 block.normal = merge({}, block);
16757 * GFM Block Grammar
16760 block.gfm = merge({}, block.normal, {
16761 fences: /^ *(`{3,}|~{3,})[ \.]*(\S+)? *\n([\s\S]*?)\s*\1 *(?:\n+|$)/,
16763 heading: /^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/
16766 block.gfm.paragraph = replace(block.paragraph)
16768 + block.gfm.fences.source.replace('\\1', '\\2') + '|'
16769 + block.list.source.replace('\\1', '\\3') + '|')
16773 * GFM + Tables Block Grammar
16776 block.tables = merge({}, block.gfm, {
16777 nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
16778 table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/
16785 function Lexer(options) {
16787 this.tokens.links = {};
16788 this.options = options || marked.defaults;
16789 this.rules = block.normal;
16791 if (this.options.gfm) {
16792 if (this.options.tables) {
16793 this.rules = block.tables;
16795 this.rules = block.gfm;
16801 * Expose Block Rules
16804 Lexer.rules = block;
16807 * Static Lex Method
16810 Lexer.lex = function(src, options) {
16811 var lexer = new Lexer(options);
16812 return lexer.lex(src);
16819 Lexer.prototype.lex = function(src) {
16821 .replace(/\r\n|\r/g, '\n')
16822 .replace(/\t/g, ' ')
16823 .replace(/\u00a0/g, ' ')
16824 .replace(/\u2424/g, '\n');
16826 return this.token(src, true);
16833 Lexer.prototype.token = function(src, top, bq) {
16834 var src = src.replace(/^ +$/gm, '')
16847 if (cap = this.rules.newline.exec(src)) {
16848 src = src.substring(cap[0].length);
16849 if (cap[0].length > 1) {
16857 if (cap = this.rules.code.exec(src)) {
16858 src = src.substring(cap[0].length);
16859 cap = cap[0].replace(/^ {4}/gm, '');
16862 text: !this.options.pedantic
16863 ? cap.replace(/\n+$/, '')
16870 if (cap = this.rules.fences.exec(src)) {
16871 src = src.substring(cap[0].length);
16881 if (cap = this.rules.heading.exec(src)) {
16882 src = src.substring(cap[0].length);
16885 depth: cap[1].length,
16891 // table no leading pipe (gfm)
16892 if (top && (cap = this.rules.nptable.exec(src))) {
16893 src = src.substring(cap[0].length);
16897 header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
16898 align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
16899 cells: cap[3].replace(/\n$/, '').split('\n')
16902 for (i = 0; i < item.align.length; i++) {
16903 if (/^ *-+: *$/.test(item.align[i])) {
16904 item.align[i] = 'right';
16905 } else if (/^ *:-+: *$/.test(item.align[i])) {
16906 item.align[i] = 'center';
16907 } else if (/^ *:-+ *$/.test(item.align[i])) {
16908 item.align[i] = 'left';
16910 item.align[i] = null;
16914 for (i = 0; i < item.cells.length; i++) {
16915 item.cells[i] = item.cells[i].split(/ *\| */);
16918 this.tokens.push(item);
16924 if (cap = this.rules.lheading.exec(src)) {
16925 src = src.substring(cap[0].length);
16928 depth: cap[2] === '=' ? 1 : 2,
16935 if (cap = this.rules.hr.exec(src)) {
16936 src = src.substring(cap[0].length);
16944 if (cap = this.rules.blockquote.exec(src)) {
16945 src = src.substring(cap[0].length);
16948 type: 'blockquote_start'
16951 cap = cap[0].replace(/^ *> ?/gm, '');
16953 // Pass `top` to keep the current
16954 // "toplevel" state. This is exactly
16955 // how markdown.pl works.
16956 this.token(cap, top, true);
16959 type: 'blockquote_end'
16966 if (cap = this.rules.list.exec(src)) {
16967 src = src.substring(cap[0].length);
16971 type: 'list_start',
16972 ordered: bull.length > 1
16975 // Get each top-level item.
16976 cap = cap[0].match(this.rules.item);
16982 for (; i < l; i++) {
16985 // Remove the list item's bullet
16986 // so it is seen as the next token.
16987 space = item.length;
16988 item = item.replace(/^ *([*+-]|\d+\.) +/, '');
16990 // Outdent whatever the
16991 // list item contains. Hacky.
16992 if (~item.indexOf('\n ')) {
16993 space -= item.length;
16994 item = !this.options.pedantic
16995 ? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '')
16996 : item.replace(/^ {1,4}/gm, '');
16999 // Determine whether the next list item belongs here.
17000 // Backpedal if it does not belong in this list.
17001 if (this.options.smartLists && i !== l - 1) {
17002 b = block.bullet.exec(cap[i + 1])[0];
17003 if (bull !== b && !(bull.length > 1 && b.length > 1)) {
17004 src = cap.slice(i + 1).join('\n') + src;
17009 // Determine whether item is loose or not.
17010 // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
17011 // for discount behavior.
17012 loose = next || /\n\n(?!\s*$)/.test(item);
17014 next = item.charAt(item.length - 1) === '\n';
17015 if (!loose) { loose = next; }
17020 ? 'loose_item_start'
17021 : 'list_item_start'
17025 this.token(item, false, bq);
17028 type: 'list_item_end'
17040 if (cap = this.rules.html.exec(src)) {
17041 src = src.substring(cap[0].length);
17043 type: this.options.sanitize
17046 pre: !this.options.sanitizer
17047 && (cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style'),
17054 if ((!bq && top) && (cap = this.rules.def.exec(src))) {
17055 src = src.substring(cap[0].length);
17056 this.tokens.links[cap[1].toLowerCase()] = {
17064 if (top && (cap = this.rules.table.exec(src))) {
17065 src = src.substring(cap[0].length);
17069 header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
17070 align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
17071 cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
17074 for (i = 0; i < item.align.length; i++) {
17075 if (/^ *-+: *$/.test(item.align[i])) {
17076 item.align[i] = 'right';
17077 } else if (/^ *:-+: *$/.test(item.align[i])) {
17078 item.align[i] = 'center';
17079 } else if (/^ *:-+ *$/.test(item.align[i])) {
17080 item.align[i] = 'left';
17082 item.align[i] = null;
17086 for (i = 0; i < item.cells.length; i++) {
17087 item.cells[i] = item.cells[i]
17088 .replace(/^ *\| *| *\| *$/g, '')
17092 this.tokens.push(item);
17097 // top-level paragraph
17098 if (top && (cap = this.rules.paragraph.exec(src))) {
17099 src = src.substring(cap[0].length);
17102 text: cap[1].charAt(cap[1].length - 1) === '\n'
17103 ? cap[1].slice(0, -1)
17110 if (cap = this.rules.text.exec(src)) {
17111 // Top-level should never reach here.
17112 src = src.substring(cap[0].length);
17122 Error('Infinite loop on byte: ' + src.charCodeAt(0));
17126 return this.tokens;
17130 * Inline-Level Grammar
17134 escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
17135 autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
17137 tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
17138 link: /^!?\[(inside)\]\(href\)/,
17139 reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
17140 nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
17141 strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
17142 em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
17143 code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
17144 br: /^ {2,}\n(?!\s*$)/,
17146 text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
17149 inline._inside = /(?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*/;
17150 inline._href = /\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
17152 inline.link = replace(inline.link)
17153 ('inside', inline._inside)
17154 ('href', inline._href)
17157 inline.reflink = replace(inline.reflink)
17158 ('inside', inline._inside)
17162 * Normal Inline Grammar
17165 inline.normal = merge({}, inline);
17168 * Pedantic Inline Grammar
17171 inline.pedantic = merge({}, inline.normal, {
17172 strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
17173 em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
17177 * GFM Inline Grammar
17180 inline.gfm = merge({}, inline.normal, {
17181 escape: replace(inline.escape)('])', '~|])')(),
17182 url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
17183 del: /^~~(?=\S)([\s\S]*?\S)~~/,
17184 text: replace(inline.text)
17186 ('|', '|https?://|')
17191 * GFM + Line Breaks Inline Grammar
17194 inline.breaks = merge({}, inline.gfm, {
17195 br: replace(inline.br)('{2,}', '*')(),
17196 text: replace(inline.gfm.text)('{2,}', '*')()
17200 * Inline Lexer & Compiler
17203 function InlineLexer(links, options) {
17204 this.options = options || marked.defaults;
17205 this.links = links;
17206 this.rules = inline.normal;
17207 this.renderer = this.options.renderer || new Renderer;
17208 this.renderer.options = this.options;
17212 Error('Tokens array requires a `links` property.');
17215 if (this.options.gfm) {
17216 if (this.options.breaks) {
17217 this.rules = inline.breaks;
17219 this.rules = inline.gfm;
17221 } else if (this.options.pedantic) {
17222 this.rules = inline.pedantic;
17227 * Expose Inline Rules
17230 InlineLexer.rules = inline;
17233 * Static Lexing/Compiling Method
17236 InlineLexer.output = function(src, links, options) {
17237 var inline = new InlineLexer(links, options);
17238 return inline.output(src);
17245 InlineLexer.prototype.output = function(src) {
17254 if (cap = this.rules.escape.exec(src)) {
17255 src = src.substring(cap[0].length);
17261 if (cap = this.rules.autolink.exec(src)) {
17262 src = src.substring(cap[0].length);
17263 if (cap[2] === '@') {
17264 text = cap[1].charAt(6) === ':'
17265 ? this.mangle(cap[1].substring(7))
17266 : this.mangle(cap[1]);
17267 href = this.mangle('mailto:') + text;
17269 text = escape(cap[1]);
17272 out += this.renderer.link(href, null, text);
17277 if (!this.inLink && (cap = this.rules.url.exec(src))) {
17278 src = src.substring(cap[0].length);
17279 text = escape(cap[1]);
17281 out += this.renderer.link(href, null, text);
17286 if (cap = this.rules.tag.exec(src)) {
17287 if (!this.inLink && /^<a /i.test(cap[0])) {
17288 this.inLink = true;
17289 } else if (this.inLink && /^<\/a>/i.test(cap[0])) {
17290 this.inLink = false;
17292 src = src.substring(cap[0].length);
17293 out += this.options.sanitize
17294 ? this.options.sanitizer
17295 ? this.options.sanitizer(cap[0])
17302 if (cap = this.rules.link.exec(src)) {
17303 src = src.substring(cap[0].length);
17304 this.inLink = true;
17305 out += this.outputLink(cap, {
17309 this.inLink = false;
17314 if ((cap = this.rules.reflink.exec(src))
17315 || (cap = this.rules.nolink.exec(src))) {
17316 src = src.substring(cap[0].length);
17317 link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
17318 link = this.links[link.toLowerCase()];
17319 if (!link || !link.href) {
17320 out += cap[0].charAt(0);
17321 src = cap[0].substring(1) + src;
17324 this.inLink = true;
17325 out += this.outputLink(cap, link);
17326 this.inLink = false;
17331 if (cap = this.rules.strong.exec(src)) {
17332 src = src.substring(cap[0].length);
17333 out += this.renderer.strong(this.output(cap[2] || cap[1]));
17338 if (cap = this.rules.em.exec(src)) {
17339 src = src.substring(cap[0].length);
17340 out += this.renderer.em(this.output(cap[2] || cap[1]));
17345 if (cap = this.rules.code.exec(src)) {
17346 src = src.substring(cap[0].length);
17347 out += this.renderer.codespan(escape(cap[2], true));
17352 if (cap = this.rules.br.exec(src)) {
17353 src = src.substring(cap[0].length);
17354 out += this.renderer.br();
17359 if (cap = this.rules.del.exec(src)) {
17360 src = src.substring(cap[0].length);
17361 out += this.renderer.del(this.output(cap[1]));
17366 if (cap = this.rules.text.exec(src)) {
17367 src = src.substring(cap[0].length);
17368 out += this.renderer.text(escape(this.smartypants(cap[0])));
17374 Error('Infinite loop on byte: ' + src.charCodeAt(0));
17385 InlineLexer.prototype.outputLink = function(cap, link) {
17386 var href = escape(link.href)
17387 , title = link.title ? escape(link.title) : null;
17389 return cap[0].charAt(0) !== '!'
17390 ? this.renderer.link(href, title, this.output(cap[1]))
17391 : this.renderer.image(href, title, escape(cap[1]));
17395 * Smartypants Transformations
17398 InlineLexer.prototype.smartypants = function(text) {
17399 if (!this.options.smartypants) { return text; }
17402 .replace(/---/g, '\u2014')
17404 .replace(/--/g, '\u2013')
17406 .replace(/(^|[-\u2014/(\[{"\s])'/g, '$1\u2018')
17407 // closing singles & apostrophes
17408 .replace(/'/g, '\u2019')
17410 .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, '$1\u201c')
17412 .replace(/"/g, '\u201d')
17414 .replace(/\.{3}/g, '\u2026');
17421 InlineLexer.prototype.mangle = function(text) {
17422 if (!this.options.mangle) { return text; }
17428 for (; i < l; i++) {
17429 ch = text.charCodeAt(i);
17430 if (Math.random() > 0.5) {
17431 ch = 'x' + ch.toString(16);
17433 out += '&#' + ch + ';';
17443 function Renderer(options) {
17444 this.options = options || {};
17447 Renderer.prototype.code = function(code, lang, escaped) {
17448 if (this.options.highlight) {
17449 var out = this.options.highlight(code, lang);
17450 if (out != null && out !== code) {
17455 // hack!!! - it's already escapeD?
17460 return '<pre><code>'
17461 + (escaped ? code : escape(code, true))
17462 + '\n</code></pre>';
17465 return '<pre><code class="'
17466 + this.options.langPrefix
17467 + escape(lang, true)
17469 + (escaped ? code : escape(code, true))
17470 + '\n</code></pre>\n';
17473 Renderer.prototype.blockquote = function(quote) {
17474 return '<blockquote>\n' + quote + '</blockquote>\n';
17477 Renderer.prototype.html = function(html) {
17481 Renderer.prototype.heading = function(text, level, raw) {
17485 + this.options.headerPrefix
17486 + raw.toLowerCase().replace(/[^\w]+/g, '-')
17494 Renderer.prototype.hr = function() {
17495 return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
17498 Renderer.prototype.list = function(body, ordered) {
17499 var type = ordered ? 'ol' : 'ul';
17500 return '<' + type + '>\n' + body + '</' + type + '>\n';
17503 Renderer.prototype.listitem = function(text) {
17504 return '<li>' + text + '</li>\n';
17507 Renderer.prototype.paragraph = function(text) {
17508 return '<p>' + text + '</p>\n';
17511 Renderer.prototype.table = function(header, body) {
17512 return '<table class="table table-striped">\n'
17522 Renderer.prototype.tablerow = function(content) {
17523 return '<tr>\n' + content + '</tr>\n';
17526 Renderer.prototype.tablecell = function(content, flags) {
17527 var type = flags.header ? 'th' : 'td';
17528 var tag = flags.align
17529 ? '<' + type + ' style="text-align:' + flags.align + '">'
17530 : '<' + type + '>';
17531 return tag + content + '</' + type + '>\n';
17534 // span level renderer
17535 Renderer.prototype.strong = function(text) {
17536 return '<strong>' + text + '</strong>';
17539 Renderer.prototype.em = function(text) {
17540 return '<em>' + text + '</em>';
17543 Renderer.prototype.codespan = function(text) {
17544 return '<code>' + text + '</code>';
17547 Renderer.prototype.br = function() {
17548 return this.options.xhtml ? '<br/>' : '<br>';
17551 Renderer.prototype.del = function(text) {
17552 return '<del>' + text + '</del>';
17555 Renderer.prototype.link = function(href, title, text) {
17556 if (this.options.sanitize) {
17558 var prot = decodeURIComponent(unescape(href))
17559 .replace(/[^\w:]/g, '')
17564 if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0) {
17568 var out = '<a href="' + href + '"';
17570 out += ' title="' + title + '"';
17572 out += '>' + text + '</a>';
17576 Renderer.prototype.image = function(href, title, text) {
17577 var out = '<img src="' + href + '" alt="' + text + '"';
17579 out += ' title="' + title + '"';
17581 out += this.options.xhtml ? '/>' : '>';
17585 Renderer.prototype.text = function(text) {
17590 * Parsing & Compiling
17593 function Parser(options) {
17596 this.options = options || marked.defaults;
17597 this.options.renderer = this.options.renderer || new Renderer;
17598 this.renderer = this.options.renderer;
17599 this.renderer.options = this.options;
17603 * Static Parse Method
17606 Parser.parse = function(src, options, renderer) {
17607 var parser = new Parser(options, renderer);
17608 return parser.parse(src);
17615 Parser.prototype.parse = function(src) {
17616 this.inline = new InlineLexer(src.links, this.options, this.renderer);
17617 this.tokens = src.reverse();
17620 while (this.next()) {
17631 Parser.prototype.next = function() {
17632 return this.token = this.tokens.pop();
17636 * Preview Next Token
17639 Parser.prototype.peek = function() {
17640 return this.tokens[this.tokens.length - 1] || 0;
17644 * Parse Text Tokens
17647 Parser.prototype.parseText = function() {
17648 var body = this.token.text;
17650 while (this.peek().type === 'text') {
17651 body += '\n' + this.next().text;
17654 return this.inline.output(body);
17658 * Parse Current Token
17661 Parser.prototype.tok = function() {
17662 switch (this.token.type) {
17667 return this.renderer.hr();
17670 return this.renderer.heading(
17671 this.inline.output(this.token.text),
17676 return this.renderer.code(this.token.text,
17678 this.token.escaped);
17691 for (i = 0; i < this.token.header.length; i++) {
17692 flags = { header: true, align: this.token.align[i] };
17693 cell += this.renderer.tablecell(
17694 this.inline.output(this.token.header[i]),
17695 { header: true, align: this.token.align[i] }
17698 header += this.renderer.tablerow(cell);
17700 for (i = 0; i < this.token.cells.length; i++) {
17701 row = this.token.cells[i];
17704 for (j = 0; j < row.length; j++) {
17705 cell += this.renderer.tablecell(
17706 this.inline.output(row[j]),
17707 { header: false, align: this.token.align[j] }
17711 body += this.renderer.tablerow(cell);
17713 return this.renderer.table(header, body);
17715 case 'blockquote_start': {
17718 while (this.next().type !== 'blockquote_end') {
17719 body += this.tok();
17722 return this.renderer.blockquote(body);
17724 case 'list_start': {
17726 , ordered = this.token.ordered;
17728 while (this.next().type !== 'list_end') {
17729 body += this.tok();
17732 return this.renderer.list(body, ordered);
17734 case 'list_item_start': {
17737 while (this.next().type !== 'list_item_end') {
17738 body += this.token.type === 'text'
17743 return this.renderer.listitem(body);
17745 case 'loose_item_start': {
17748 while (this.next().type !== 'list_item_end') {
17749 body += this.tok();
17752 return this.renderer.listitem(body);
17755 var html = !this.token.pre && !this.options.pedantic
17756 ? this.inline.output(this.token.text)
17758 return this.renderer.html(html);
17760 case 'paragraph': {
17761 return this.renderer.paragraph(this.inline.output(this.token.text));
17764 return this.renderer.paragraph(this.parseText());
17773 function escape(html, encode) {
17775 .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&')
17776 .replace(/</g, '<')
17777 .replace(/>/g, '>')
17778 .replace(/"/g, '"')
17779 .replace(/'/g, ''');
17782 function unescape(html) {
17783 // explicitly match decimal, hex, and named HTML entities
17784 return html.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/g, function(_, n) {
17785 n = n.toLowerCase();
17786 if (n === 'colon') { return ':'; }
17787 if (n.charAt(0) === '#') {
17788 return n.charAt(1) === 'x'
17789 ? String.fromCharCode(parseInt(n.substring(2), 16))
17790 : String.fromCharCode(+n.substring(1));
17796 function replace(regex, opt) {
17797 regex = regex.source;
17799 return function self(name, val) {
17800 if (!name) { return new RegExp(regex, opt); }
17801 val = val.source || val;
17802 val = val.replace(/(^|[^\[])\^/g, '$1');
17803 regex = regex.replace(name, val);
17811 function merge(obj) {
17816 for (; i < arguments.length; i++) {
17817 target = arguments[i];
17818 for (key in target) {
17819 if (Object.prototype.hasOwnProperty.call(target, key)) {
17820 obj[key] = target[key];
17833 function marked(src, opt, callback) {
17834 if (callback || typeof opt === 'function') {
17840 opt = merge({}, marked.defaults, opt || {});
17842 var highlight = opt.highlight
17848 tokens = Lexer.lex(src, opt)
17850 return callback(e);
17853 pending = tokens.length;
17855 var done = function(err) {
17857 opt.highlight = highlight;
17858 return callback(err);
17864 out = Parser.parse(tokens, opt);
17869 opt.highlight = highlight;
17873 : callback(null, out);
17876 if (!highlight || highlight.length < 3) {
17880 delete opt.highlight;
17882 if (!pending) { return done(); }
17884 for (; i < tokens.length; i++) {
17886 if (token.type !== 'code') {
17887 return --pending || done();
17889 return highlight(token.text, token.lang, function(err, code) {
17890 if (err) { return done(err); }
17891 if (code == null || code === token.text) {
17892 return --pending || done();
17895 token.escaped = true;
17896 --pending || done();
17904 if (opt) { opt = merge({}, marked.defaults, opt); }
17905 return Parser.parse(Lexer.lex(src, opt), opt);
17907 e.message += '\nPlease report this to https://github.com/chjj/marked.';
17908 if ((opt || marked.defaults).silent) {
17909 return '<p>An error occured:</p><pre>'
17910 + escape(e.message + '', true)
17922 marked.setOptions = function(opt) {
17923 merge(marked.defaults, opt);
17927 marked.defaults = {
17938 langPrefix: 'lang-',
17939 smartypants: false,
17941 renderer: new Renderer,
17949 marked.Parser = Parser;
17950 marked.parser = Parser.parse;
17952 marked.Renderer = Renderer;
17954 marked.Lexer = Lexer;
17955 marked.lexer = Lexer.lex;
17957 marked.InlineLexer = InlineLexer;
17958 marked.inlineLexer = InlineLexer.output;
17960 marked.parse = marked;
17962 Roo.Markdown.marked = marked;
17966 * Ext JS Library 1.1.1
17967 * Copyright(c) 2006-2007, Ext JS, LLC.
17969 * Originally Released Under LGPL - original licence link has changed is not relivant.
17972 * <script type="text/javascript">
17978 * These classes are derivatives of the similarly named classes in the YUI Library.
17979 * The original license:
17980 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
17981 * Code licensed under the BSD License:
17982 * http://developer.yahoo.net/yui/license.txt
17987 var Event=Roo.EventManager;
17988 var Dom=Roo.lib.Dom;
17991 * @class Roo.dd.DragDrop
17992 * @extends Roo.util.Observable
17993 * Defines the interface and base operation of items that that can be
17994 * dragged or can be drop targets. It was designed to be extended, overriding
17995 * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
17996 * Up to three html elements can be associated with a DragDrop instance:
17998 * <li>linked element: the element that is passed into the constructor.
17999 * This is the element which defines the boundaries for interaction with
18000 * other DragDrop objects.</li>
18001 * <li>handle element(s): The drag operation only occurs if the element that
18002 * was clicked matches a handle element. By default this is the linked
18003 * element, but there are times that you will want only a portion of the
18004 * linked element to initiate the drag operation, and the setHandleElId()
18005 * method provides a way to define this.</li>
18006 * <li>drag element: this represents the element that would be moved along
18007 * with the cursor during a drag operation. By default, this is the linked
18008 * element itself as in {@link Roo.dd.DD}. setDragElId() lets you define
18009 * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
18012 * This class should not be instantiated until the onload event to ensure that
18013 * the associated elements are available.
18014 * The following would define a DragDrop obj that would interact with any
18015 * other DragDrop obj in the "group1" group:
18017 * dd = new Roo.dd.DragDrop("div1", "group1");
18019 * Since none of the event handlers have been implemented, nothing would
18020 * actually happen if you were to run the code above. Normally you would
18021 * override this class or one of the default implementations, but you can
18022 * also override the methods you want on an instance of the class...
18024 * dd.onDragDrop = function(e, id) {
18025 * alert("dd was dropped on " + id);
18029 * @param {String} id of the element that is linked to this instance
18030 * @param {String} sGroup the group of related DragDrop objects
18031 * @param {object} config an object containing configurable attributes
18032 * Valid properties for DragDrop:
18033 * padding, isTarget, maintainOffset, primaryButtonOnly
18035 Roo.dd.DragDrop = function(id, sGroup, config) {
18037 this.init(id, sGroup, config);
18042 Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
18045 * The id of the element associated with this object. This is what we
18046 * refer to as the "linked element" because the size and position of
18047 * this element is used to determine when the drag and drop objects have
18055 * Configuration attributes passed into the constructor
18062 * The id of the element that will be dragged. By default this is same
18063 * as the linked element , but could be changed to another element. Ex:
18065 * @property dragElId
18072 * the id of the element that initiates the drag operation. By default
18073 * this is the linked element, but could be changed to be a child of this
18074 * element. This lets us do things like only starting the drag when the
18075 * header element within the linked html element is clicked.
18076 * @property handleElId
18083 * An associative array of HTML tags that will be ignored if clicked.
18084 * @property invalidHandleTypes
18085 * @type {string: string}
18087 invalidHandleTypes: null,
18090 * An associative array of ids for elements that will be ignored if clicked
18091 * @property invalidHandleIds
18092 * @type {string: string}
18094 invalidHandleIds: null,
18097 * An indexted array of css class names for elements that will be ignored
18099 * @property invalidHandleClasses
18102 invalidHandleClasses: null,
18105 * The linked element's absolute X position at the time the drag was
18107 * @property startPageX
18114 * The linked element's absolute X position at the time the drag was
18116 * @property startPageY
18123 * The group defines a logical collection of DragDrop objects that are
18124 * related. Instances only get events when interacting with other
18125 * DragDrop object in the same group. This lets us define multiple
18126 * groups using a single DragDrop subclass if we want.
18128 * @type {string: string}
18133 * Individual drag/drop instances can be locked. This will prevent
18134 * onmousedown start drag.
18142 * Lock this instance
18145 lock: function() { this.locked = true; },
18148 * Unlock this instace
18151 unlock: function() { this.locked = false; },
18154 * By default, all insances can be a drop target. This can be disabled by
18155 * setting isTarget to false.
18162 * The padding configured for this drag and drop object for calculating
18163 * the drop zone intersection with this object.
18170 * Cached reference to the linked element
18171 * @property _domRef
18177 * Internal typeof flag
18178 * @property __ygDragDrop
18181 __ygDragDrop: true,
18184 * Set to true when horizontal contraints are applied
18185 * @property constrainX
18192 * Set to true when vertical contraints are applied
18193 * @property constrainY
18200 * The left constraint
18208 * The right constraint
18216 * The up constraint
18225 * The down constraint
18233 * Maintain offsets when we resetconstraints. Set to true when you want
18234 * the position of the element relative to its parent to stay the same
18235 * when the page changes
18237 * @property maintainOffset
18240 maintainOffset: false,
18243 * Array of pixel locations the element will snap to if we specified a
18244 * horizontal graduation/interval. This array is generated automatically
18245 * when you define a tick interval.
18252 * Array of pixel locations the element will snap to if we specified a
18253 * vertical graduation/interval. This array is generated automatically
18254 * when you define a tick interval.
18261 * By default the drag and drop instance will only respond to the primary
18262 * button click (left button for a right-handed mouse). Set to true to
18263 * allow drag and drop to start with any mouse click that is propogated
18265 * @property primaryButtonOnly
18268 primaryButtonOnly: true,
18271 * The availabe property is false until the linked dom element is accessible.
18272 * @property available
18278 * By default, drags can only be initiated if the mousedown occurs in the
18279 * region the linked element is. This is done in part to work around a
18280 * bug in some browsers that mis-report the mousedown if the previous
18281 * mouseup happened outside of the window. This property is set to true
18282 * if outer handles are defined.
18284 * @property hasOuterHandles
18288 hasOuterHandles: false,
18291 * Code that executes immediately before the startDrag event
18292 * @method b4StartDrag
18295 b4StartDrag: function(x, y) { },
18298 * Abstract method called after a drag/drop object is clicked
18299 * and the drag or mousedown time thresholds have beeen met.
18300 * @method startDrag
18301 * @param {int} X click location
18302 * @param {int} Y click location
18304 startDrag: function(x, y) { /* override this */ },
18307 * Code that executes immediately before the onDrag event
18311 b4Drag: function(e) { },
18314 * Abstract method called during the onMouseMove event while dragging an
18317 * @param {Event} e the mousemove event
18319 onDrag: function(e) { /* override this */ },
18322 * Abstract method called when this element fist begins hovering over
18323 * another DragDrop obj
18324 * @method onDragEnter
18325 * @param {Event} e the mousemove event
18326 * @param {String|DragDrop[]} id In POINT mode, the element
18327 * id this is hovering over. In INTERSECT mode, an array of one or more
18328 * dragdrop items being hovered over.
18330 onDragEnter: function(e, id) { /* override this */ },
18333 * Code that executes immediately before the onDragOver event
18334 * @method b4DragOver
18337 b4DragOver: function(e) { },
18340 * Abstract method called when this element is hovering over another
18342 * @method onDragOver
18343 * @param {Event} e the mousemove event
18344 * @param {String|DragDrop[]} id In POINT mode, the element
18345 * id this is hovering over. In INTERSECT mode, an array of dd items
18346 * being hovered over.
18348 onDragOver: function(e, id) { /* override this */ },
18351 * Code that executes immediately before the onDragOut event
18352 * @method b4DragOut
18355 b4DragOut: function(e) { },
18358 * Abstract method called when we are no longer hovering over an element
18359 * @method onDragOut
18360 * @param {Event} e the mousemove event
18361 * @param {String|DragDrop[]} id In POINT mode, the element
18362 * id this was hovering over. In INTERSECT mode, an array of dd items
18363 * that the mouse is no longer over.
18365 onDragOut: function(e, id) { /* override this */ },
18368 * Code that executes immediately before the onDragDrop event
18369 * @method b4DragDrop
18372 b4DragDrop: function(e) { },
18375 * Abstract method called when this item is dropped on another DragDrop
18377 * @method onDragDrop
18378 * @param {Event} e the mouseup event
18379 * @param {String|DragDrop[]} id In POINT mode, the element
18380 * id this was dropped on. In INTERSECT mode, an array of dd items this
18383 onDragDrop: function(e, id) { /* override this */ },
18386 * Abstract method called when this item is dropped on an area with no
18388 * @method onInvalidDrop
18389 * @param {Event} e the mouseup event
18391 onInvalidDrop: function(e) { /* override this */ },
18394 * Code that executes immediately before the endDrag event
18395 * @method b4EndDrag
18398 b4EndDrag: function(e) { },
18401 * Fired when we are done dragging the object
18403 * @param {Event} e the mouseup event
18405 endDrag: function(e) { /* override this */ },
18408 * Code executed immediately before the onMouseDown event
18409 * @method b4MouseDown
18410 * @param {Event} e the mousedown event
18413 b4MouseDown: function(e) { },
18416 * Event handler that fires when a drag/drop obj gets a mousedown
18417 * @method onMouseDown
18418 * @param {Event} e the mousedown event
18420 onMouseDown: function(e) { /* override this */ },
18423 * Event handler that fires when a drag/drop obj gets a mouseup
18424 * @method onMouseUp
18425 * @param {Event} e the mouseup event
18427 onMouseUp: function(e) { /* override this */ },
18430 * Override the onAvailable method to do what is needed after the initial
18431 * position was determined.
18432 * @method onAvailable
18434 onAvailable: function () {
18438 * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
18441 defaultPadding : {left:0, right:0, top:0, bottom:0},
18444 * Initializes the drag drop object's constraints to restrict movement to a certain element.
18448 var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
18449 { dragElId: "existingProxyDiv" });
18450 dd.startDrag = function(){
18451 this.constrainTo("parent-id");
18454 * Or you can initalize it using the {@link Roo.Element} object:
18456 Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
18457 startDrag : function(){
18458 this.constrainTo("parent-id");
18462 * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
18463 * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
18464 * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
18465 * an object containing the sides to pad. For example: {right:10, bottom:10}
18466 * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
18468 constrainTo : function(constrainTo, pad, inContent){
18469 if(typeof pad == "number"){
18470 pad = {left: pad, right:pad, top:pad, bottom:pad};
18472 pad = pad || this.defaultPadding;
18473 var b = Roo.get(this.getEl()).getBox();
18474 var ce = Roo.get(constrainTo);
18475 var s = ce.getScroll();
18476 var c, cd = ce.dom;
18477 if(cd == document.body){
18478 c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
18481 c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
18485 var topSpace = b.y - c.y;
18486 var leftSpace = b.x - c.x;
18488 this.resetConstraints();
18489 this.setXConstraint(leftSpace - (pad.left||0), // left
18490 c.width - leftSpace - b.width - (pad.right||0) //right
18492 this.setYConstraint(topSpace - (pad.top||0), //top
18493 c.height - topSpace - b.height - (pad.bottom||0) //bottom
18498 * Returns a reference to the linked element
18500 * @return {HTMLElement} the html element
18502 getEl: function() {
18503 if (!this._domRef) {
18504 this._domRef = Roo.getDom(this.id);
18507 return this._domRef;
18511 * Returns a reference to the actual element to drag. By default this is
18512 * the same as the html element, but it can be assigned to another
18513 * element. An example of this can be found in Roo.dd.DDProxy
18514 * @method getDragEl
18515 * @return {HTMLElement} the html element
18517 getDragEl: function() {
18518 return Roo.getDom(this.dragElId);
18522 * Sets up the DragDrop object. Must be called in the constructor of any
18523 * Roo.dd.DragDrop subclass
18525 * @param id the id of the linked element
18526 * @param {String} sGroup the group of related items
18527 * @param {object} config configuration attributes
18529 init: function(id, sGroup, config) {
18530 this.initTarget(id, sGroup, config);
18531 if (!Roo.isTouch) {
18532 Event.on(this.id, "mousedown", this.handleMouseDown, this);
18534 Event.on(this.id, "touchstart", this.handleMouseDown, this);
18535 // Event.on(this.id, "selectstart", Event.preventDefault);
18539 * Initializes Targeting functionality only... the object does not
18540 * get a mousedown handler.
18541 * @method initTarget
18542 * @param id the id of the linked element
18543 * @param {String} sGroup the group of related items
18544 * @param {object} config configuration attributes
18546 initTarget: function(id, sGroup, config) {
18548 // configuration attributes
18549 this.config = config || {};
18551 // create a local reference to the drag and drop manager
18552 this.DDM = Roo.dd.DDM;
18553 // initialize the groups array
18556 // assume that we have an element reference instead of an id if the
18557 // parameter is not a string
18558 if (typeof id !== "string") {
18565 // add to an interaction group
18566 this.addToGroup((sGroup) ? sGroup : "default");
18568 // We don't want to register this as the handle with the manager
18569 // so we just set the id rather than calling the setter.
18570 this.handleElId = id;
18572 // the linked element is the element that gets dragged by default
18573 this.setDragElId(id);
18575 // by default, clicked anchors will not start drag operations.
18576 this.invalidHandleTypes = { A: "A" };
18577 this.invalidHandleIds = {};
18578 this.invalidHandleClasses = [];
18580 this.applyConfig();
18582 this.handleOnAvailable();
18586 * Applies the configuration parameters that were passed into the constructor.
18587 * This is supposed to happen at each level through the inheritance chain. So
18588 * a DDProxy implentation will execute apply config on DDProxy, DD, and
18589 * DragDrop in order to get all of the parameters that are available in
18591 * @method applyConfig
18593 applyConfig: function() {
18595 // configurable properties:
18596 // padding, isTarget, maintainOffset, primaryButtonOnly
18597 this.padding = this.config.padding || [0, 0, 0, 0];
18598 this.isTarget = (this.config.isTarget !== false);
18599 this.maintainOffset = (this.config.maintainOffset);
18600 this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
18605 * Executed when the linked element is available
18606 * @method handleOnAvailable
18609 handleOnAvailable: function() {
18610 this.available = true;
18611 this.resetConstraints();
18612 this.onAvailable();
18616 * Configures the padding for the target zone in px. Effectively expands
18617 * (or reduces) the virtual object size for targeting calculations.
18618 * Supports css-style shorthand; if only one parameter is passed, all sides
18619 * will have that padding, and if only two are passed, the top and bottom
18620 * will have the first param, the left and right the second.
18621 * @method setPadding
18622 * @param {int} iTop Top pad
18623 * @param {int} iRight Right pad
18624 * @param {int} iBot Bot pad
18625 * @param {int} iLeft Left pad
18627 setPadding: function(iTop, iRight, iBot, iLeft) {
18628 // this.padding = [iLeft, iRight, iTop, iBot];
18629 if (!iRight && 0 !== iRight) {
18630 this.padding = [iTop, iTop, iTop, iTop];
18631 } else if (!iBot && 0 !== iBot) {
18632 this.padding = [iTop, iRight, iTop, iRight];
18634 this.padding = [iTop, iRight, iBot, iLeft];
18639 * Stores the initial placement of the linked element.
18640 * @method setInitialPosition
18641 * @param {int} diffX the X offset, default 0
18642 * @param {int} diffY the Y offset, default 0
18644 setInitPosition: function(diffX, diffY) {
18645 var el = this.getEl();
18647 if (!this.DDM.verifyEl(el)) {
18651 var dx = diffX || 0;
18652 var dy = diffY || 0;
18654 var p = Dom.getXY( el );
18656 this.initPageX = p[0] - dx;
18657 this.initPageY = p[1] - dy;
18659 this.lastPageX = p[0];
18660 this.lastPageY = p[1];
18663 this.setStartPosition(p);
18667 * Sets the start position of the element. This is set when the obj
18668 * is initialized, the reset when a drag is started.
18669 * @method setStartPosition
18670 * @param pos current position (from previous lookup)
18673 setStartPosition: function(pos) {
18674 var p = pos || Dom.getXY( this.getEl() );
18675 this.deltaSetXY = null;
18677 this.startPageX = p[0];
18678 this.startPageY = p[1];
18682 * Add this instance to a group of related drag/drop objects. All
18683 * instances belong to at least one group, and can belong to as many
18684 * groups as needed.
18685 * @method addToGroup
18686 * @param sGroup {string} the name of the group
18688 addToGroup: function(sGroup) {
18689 this.groups[sGroup] = true;
18690 this.DDM.regDragDrop(this, sGroup);
18694 * Remove's this instance from the supplied interaction group
18695 * @method removeFromGroup
18696 * @param {string} sGroup The group to drop
18698 removeFromGroup: function(sGroup) {
18699 if (this.groups[sGroup]) {
18700 delete this.groups[sGroup];
18703 this.DDM.removeDDFromGroup(this, sGroup);
18707 * Allows you to specify that an element other than the linked element
18708 * will be moved with the cursor during a drag
18709 * @method setDragElId
18710 * @param id {string} the id of the element that will be used to initiate the drag
18712 setDragElId: function(id) {
18713 this.dragElId = id;
18717 * Allows you to specify a child of the linked element that should be
18718 * used to initiate the drag operation. An example of this would be if
18719 * you have a content div with text and links. Clicking anywhere in the
18720 * content area would normally start the drag operation. Use this method
18721 * to specify that an element inside of the content div is the element
18722 * that starts the drag operation.
18723 * @method setHandleElId
18724 * @param id {string} the id of the element that will be used to
18725 * initiate the drag.
18727 setHandleElId: function(id) {
18728 if (typeof id !== "string") {
18731 this.handleElId = id;
18732 this.DDM.regHandle(this.id, id);
18736 * Allows you to set an element outside of the linked element as a drag
18738 * @method setOuterHandleElId
18739 * @param id the id of the element that will be used to initiate the drag
18741 setOuterHandleElId: function(id) {
18742 if (typeof id !== "string") {
18745 Event.on(id, "mousedown",
18746 this.handleMouseDown, this);
18747 this.setHandleElId(id);
18749 this.hasOuterHandles = true;
18753 * Remove all drag and drop hooks for this element
18756 unreg: function() {
18757 Event.un(this.id, "mousedown",
18758 this.handleMouseDown);
18759 Event.un(this.id, "touchstart",
18760 this.handleMouseDown);
18761 this._domRef = null;
18762 this.DDM._remove(this);
18765 destroy : function(){
18770 * Returns true if this instance is locked, or the drag drop mgr is locked
18771 * (meaning that all drag/drop is disabled on the page.)
18773 * @return {boolean} true if this obj or all drag/drop is locked, else
18776 isLocked: function() {
18777 return (this.DDM.isLocked() || this.locked);
18781 * Fired when this object is clicked
18782 * @method handleMouseDown
18784 * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
18787 handleMouseDown: function(e, oDD){
18789 if (!Roo.isTouch && this.primaryButtonOnly && e.button != 0) {
18790 //Roo.log('not touch/ button !=0');
18793 if (e.browserEvent.touches && e.browserEvent.touches.length != 1) {
18794 return; // double touch..
18798 if (this.isLocked()) {
18799 //Roo.log('locked');
18803 this.DDM.refreshCache(this.groups);
18804 // Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
18805 var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
18806 if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) {
18807 //Roo.log('no outer handes or not over target');
18810 // Roo.log('check validator');
18811 if (this.clickValidator(e)) {
18812 // Roo.log('validate success');
18813 // set the initial element position
18814 this.setStartPosition();
18817 this.b4MouseDown(e);
18818 this.onMouseDown(e);
18820 this.DDM.handleMouseDown(e, this);
18822 this.DDM.stopEvent(e);
18830 clickValidator: function(e) {
18831 var target = e.getTarget();
18832 return ( this.isValidHandleChild(target) &&
18833 (this.id == this.handleElId ||
18834 this.DDM.handleWasClicked(target, this.id)) );
18838 * Allows you to specify a tag name that should not start a drag operation
18839 * when clicked. This is designed to facilitate embedding links within a
18840 * drag handle that do something other than start the drag.
18841 * @method addInvalidHandleType
18842 * @param {string} tagName the type of element to exclude
18844 addInvalidHandleType: function(tagName) {
18845 var type = tagName.toUpperCase();
18846 this.invalidHandleTypes[type] = type;
18850 * Lets you to specify an element id for a child of a drag handle
18851 * that should not initiate a drag
18852 * @method addInvalidHandleId
18853 * @param {string} id the element id of the element you wish to ignore
18855 addInvalidHandleId: function(id) {
18856 if (typeof id !== "string") {
18859 this.invalidHandleIds[id] = id;
18863 * Lets you specify a css class of elements that will not initiate a drag
18864 * @method addInvalidHandleClass
18865 * @param {string} cssClass the class of the elements you wish to ignore
18867 addInvalidHandleClass: function(cssClass) {
18868 this.invalidHandleClasses.push(cssClass);
18872 * Unsets an excluded tag name set by addInvalidHandleType
18873 * @method removeInvalidHandleType
18874 * @param {string} tagName the type of element to unexclude
18876 removeInvalidHandleType: function(tagName) {
18877 var type = tagName.toUpperCase();
18878 // this.invalidHandleTypes[type] = null;
18879 delete this.invalidHandleTypes[type];
18883 * Unsets an invalid handle id
18884 * @method removeInvalidHandleId
18885 * @param {string} id the id of the element to re-enable
18887 removeInvalidHandleId: function(id) {
18888 if (typeof id !== "string") {
18891 delete this.invalidHandleIds[id];
18895 * Unsets an invalid css class
18896 * @method removeInvalidHandleClass
18897 * @param {string} cssClass the class of the element(s) you wish to
18900 removeInvalidHandleClass: function(cssClass) {
18901 for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
18902 if (this.invalidHandleClasses[i] == cssClass) {
18903 delete this.invalidHandleClasses[i];
18909 * Checks the tag exclusion list to see if this click should be ignored
18910 * @method isValidHandleChild
18911 * @param {HTMLElement} node the HTMLElement to evaluate
18912 * @return {boolean} true if this is a valid tag type, false if not
18914 isValidHandleChild: function(node) {
18917 // var n = (node.nodeName == "#text") ? node.parentNode : node;
18920 nodeName = node.nodeName.toUpperCase();
18922 nodeName = node.nodeName;
18924 valid = valid && !this.invalidHandleTypes[nodeName];
18925 valid = valid && !this.invalidHandleIds[node.id];
18927 for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
18928 valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
18937 * Create the array of horizontal tick marks if an interval was specified
18938 * in setXConstraint().
18939 * @method setXTicks
18942 setXTicks: function(iStartX, iTickSize) {
18944 this.xTickSize = iTickSize;
18948 for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
18950 this.xTicks[this.xTicks.length] = i;
18955 for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
18957 this.xTicks[this.xTicks.length] = i;
18962 this.xTicks.sort(this.DDM.numericSort) ;
18966 * Create the array of vertical tick marks if an interval was specified in
18967 * setYConstraint().
18968 * @method setYTicks
18971 setYTicks: function(iStartY, iTickSize) {
18973 this.yTickSize = iTickSize;
18977 for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
18979 this.yTicks[this.yTicks.length] = i;
18984 for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
18986 this.yTicks[this.yTicks.length] = i;
18991 this.yTicks.sort(this.DDM.numericSort) ;
18995 * By default, the element can be dragged any place on the screen. Use
18996 * this method to limit the horizontal travel of the element. Pass in
18997 * 0,0 for the parameters if you want to lock the drag to the y axis.
18998 * @method setXConstraint
18999 * @param {int} iLeft the number of pixels the element can move to the left
19000 * @param {int} iRight the number of pixels the element can move to the
19002 * @param {int} iTickSize optional parameter for specifying that the
19004 * should move iTickSize pixels at a time.
19006 setXConstraint: function(iLeft, iRight, iTickSize) {
19007 this.leftConstraint = iLeft;
19008 this.rightConstraint = iRight;
19010 this.minX = this.initPageX - iLeft;
19011 this.maxX = this.initPageX + iRight;
19012 if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
19014 this.constrainX = true;
19018 * Clears any constraints applied to this instance. Also clears ticks
19019 * since they can't exist independent of a constraint at this time.
19020 * @method clearConstraints
19022 clearConstraints: function() {
19023 this.constrainX = false;
19024 this.constrainY = false;
19029 * Clears any tick interval defined for this instance
19030 * @method clearTicks
19032 clearTicks: function() {
19033 this.xTicks = null;
19034 this.yTicks = null;
19035 this.xTickSize = 0;
19036 this.yTickSize = 0;
19040 * By default, the element can be dragged any place on the screen. Set
19041 * this to limit the vertical travel of the element. Pass in 0,0 for the
19042 * parameters if you want to lock the drag to the x axis.
19043 * @method setYConstraint
19044 * @param {int} iUp the number of pixels the element can move up
19045 * @param {int} iDown the number of pixels the element can move down
19046 * @param {int} iTickSize optional parameter for specifying that the
19047 * element should move iTickSize pixels at a time.
19049 setYConstraint: function(iUp, iDown, iTickSize) {
19050 this.topConstraint = iUp;
19051 this.bottomConstraint = iDown;
19053 this.minY = this.initPageY - iUp;
19054 this.maxY = this.initPageY + iDown;
19055 if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
19057 this.constrainY = true;
19062 * resetConstraints must be called if you manually reposition a dd element.
19063 * @method resetConstraints
19064 * @param {boolean} maintainOffset
19066 resetConstraints: function() {
19069 // Maintain offsets if necessary
19070 if (this.initPageX || this.initPageX === 0) {
19071 // figure out how much this thing has moved
19072 var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
19073 var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
19075 this.setInitPosition(dx, dy);
19077 // This is the first time we have detected the element's position
19079 this.setInitPosition();
19082 if (this.constrainX) {
19083 this.setXConstraint( this.leftConstraint,
19084 this.rightConstraint,
19088 if (this.constrainY) {
19089 this.setYConstraint( this.topConstraint,
19090 this.bottomConstraint,
19096 * Normally the drag element is moved pixel by pixel, but we can specify
19097 * that it move a number of pixels at a time. This method resolves the
19098 * location when we have it set up like this.
19100 * @param {int} val where we want to place the object
19101 * @param {int[]} tickArray sorted array of valid points
19102 * @return {int} the closest tick
19105 getTick: function(val, tickArray) {
19108 // If tick interval is not defined, it is effectively 1 pixel,
19109 // so we return the value passed to us.
19111 } else if (tickArray[0] >= val) {
19112 // The value is lower than the first tick, so we return the first
19114 return tickArray[0];
19116 for (var i=0, len=tickArray.length; i<len; ++i) {
19118 if (tickArray[next] && tickArray[next] >= val) {
19119 var diff1 = val - tickArray[i];
19120 var diff2 = tickArray[next] - val;
19121 return (diff2 > diff1) ? tickArray[i] : tickArray[next];
19125 // The value is larger than the last tick, so we return the last
19127 return tickArray[tickArray.length - 1];
19134 * @return {string} string representation of the dd obj
19136 toString: function() {
19137 return ("DragDrop " + this.id);
19145 * Ext JS Library 1.1.1
19146 * Copyright(c) 2006-2007, Ext JS, LLC.
19148 * Originally Released Under LGPL - original licence link has changed is not relivant.
19151 * <script type="text/javascript">
19156 * The drag and drop utility provides a framework for building drag and drop
19157 * applications. In addition to enabling drag and drop for specific elements,
19158 * the drag and drop elements are tracked by the manager class, and the
19159 * interactions between the various elements are tracked during the drag and
19160 * the implementing code is notified about these important moments.
19163 // Only load the library once. Rewriting the manager class would orphan
19164 // existing drag and drop instances.
19165 if (!Roo.dd.DragDropMgr) {
19168 * @class Roo.dd.DragDropMgr
19169 * DragDropMgr is a singleton that tracks the element interaction for
19170 * all DragDrop items in the window. Generally, you will not call
19171 * this class directly, but it does have helper methods that could
19172 * be useful in your DragDrop implementations.
19175 Roo.dd.DragDropMgr = function() {
19177 var Event = Roo.EventManager;
19182 * Two dimensional Array of registered DragDrop objects. The first
19183 * dimension is the DragDrop item group, the second the DragDrop
19186 * @type {string: string}
19193 * Array of element ids defined as drag handles. Used to determine
19194 * if the element that generated the mousedown event is actually the
19195 * handle and not the html element itself.
19196 * @property handleIds
19197 * @type {string: string}
19204 * the DragDrop object that is currently being dragged
19205 * @property dragCurrent
19213 * the DragDrop object(s) that are being hovered over
19214 * @property dragOvers
19222 * the X distance between the cursor and the object being dragged
19231 * the Y distance between the cursor and the object being dragged
19240 * Flag to determine if we should prevent the default behavior of the
19241 * events we define. By default this is true, but this can be set to
19242 * false if you need the default behavior (not recommended)
19243 * @property preventDefault
19247 preventDefault: true,
19250 * Flag to determine if we should stop the propagation of the events
19251 * we generate. This is true by default but you may want to set it to
19252 * false if the html element contains other features that require the
19254 * @property stopPropagation
19258 stopPropagation: true,
19261 * Internal flag that is set to true when drag and drop has been
19263 * @property initialized
19270 * All drag and drop can be disabled.
19278 * Called the first time an element is registered.
19284 this.initialized = true;
19288 * In point mode, drag and drop interaction is defined by the
19289 * location of the cursor during the drag/drop
19297 * In intersect mode, drag and drop interactio nis defined by the
19298 * overlap of two or more drag and drop objects.
19299 * @property INTERSECT
19306 * The current drag and drop mode. Default: POINT
19314 * Runs method on all drag and drop objects
19315 * @method _execOnAll
19319 _execOnAll: function(sMethod, args) {
19320 for (var i in this.ids) {
19321 for (var j in this.ids[i]) {
19322 var oDD = this.ids[i][j];
19323 if (! this.isTypeOfDD(oDD)) {
19326 oDD[sMethod].apply(oDD, args);
19332 * Drag and drop initialization. Sets up the global event handlers
19337 _onLoad: function() {
19341 if (!Roo.isTouch) {
19342 Event.on(document, "mouseup", this.handleMouseUp, this, true);
19343 Event.on(document, "mousemove", this.handleMouseMove, this, true);
19345 Event.on(document, "touchend", this.handleMouseUp, this, true);
19346 Event.on(document, "touchmove", this.handleMouseMove, this, true);
19348 Event.on(window, "unload", this._onUnload, this, true);
19349 Event.on(window, "resize", this._onResize, this, true);
19350 // Event.on(window, "mouseout", this._test);
19355 * Reset constraints on all drag and drop objs
19356 * @method _onResize
19360 _onResize: function(e) {
19361 this._execOnAll("resetConstraints", []);
19365 * Lock all drag and drop functionality
19369 lock: function() { this.locked = true; },
19372 * Unlock all drag and drop functionality
19376 unlock: function() { this.locked = false; },
19379 * Is drag and drop locked?
19381 * @return {boolean} True if drag and drop is locked, false otherwise.
19384 isLocked: function() { return this.locked; },
19387 * Location cache that is set for all drag drop objects when a drag is
19388 * initiated, cleared when the drag is finished.
19389 * @property locationCache
19396 * Set useCache to false if you want to force object the lookup of each
19397 * drag and drop linked element constantly during a drag.
19398 * @property useCache
19405 * The number of pixels that the mouse needs to move after the
19406 * mousedown before the drag is initiated. Default=3;
19407 * @property clickPixelThresh
19411 clickPixelThresh: 3,
19414 * The number of milliseconds after the mousedown event to initiate the
19415 * drag if we don't get a mouseup event. Default=1000
19416 * @property clickTimeThresh
19420 clickTimeThresh: 350,
19423 * Flag that indicates that either the drag pixel threshold or the
19424 * mousdown time threshold has been met
19425 * @property dragThreshMet
19430 dragThreshMet: false,
19433 * Timeout used for the click time threshold
19434 * @property clickTimeout
19439 clickTimeout: null,
19442 * The X position of the mousedown event stored for later use when a
19443 * drag threshold is met.
19452 * The Y position of the mousedown event stored for later use when a
19453 * drag threshold is met.
19462 * Each DragDrop instance must be registered with the DragDropMgr.
19463 * This is executed in DragDrop.init()
19464 * @method regDragDrop
19465 * @param {DragDrop} oDD the DragDrop object to register
19466 * @param {String} sGroup the name of the group this element belongs to
19469 regDragDrop: function(oDD, sGroup) {
19470 if (!this.initialized) { this.init(); }
19472 if (!this.ids[sGroup]) {
19473 this.ids[sGroup] = {};
19475 this.ids[sGroup][oDD.id] = oDD;
19479 * Removes the supplied dd instance from the supplied group. Executed
19480 * by DragDrop.removeFromGroup, so don't call this function directly.
19481 * @method removeDDFromGroup
19485 removeDDFromGroup: function(oDD, sGroup) {
19486 if (!this.ids[sGroup]) {
19487 this.ids[sGroup] = {};
19490 var obj = this.ids[sGroup];
19491 if (obj && obj[oDD.id]) {
19492 delete obj[oDD.id];
19497 * Unregisters a drag and drop item. This is executed in
19498 * DragDrop.unreg, use that method instead of calling this directly.
19503 _remove: function(oDD) {
19504 for (var g in oDD.groups) {
19505 if (g && this.ids[g][oDD.id]) {
19506 delete this.ids[g][oDD.id];
19509 delete this.handleIds[oDD.id];
19513 * Each DragDrop handle element must be registered. This is done
19514 * automatically when executing DragDrop.setHandleElId()
19515 * @method regHandle
19516 * @param {String} sDDId the DragDrop id this element is a handle for
19517 * @param {String} sHandleId the id of the element that is the drag
19521 regHandle: function(sDDId, sHandleId) {
19522 if (!this.handleIds[sDDId]) {
19523 this.handleIds[sDDId] = {};
19525 this.handleIds[sDDId][sHandleId] = sHandleId;
19529 * Utility function to determine if a given element has been
19530 * registered as a drag drop item.
19531 * @method isDragDrop
19532 * @param {String} id the element id to check
19533 * @return {boolean} true if this element is a DragDrop item,
19537 isDragDrop: function(id) {
19538 return ( this.getDDById(id) ) ? true : false;
19542 * Returns the drag and drop instances that are in all groups the
19543 * passed in instance belongs to.
19544 * @method getRelated
19545 * @param {DragDrop} p_oDD the obj to get related data for
19546 * @param {boolean} bTargetsOnly if true, only return targetable objs
19547 * @return {DragDrop[]} the related instances
19550 getRelated: function(p_oDD, bTargetsOnly) {
19552 for (var i in p_oDD.groups) {
19553 for (j in this.ids[i]) {
19554 var dd = this.ids[i][j];
19555 if (! this.isTypeOfDD(dd)) {
19558 if (!bTargetsOnly || dd.isTarget) {
19559 oDDs[oDDs.length] = dd;
19568 * Returns true if the specified dd target is a legal target for
19569 * the specifice drag obj
19570 * @method isLegalTarget
19571 * @param {DragDrop} the drag obj
19572 * @param {DragDrop} the target
19573 * @return {boolean} true if the target is a legal target for the
19577 isLegalTarget: function (oDD, oTargetDD) {
19578 var targets = this.getRelated(oDD, true);
19579 for (var i=0, len=targets.length;i<len;++i) {
19580 if (targets[i].id == oTargetDD.id) {
19589 * My goal is to be able to transparently determine if an object is
19590 * typeof DragDrop, and the exact subclass of DragDrop. typeof
19591 * returns "object", oDD.constructor.toString() always returns
19592 * "DragDrop" and not the name of the subclass. So for now it just
19593 * evaluates a well-known variable in DragDrop.
19594 * @method isTypeOfDD
19595 * @param {Object} the object to evaluate
19596 * @return {boolean} true if typeof oDD = DragDrop
19599 isTypeOfDD: function (oDD) {
19600 return (oDD && oDD.__ygDragDrop);
19604 * Utility function to determine if a given element has been
19605 * registered as a drag drop handle for the given Drag Drop object.
19607 * @param {String} id the element id to check
19608 * @return {boolean} true if this element is a DragDrop handle, false
19612 isHandle: function(sDDId, sHandleId) {
19613 return ( this.handleIds[sDDId] &&
19614 this.handleIds[sDDId][sHandleId] );
19618 * Returns the DragDrop instance for a given id
19619 * @method getDDById
19620 * @param {String} id the id of the DragDrop object
19621 * @return {DragDrop} the drag drop object, null if it is not found
19624 getDDById: function(id) {
19625 for (var i in this.ids) {
19626 if (this.ids[i][id]) {
19627 return this.ids[i][id];
19634 * Fired after a registered DragDrop object gets the mousedown event.
19635 * Sets up the events required to track the object being dragged
19636 * @method handleMouseDown
19637 * @param {Event} e the event
19638 * @param oDD the DragDrop object being dragged
19642 handleMouseDown: function(e, oDD) {
19644 Roo.QuickTips.disable();
19646 this.currentTarget = e.getTarget();
19648 this.dragCurrent = oDD;
19650 var el = oDD.getEl();
19652 // track start position
19653 this.startX = e.getPageX();
19654 this.startY = e.getPageY();
19656 this.deltaX = this.startX - el.offsetLeft;
19657 this.deltaY = this.startY - el.offsetTop;
19659 this.dragThreshMet = false;
19661 this.clickTimeout = setTimeout(
19663 var DDM = Roo.dd.DDM;
19664 DDM.startDrag(DDM.startX, DDM.startY);
19666 this.clickTimeThresh );
19670 * Fired when either the drag pixel threshol or the mousedown hold
19671 * time threshold has been met.
19672 * @method startDrag
19673 * @param x {int} the X position of the original mousedown
19674 * @param y {int} the Y position of the original mousedown
19677 startDrag: function(x, y) {
19678 clearTimeout(this.clickTimeout);
19679 if (this.dragCurrent) {
19680 this.dragCurrent.b4StartDrag(x, y);
19681 this.dragCurrent.startDrag(x, y);
19683 this.dragThreshMet = true;
19687 * Internal function to handle the mouseup event. Will be invoked
19688 * from the context of the document.
19689 * @method handleMouseUp
19690 * @param {Event} e the event
19694 handleMouseUp: function(e) {
19697 Roo.QuickTips.enable();
19699 if (! this.dragCurrent) {
19703 clearTimeout(this.clickTimeout);
19705 if (this.dragThreshMet) {
19706 this.fireEvents(e, true);
19716 * Utility to stop event propagation and event default, if these
19717 * features are turned on.
19718 * @method stopEvent
19719 * @param {Event} e the event as returned by this.getEvent()
19722 stopEvent: function(e){
19723 if(this.stopPropagation) {
19724 e.stopPropagation();
19727 if (this.preventDefault) {
19728 e.preventDefault();
19733 * Internal function to clean up event handlers after the drag
19734 * operation is complete
19736 * @param {Event} e the event
19740 stopDrag: function(e) {
19741 // Fire the drag end event for the item that was dragged
19742 if (this.dragCurrent) {
19743 if (this.dragThreshMet) {
19744 this.dragCurrent.b4EndDrag(e);
19745 this.dragCurrent.endDrag(e);
19748 this.dragCurrent.onMouseUp(e);
19751 this.dragCurrent = null;
19752 this.dragOvers = {};
19756 * Internal function to handle the mousemove event. Will be invoked
19757 * from the context of the html element.
19759 * @TODO figure out what we can do about mouse events lost when the
19760 * user drags objects beyond the window boundary. Currently we can
19761 * detect this in internet explorer by verifying that the mouse is
19762 * down during the mousemove event. Firefox doesn't give us the
19763 * button state on the mousemove event.
19764 * @method handleMouseMove
19765 * @param {Event} e the event
19769 handleMouseMove: function(e) {
19770 if (! this.dragCurrent) {
19774 // var button = e.which || e.button;
19776 // check for IE mouseup outside of page boundary
19777 if (Roo.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
19779 return this.handleMouseUp(e);
19782 if (!this.dragThreshMet) {
19783 var diffX = Math.abs(this.startX - e.getPageX());
19784 var diffY = Math.abs(this.startY - e.getPageY());
19785 if (diffX > this.clickPixelThresh ||
19786 diffY > this.clickPixelThresh) {
19787 this.startDrag(this.startX, this.startY);
19791 if (this.dragThreshMet) {
19792 this.dragCurrent.b4Drag(e);
19793 this.dragCurrent.onDrag(e);
19794 if(!this.dragCurrent.moveOnly){
19795 this.fireEvents(e, false);
19805 * Iterates over all of the DragDrop elements to find ones we are
19806 * hovering over or dropping on
19807 * @method fireEvents
19808 * @param {Event} e the event
19809 * @param {boolean} isDrop is this a drop op or a mouseover op?
19813 fireEvents: function(e, isDrop) {
19814 var dc = this.dragCurrent;
19816 // If the user did the mouse up outside of the window, we could
19817 // get here even though we have ended the drag.
19818 if (!dc || dc.isLocked()) {
19822 var pt = e.getPoint();
19824 // cache the previous dragOver array
19830 var enterEvts = [];
19832 // Check to see if the object(s) we were hovering over is no longer
19833 // being hovered over so we can fire the onDragOut event
19834 for (var i in this.dragOvers) {
19836 var ddo = this.dragOvers[i];
19838 if (! this.isTypeOfDD(ddo)) {
19842 if (! this.isOverTarget(pt, ddo, this.mode)) {
19843 outEvts.push( ddo );
19846 oldOvers[i] = true;
19847 delete this.dragOvers[i];
19850 for (var sGroup in dc.groups) {
19852 if ("string" != typeof sGroup) {
19856 for (i in this.ids[sGroup]) {
19857 var oDD = this.ids[sGroup][i];
19858 if (! this.isTypeOfDD(oDD)) {
19862 if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
19863 if (this.isOverTarget(pt, oDD, this.mode)) {
19864 // look for drop interactions
19866 dropEvts.push( oDD );
19867 // look for drag enter and drag over interactions
19870 // initial drag over: dragEnter fires
19871 if (!oldOvers[oDD.id]) {
19872 enterEvts.push( oDD );
19873 // subsequent drag overs: dragOver fires
19875 overEvts.push( oDD );
19878 this.dragOvers[oDD.id] = oDD;
19886 if (outEvts.length) {
19887 dc.b4DragOut(e, outEvts);
19888 dc.onDragOut(e, outEvts);
19891 if (enterEvts.length) {
19892 dc.onDragEnter(e, enterEvts);
19895 if (overEvts.length) {
19896 dc.b4DragOver(e, overEvts);
19897 dc.onDragOver(e, overEvts);
19900 if (dropEvts.length) {
19901 dc.b4DragDrop(e, dropEvts);
19902 dc.onDragDrop(e, dropEvts);
19906 // fire dragout events
19908 for (i=0, len=outEvts.length; i<len; ++i) {
19909 dc.b4DragOut(e, outEvts[i].id);
19910 dc.onDragOut(e, outEvts[i].id);
19913 // fire enter events
19914 for (i=0,len=enterEvts.length; i<len; ++i) {
19915 // dc.b4DragEnter(e, oDD.id);
19916 dc.onDragEnter(e, enterEvts[i].id);
19919 // fire over events
19920 for (i=0,len=overEvts.length; i<len; ++i) {
19921 dc.b4DragOver(e, overEvts[i].id);
19922 dc.onDragOver(e, overEvts[i].id);
19925 // fire drop events
19926 for (i=0, len=dropEvts.length; i<len; ++i) {
19927 dc.b4DragDrop(e, dropEvts[i].id);
19928 dc.onDragDrop(e, dropEvts[i].id);
19933 // notify about a drop that did not find a target
19934 if (isDrop && !dropEvts.length) {
19935 dc.onInvalidDrop(e);
19941 * Helper function for getting the best match from the list of drag
19942 * and drop objects returned by the drag and drop events when we are
19943 * in INTERSECT mode. It returns either the first object that the
19944 * cursor is over, or the object that has the greatest overlap with
19945 * the dragged element.
19946 * @method getBestMatch
19947 * @param {DragDrop[]} dds The array of drag and drop objects
19949 * @return {DragDrop} The best single match
19952 getBestMatch: function(dds) {
19954 // Return null if the input is not what we expect
19955 //if (!dds || !dds.length || dds.length == 0) {
19957 // If there is only one item, it wins
19958 //} else if (dds.length == 1) {
19960 var len = dds.length;
19965 // Loop through the targeted items
19966 for (var i=0; i<len; ++i) {
19968 // If the cursor is over the object, it wins. If the
19969 // cursor is over multiple matches, the first one we come
19971 if (dd.cursorIsOver) {
19974 // Otherwise the object with the most overlap wins
19977 winner.overlap.getArea() < dd.overlap.getArea()) {
19988 * Refreshes the cache of the top-left and bottom-right points of the
19989 * drag and drop objects in the specified group(s). This is in the
19990 * format that is stored in the drag and drop instance, so typical
19993 * Roo.dd.DragDropMgr.refreshCache(ddinstance.groups);
19997 * Roo.dd.DragDropMgr.refreshCache({group1:true, group2:true});
19999 * @TODO this really should be an indexed array. Alternatively this
20000 * method could accept both.
20001 * @method refreshCache
20002 * @param {Object} groups an associative array of groups to refresh
20005 refreshCache: function(groups) {
20006 for (var sGroup in groups) {
20007 if ("string" != typeof sGroup) {
20010 for (var i in this.ids[sGroup]) {
20011 var oDD = this.ids[sGroup][i];
20013 if (this.isTypeOfDD(oDD)) {
20014 // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
20015 var loc = this.getLocation(oDD);
20017 this.locationCache[oDD.id] = loc;
20019 delete this.locationCache[oDD.id];
20020 // this will unregister the drag and drop object if
20021 // the element is not in a usable state
20030 * This checks to make sure an element exists and is in the DOM. The
20031 * main purpose is to handle cases where innerHTML is used to remove
20032 * drag and drop objects from the DOM. IE provides an 'unspecified
20033 * error' when trying to access the offsetParent of such an element
20035 * @param {HTMLElement} el the element to check
20036 * @return {boolean} true if the element looks usable
20039 verifyEl: function(el) {
20044 parent = el.offsetParent;
20047 parent = el.offsetParent;
20058 * Returns a Region object containing the drag and drop element's position
20059 * and size, including the padding configured for it
20060 * @method getLocation
20061 * @param {DragDrop} oDD the drag and drop object to get the
20063 * @return {Roo.lib.Region} a Region object representing the total area
20064 * the element occupies, including any padding
20065 * the instance is configured for.
20068 getLocation: function(oDD) {
20069 if (! this.isTypeOfDD(oDD)) {
20073 var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
20076 pos= Roo.lib.Dom.getXY(el);
20084 x2 = x1 + el.offsetWidth;
20086 y2 = y1 + el.offsetHeight;
20088 t = y1 - oDD.padding[0];
20089 r = x2 + oDD.padding[1];
20090 b = y2 + oDD.padding[2];
20091 l = x1 - oDD.padding[3];
20093 return new Roo.lib.Region( t, r, b, l );
20097 * Checks the cursor location to see if it over the target
20098 * @method isOverTarget
20099 * @param {Roo.lib.Point} pt The point to evaluate
20100 * @param {DragDrop} oTarget the DragDrop object we are inspecting
20101 * @return {boolean} true if the mouse is over the target
20105 isOverTarget: function(pt, oTarget, intersect) {
20106 // use cache if available
20107 var loc = this.locationCache[oTarget.id];
20108 if (!loc || !this.useCache) {
20109 loc = this.getLocation(oTarget);
20110 this.locationCache[oTarget.id] = loc;
20118 oTarget.cursorIsOver = loc.contains( pt );
20120 // DragDrop is using this as a sanity check for the initial mousedown
20121 // in this case we are done. In POINT mode, if the drag obj has no
20122 // contraints, we are also done. Otherwise we need to evaluate the
20123 // location of the target as related to the actual location of the
20124 // dragged element.
20125 var dc = this.dragCurrent;
20126 if (!dc || !dc.getTargetCoord ||
20127 (!intersect && !dc.constrainX && !dc.constrainY)) {
20128 return oTarget.cursorIsOver;
20131 oTarget.overlap = null;
20133 // Get the current location of the drag element, this is the
20134 // location of the mouse event less the delta that represents
20135 // where the original mousedown happened on the element. We
20136 // need to consider constraints and ticks as well.
20137 var pos = dc.getTargetCoord(pt.x, pt.y);
20139 var el = dc.getDragEl();
20140 var curRegion = new Roo.lib.Region( pos.y,
20141 pos.x + el.offsetWidth,
20142 pos.y + el.offsetHeight,
20145 var overlap = curRegion.intersect(loc);
20148 oTarget.overlap = overlap;
20149 return (intersect) ? true : oTarget.cursorIsOver;
20156 * unload event handler
20157 * @method _onUnload
20161 _onUnload: function(e, me) {
20162 Roo.dd.DragDropMgr.unregAll();
20166 * Cleans up the drag and drop events and objects.
20171 unregAll: function() {
20173 if (this.dragCurrent) {
20175 this.dragCurrent = null;
20178 this._execOnAll("unreg", []);
20180 for (i in this.elementCache) {
20181 delete this.elementCache[i];
20184 this.elementCache = {};
20189 * A cache of DOM elements
20190 * @property elementCache
20197 * Get the wrapper for the DOM element specified
20198 * @method getElWrapper
20199 * @param {String} id the id of the element to get
20200 * @return {Roo.dd.DDM.ElementWrapper} the wrapped element
20202 * @deprecated This wrapper isn't that useful
20205 getElWrapper: function(id) {
20206 var oWrapper = this.elementCache[id];
20207 if (!oWrapper || !oWrapper.el) {
20208 oWrapper = this.elementCache[id] =
20209 new this.ElementWrapper(Roo.getDom(id));
20215 * Returns the actual DOM element
20216 * @method getElement
20217 * @param {String} id the id of the elment to get
20218 * @return {Object} The element
20219 * @deprecated use Roo.getDom instead
20222 getElement: function(id) {
20223 return Roo.getDom(id);
20227 * Returns the style property for the DOM element (i.e.,
20228 * document.getElById(id).style)
20230 * @param {String} id the id of the elment to get
20231 * @return {Object} The style property of the element
20232 * @deprecated use Roo.getDom instead
20235 getCss: function(id) {
20236 var el = Roo.getDom(id);
20237 return (el) ? el.style : null;
20241 * Inner class for cached elements
20242 * @class DragDropMgr.ElementWrapper
20247 ElementWrapper: function(el) {
20252 this.el = el || null;
20257 this.id = this.el && el.id;
20259 * A reference to the style property
20262 this.css = this.el && el.style;
20266 * Returns the X position of an html element
20268 * @param el the element for which to get the position
20269 * @return {int} the X coordinate
20271 * @deprecated use Roo.lib.Dom.getX instead
20274 getPosX: function(el) {
20275 return Roo.lib.Dom.getX(el);
20279 * Returns the Y position of an html element
20281 * @param el the element for which to get the position
20282 * @return {int} the Y coordinate
20283 * @deprecated use Roo.lib.Dom.getY instead
20286 getPosY: function(el) {
20287 return Roo.lib.Dom.getY(el);
20291 * Swap two nodes. In IE, we use the native method, for others we
20292 * emulate the IE behavior
20294 * @param n1 the first node to swap
20295 * @param n2 the other node to swap
20298 swapNode: function(n1, n2) {
20302 var p = n2.parentNode;
20303 var s = n2.nextSibling;
20306 p.insertBefore(n1, n2);
20307 } else if (n2 == n1.nextSibling) {
20308 p.insertBefore(n2, n1);
20310 n1.parentNode.replaceChild(n2, n1);
20311 p.insertBefore(n1, s);
20317 * Returns the current scroll position
20318 * @method getScroll
20322 getScroll: function () {
20323 var t, l, dde=document.documentElement, db=document.body;
20324 if (dde && (dde.scrollTop || dde.scrollLeft)) {
20326 l = dde.scrollLeft;
20333 return { top: t, left: l };
20337 * Returns the specified element style property
20339 * @param {HTMLElement} el the element
20340 * @param {string} styleProp the style property
20341 * @return {string} The value of the style property
20342 * @deprecated use Roo.lib.Dom.getStyle
20345 getStyle: function(el, styleProp) {
20346 return Roo.fly(el).getStyle(styleProp);
20350 * Gets the scrollTop
20351 * @method getScrollTop
20352 * @return {int} the document's scrollTop
20355 getScrollTop: function () { return this.getScroll().top; },
20358 * Gets the scrollLeft
20359 * @method getScrollLeft
20360 * @return {int} the document's scrollTop
20363 getScrollLeft: function () { return this.getScroll().left; },
20366 * Sets the x/y position of an element to the location of the
20369 * @param {HTMLElement} moveEl The element to move
20370 * @param {HTMLElement} targetEl The position reference element
20373 moveToEl: function (moveEl, targetEl) {
20374 var aCoord = Roo.lib.Dom.getXY(targetEl);
20375 Roo.lib.Dom.setXY(moveEl, aCoord);
20379 * Numeric array sort function
20380 * @method numericSort
20383 numericSort: function(a, b) { return (a - b); },
20387 * @property _timeoutCount
20394 * Trying to make the load order less important. Without this we get
20395 * an error if this file is loaded before the Event Utility.
20396 * @method _addListeners
20400 _addListeners: function() {
20401 var DDM = Roo.dd.DDM;
20402 if ( Roo.lib.Event && document ) {
20405 if (DDM._timeoutCount > 2000) {
20407 setTimeout(DDM._addListeners, 10);
20408 if (document && document.body) {
20409 DDM._timeoutCount += 1;
20416 * Recursively searches the immediate parent and all child nodes for
20417 * the handle element in order to determine wheter or not it was
20419 * @method handleWasClicked
20420 * @param node the html element to inspect
20423 handleWasClicked: function(node, id) {
20424 if (this.isHandle(id, node.id)) {
20427 // check to see if this is a text node child of the one we want
20428 var p = node.parentNode;
20431 if (this.isHandle(id, p.id)) {
20446 // shorter alias, save a few bytes
20447 Roo.dd.DDM = Roo.dd.DragDropMgr;
20448 Roo.dd.DDM._addListeners();
20452 * Ext JS Library 1.1.1
20453 * Copyright(c) 2006-2007, Ext JS, LLC.
20455 * Originally Released Under LGPL - original licence link has changed is not relivant.
20458 * <script type="text/javascript">
20463 * A DragDrop implementation where the linked element follows the
20464 * mouse cursor during a drag.
20465 * @extends Roo.dd.DragDrop
20467 * @param {String} id the id of the linked element
20468 * @param {String} sGroup the group of related DragDrop items
20469 * @param {object} config an object containing configurable attributes
20470 * Valid properties for DD:
20473 Roo.dd.DD = function(id, sGroup, config) {
20475 this.init(id, sGroup, config);
20479 Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
20482 * When set to true, the utility automatically tries to scroll the browser
20483 * window wehn a drag and drop element is dragged near the viewport boundary.
20484 * Defaults to true.
20491 * Sets the pointer offset to the distance between the linked element's top
20492 * left corner and the location the element was clicked
20493 * @method autoOffset
20494 * @param {int} iPageX the X coordinate of the click
20495 * @param {int} iPageY the Y coordinate of the click
20497 autoOffset: function(iPageX, iPageY) {
20498 var x = iPageX - this.startPageX;
20499 var y = iPageY - this.startPageY;
20500 this.setDelta(x, y);
20504 * Sets the pointer offset. You can call this directly to force the
20505 * offset to be in a particular location (e.g., pass in 0,0 to set it
20506 * to the center of the object)
20508 * @param {int} iDeltaX the distance from the left
20509 * @param {int} iDeltaY the distance from the top
20511 setDelta: function(iDeltaX, iDeltaY) {
20512 this.deltaX = iDeltaX;
20513 this.deltaY = iDeltaY;
20517 * Sets the drag element to the location of the mousedown or click event,
20518 * maintaining the cursor location relative to the location on the element
20519 * that was clicked. Override this if you want to place the element in a
20520 * location other than where the cursor is.
20521 * @method setDragElPos
20522 * @param {int} iPageX the X coordinate of the mousedown or drag event
20523 * @param {int} iPageY the Y coordinate of the mousedown or drag event
20525 setDragElPos: function(iPageX, iPageY) {
20526 // the first time we do this, we are going to check to make sure
20527 // the element has css positioning
20529 var el = this.getDragEl();
20530 this.alignElWithMouse(el, iPageX, iPageY);
20534 * Sets the element to the location of the mousedown or click event,
20535 * maintaining the cursor location relative to the location on the element
20536 * that was clicked. Override this if you want to place the element in a
20537 * location other than where the cursor is.
20538 * @method alignElWithMouse
20539 * @param {HTMLElement} el the element to move
20540 * @param {int} iPageX the X coordinate of the mousedown or drag event
20541 * @param {int} iPageY the Y coordinate of the mousedown or drag event
20543 alignElWithMouse: function(el, iPageX, iPageY) {
20544 var oCoord = this.getTargetCoord(iPageX, iPageY);
20545 var fly = el.dom ? el : Roo.fly(el);
20546 if (!this.deltaSetXY) {
20547 var aCoord = [oCoord.x, oCoord.y];
20549 var newLeft = fly.getLeft(true);
20550 var newTop = fly.getTop(true);
20551 this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
20553 fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]);
20556 this.cachePosition(oCoord.x, oCoord.y);
20557 this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
20562 * Saves the most recent position so that we can reset the constraints and
20563 * tick marks on-demand. We need to know this so that we can calculate the
20564 * number of pixels the element is offset from its original position.
20565 * @method cachePosition
20566 * @param iPageX the current x position (optional, this just makes it so we
20567 * don't have to look it up again)
20568 * @param iPageY the current y position (optional, this just makes it so we
20569 * don't have to look it up again)
20571 cachePosition: function(iPageX, iPageY) {
20573 this.lastPageX = iPageX;
20574 this.lastPageY = iPageY;
20576 var aCoord = Roo.lib.Dom.getXY(this.getEl());
20577 this.lastPageX = aCoord[0];
20578 this.lastPageY = aCoord[1];
20583 * Auto-scroll the window if the dragged object has been moved beyond the
20584 * visible window boundary.
20585 * @method autoScroll
20586 * @param {int} x the drag element's x position
20587 * @param {int} y the drag element's y position
20588 * @param {int} h the height of the drag element
20589 * @param {int} w the width of the drag element
20592 autoScroll: function(x, y, h, w) {
20595 // The client height
20596 var clientH = Roo.lib.Dom.getViewWidth();
20598 // The client width
20599 var clientW = Roo.lib.Dom.getViewHeight();
20601 // The amt scrolled down
20602 var st = this.DDM.getScrollTop();
20604 // The amt scrolled right
20605 var sl = this.DDM.getScrollLeft();
20607 // Location of the bottom of the element
20610 // Location of the right of the element
20613 // The distance from the cursor to the bottom of the visible area,
20614 // adjusted so that we don't scroll if the cursor is beyond the
20615 // element drag constraints
20616 var toBot = (clientH + st - y - this.deltaY);
20618 // The distance from the cursor to the right of the visible area
20619 var toRight = (clientW + sl - x - this.deltaX);
20622 // How close to the edge the cursor must be before we scroll
20623 // var thresh = (document.all) ? 100 : 40;
20626 // How many pixels to scroll per autoscroll op. This helps to reduce
20627 // clunky scrolling. IE is more sensitive about this ... it needs this
20628 // value to be higher.
20629 var scrAmt = (document.all) ? 80 : 30;
20631 // Scroll down if we are near the bottom of the visible page and the
20632 // obj extends below the crease
20633 if ( bot > clientH && toBot < thresh ) {
20634 window.scrollTo(sl, st + scrAmt);
20637 // Scroll up if the window is scrolled down and the top of the object
20638 // goes above the top border
20639 if ( y < st && st > 0 && y - st < thresh ) {
20640 window.scrollTo(sl, st - scrAmt);
20643 // Scroll right if the obj is beyond the right border and the cursor is
20644 // near the border.
20645 if ( right > clientW && toRight < thresh ) {
20646 window.scrollTo(sl + scrAmt, st);
20649 // Scroll left if the window has been scrolled to the right and the obj
20650 // extends past the left border
20651 if ( x < sl && sl > 0 && x - sl < thresh ) {
20652 window.scrollTo(sl - scrAmt, st);
20658 * Finds the location the element should be placed if we want to move
20659 * it to where the mouse location less the click offset would place us.
20660 * @method getTargetCoord
20661 * @param {int} iPageX the X coordinate of the click
20662 * @param {int} iPageY the Y coordinate of the click
20663 * @return an object that contains the coordinates (Object.x and Object.y)
20666 getTargetCoord: function(iPageX, iPageY) {
20669 var x = iPageX - this.deltaX;
20670 var y = iPageY - this.deltaY;
20672 if (this.constrainX) {
20673 if (x < this.minX) { x = this.minX; }
20674 if (x > this.maxX) { x = this.maxX; }
20677 if (this.constrainY) {
20678 if (y < this.minY) { y = this.minY; }
20679 if (y > this.maxY) { y = this.maxY; }
20682 x = this.getTick(x, this.xTicks);
20683 y = this.getTick(y, this.yTicks);
20690 * Sets up config options specific to this class. Overrides
20691 * Roo.dd.DragDrop, but all versions of this method through the
20692 * inheritance chain are called
20694 applyConfig: function() {
20695 Roo.dd.DD.superclass.applyConfig.call(this);
20696 this.scroll = (this.config.scroll !== false);
20700 * Event that fires prior to the onMouseDown event. Overrides
20703 b4MouseDown: function(e) {
20704 // this.resetConstraints();
20705 this.autoOffset(e.getPageX(),
20710 * Event that fires prior to the onDrag event. Overrides
20713 b4Drag: function(e) {
20714 this.setDragElPos(e.getPageX(),
20718 toString: function() {
20719 return ("DD " + this.id);
20722 //////////////////////////////////////////////////////////////////////////
20723 // Debugging ygDragDrop events that can be overridden
20724 //////////////////////////////////////////////////////////////////////////
20726 startDrag: function(x, y) {
20729 onDrag: function(e) {
20732 onDragEnter: function(e, id) {
20735 onDragOver: function(e, id) {
20738 onDragOut: function(e, id) {
20741 onDragDrop: function(e, id) {
20744 endDrag: function(e) {
20751 * Ext JS Library 1.1.1
20752 * Copyright(c) 2006-2007, Ext JS, LLC.
20754 * Originally Released Under LGPL - original licence link has changed is not relivant.
20757 * <script type="text/javascript">
20761 * @class Roo.dd.DDProxy
20762 * A DragDrop implementation that inserts an empty, bordered div into
20763 * the document that follows the cursor during drag operations. At the time of
20764 * the click, the frame div is resized to the dimensions of the linked html
20765 * element, and moved to the exact location of the linked element.
20767 * References to the "frame" element refer to the single proxy element that
20768 * was created to be dragged in place of all DDProxy elements on the
20771 * @extends Roo.dd.DD
20773 * @param {String} id the id of the linked html element
20774 * @param {String} sGroup the group of related DragDrop objects
20775 * @param {object} config an object containing configurable attributes
20776 * Valid properties for DDProxy in addition to those in DragDrop:
20777 * resizeFrame, centerFrame, dragElId
20779 Roo.dd.DDProxy = function(id, sGroup, config) {
20781 this.init(id, sGroup, config);
20787 * The default drag frame div id
20788 * @property Roo.dd.DDProxy.dragElId
20792 Roo.dd.DDProxy.dragElId = "ygddfdiv";
20794 Roo.extend(Roo.dd.DDProxy, Roo.dd.DD, {
20797 * By default we resize the drag frame to be the same size as the element
20798 * we want to drag (this is to get the frame effect). We can turn it off
20799 * if we want a different behavior.
20800 * @property resizeFrame
20806 * By default the frame is positioned exactly where the drag element is, so
20807 * we use the cursor offset provided by Roo.dd.DD. Another option that works only if
20808 * you do not have constraints on the obj is to have the drag frame centered
20809 * around the cursor. Set centerFrame to true for this effect.
20810 * @property centerFrame
20813 centerFrame: false,
20816 * Creates the proxy element if it does not yet exist
20817 * @method createFrame
20819 createFrame: function() {
20821 var body = document.body;
20823 if (!body || !body.firstChild) {
20824 setTimeout( function() { self.createFrame(); }, 50 );
20828 var div = this.getDragEl();
20831 div = document.createElement("div");
20832 div.id = this.dragElId;
20835 s.position = "absolute";
20836 s.visibility = "hidden";
20838 s.border = "2px solid #aaa";
20841 // appendChild can blow up IE if invoked prior to the window load event
20842 // while rendering a table. It is possible there are other scenarios
20843 // that would cause this to happen as well.
20844 body.insertBefore(div, body.firstChild);
20849 * Initialization for the drag frame element. Must be called in the
20850 * constructor of all subclasses
20851 * @method initFrame
20853 initFrame: function() {
20854 this.createFrame();
20857 applyConfig: function() {
20858 Roo.dd.DDProxy.superclass.applyConfig.call(this);
20860 this.resizeFrame = (this.config.resizeFrame !== false);
20861 this.centerFrame = (this.config.centerFrame);
20862 this.setDragElId(this.config.dragElId || Roo.dd.DDProxy.dragElId);
20866 * Resizes the drag frame to the dimensions of the clicked object, positions
20867 * it over the object, and finally displays it
20868 * @method showFrame
20869 * @param {int} iPageX X click position
20870 * @param {int} iPageY Y click position
20873 showFrame: function(iPageX, iPageY) {
20874 var el = this.getEl();
20875 var dragEl = this.getDragEl();
20876 var s = dragEl.style;
20878 this._resizeProxy();
20880 if (this.centerFrame) {
20881 this.setDelta( Math.round(parseInt(s.width, 10)/2),
20882 Math.round(parseInt(s.height, 10)/2) );
20885 this.setDragElPos(iPageX, iPageY);
20887 Roo.fly(dragEl).show();
20891 * The proxy is automatically resized to the dimensions of the linked
20892 * element when a drag is initiated, unless resizeFrame is set to false
20893 * @method _resizeProxy
20896 _resizeProxy: function() {
20897 if (this.resizeFrame) {
20898 var el = this.getEl();
20899 Roo.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
20903 // overrides Roo.dd.DragDrop
20904 b4MouseDown: function(e) {
20905 var x = e.getPageX();
20906 var y = e.getPageY();
20907 this.autoOffset(x, y);
20908 this.setDragElPos(x, y);
20911 // overrides Roo.dd.DragDrop
20912 b4StartDrag: function(x, y) {
20913 // show the drag frame
20914 this.showFrame(x, y);
20917 // overrides Roo.dd.DragDrop
20918 b4EndDrag: function(e) {
20919 Roo.fly(this.getDragEl()).hide();
20922 // overrides Roo.dd.DragDrop
20923 // By default we try to move the element to the last location of the frame.
20924 // This is so that the default behavior mirrors that of Roo.dd.DD.
20925 endDrag: function(e) {
20927 var lel = this.getEl();
20928 var del = this.getDragEl();
20930 // Show the drag frame briefly so we can get its position
20931 del.style.visibility = "";
20934 // Hide the linked element before the move to get around a Safari
20936 lel.style.visibility = "hidden";
20937 Roo.dd.DDM.moveToEl(lel, del);
20938 del.style.visibility = "hidden";
20939 lel.style.visibility = "";
20944 beforeMove : function(){
20948 afterDrag : function(){
20952 toString: function() {
20953 return ("DDProxy " + this.id);
20959 * Ext JS Library 1.1.1
20960 * Copyright(c) 2006-2007, Ext JS, LLC.
20962 * Originally Released Under LGPL - original licence link has changed is not relivant.
20965 * <script type="text/javascript">
20969 * @class Roo.dd.DDTarget
20970 * A DragDrop implementation that does not move, but can be a drop
20971 * target. You would get the same result by simply omitting implementation
20972 * for the event callbacks, but this way we reduce the processing cost of the
20973 * event listener and the callbacks.
20974 * @extends Roo.dd.DragDrop
20976 * @param {String} id the id of the element that is a drop target
20977 * @param {String} sGroup the group of related DragDrop objects
20978 * @param {object} config an object containing configurable attributes
20979 * Valid properties for DDTarget in addition to those in
20983 Roo.dd.DDTarget = function(id, sGroup, config) {
20985 this.initTarget(id, sGroup, config);
20987 if (config.listeners || config.events) {
20988 Roo.dd.DragDrop.superclass.constructor.call(this, {
20989 listeners : config.listeners || {},
20990 events : config.events || {}
20995 // Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
20996 Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
20997 toString: function() {
20998 return ("DDTarget " + this.id);
21003 * Ext JS Library 1.1.1
21004 * Copyright(c) 2006-2007, Ext JS, LLC.
21006 * Originally Released Under LGPL - original licence link has changed is not relivant.
21009 * <script type="text/javascript">
21014 * @class Roo.dd.ScrollManager
21015 * Provides automatic scrolling of overflow regions in the page during drag operations.<br><br>
21016 * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
21019 Roo.dd.ScrollManager = function(){
21020 var ddm = Roo.dd.DragDropMgr;
21027 var onStop = function(e){
21032 var triggerRefresh = function(){
21033 if(ddm.dragCurrent){
21034 ddm.refreshCache(ddm.dragCurrent.groups);
21038 var doScroll = function(){
21039 if(ddm.dragCurrent){
21040 var dds = Roo.dd.ScrollManager;
21042 if(proc.el.scroll(proc.dir, dds.increment)){
21046 proc.el.scroll(proc.dir, dds.increment, true, dds.animDuration, triggerRefresh);
21051 var clearProc = function(){
21053 clearInterval(proc.id);
21060 var startProc = function(el, dir){
21061 Roo.log('scroll startproc');
21065 proc.id = setInterval(doScroll, Roo.dd.ScrollManager.frequency);
21068 var onFire = function(e, isDrop){
21070 if(isDrop || !ddm.dragCurrent){ return; }
21071 var dds = Roo.dd.ScrollManager;
21072 if(!dragEl || dragEl != ddm.dragCurrent){
21073 dragEl = ddm.dragCurrent;
21074 // refresh regions on drag start
21075 dds.refreshCache();
21078 var xy = Roo.lib.Event.getXY(e);
21079 var pt = new Roo.lib.Point(xy[0], xy[1]);
21080 for(var id in els){
21081 var el = els[id], r = el._region;
21082 if(r && r.contains(pt) && el.isScrollable()){
21083 if(r.bottom - pt.y <= dds.thresh){
21085 startProc(el, "down");
21088 }else if(r.right - pt.x <= dds.thresh){
21090 startProc(el, "left");
21093 }else if(pt.y - r.top <= dds.thresh){
21095 startProc(el, "up");
21098 }else if(pt.x - r.left <= dds.thresh){
21100 startProc(el, "right");
21109 ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
21110 ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
21114 * Registers new overflow element(s) to auto scroll
21115 * @param {String/HTMLElement/Element/Array} el The id of or the element to be scrolled or an array of either
21117 register : function(el){
21118 if(el instanceof Array){
21119 for(var i = 0, len = el.length; i < len; i++) {
21120 this.register(el[i]);
21126 Roo.dd.ScrollManager.els = els;
21130 * Unregisters overflow element(s) so they are no longer scrolled
21131 * @param {String/HTMLElement/Element/Array} el The id of or the element to be removed or an array of either
21133 unregister : function(el){
21134 if(el instanceof Array){
21135 for(var i = 0, len = el.length; i < len; i++) {
21136 this.unregister(el[i]);
21145 * The number of pixels from the edge of a container the pointer needs to be to
21146 * trigger scrolling (defaults to 25)
21152 * The number of pixels to scroll in each scroll increment (defaults to 50)
21158 * The frequency of scrolls in milliseconds (defaults to 500)
21164 * True to animate the scroll (defaults to true)
21170 * The animation duration in seconds -
21171 * MUST BE less than Roo.dd.ScrollManager.frequency! (defaults to .4)
21177 * Manually trigger a cache refresh.
21179 refreshCache : function(){
21180 for(var id in els){
21181 if(typeof els[id] == 'object'){ // for people extending the object prototype
21182 els[id]._region = els[id].getRegion();
21189 * Ext JS Library 1.1.1
21190 * Copyright(c) 2006-2007, Ext JS, LLC.
21192 * Originally Released Under LGPL - original licence link has changed is not relivant.
21195 * <script type="text/javascript">
21200 * @class Roo.dd.Registry
21201 * Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either
21202 * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
21205 Roo.dd.Registry = function(){
21208 var autoIdSeed = 0;
21210 var getId = function(el, autogen){
21211 if(typeof el == "string"){
21215 if(!id && autogen !== false){
21216 id = "roodd-" + (++autoIdSeed);
21224 * Register a drag drop element
21225 * @param {String|HTMLElement} element The id or DOM node to register
21226 * @param {Object} data (optional) A custom data object that will be passed between the elements that are involved
21227 * in drag drop operations. You can populate this object with any arbitrary properties that your own code
21228 * knows how to interpret, plus there are some specific properties known to the Registry that should be
21229 * populated in the data object (if applicable):
21231 Value Description<br />
21232 --------- ------------------------------------------<br />
21233 handles Array of DOM nodes that trigger dragging<br />
21234 for the element being registered<br />
21235 isHandle True if the element passed in triggers<br />
21236 dragging itself, else false
21239 register : function(el, data){
21241 if(typeof el == "string"){
21242 el = document.getElementById(el);
21245 elements[getId(el)] = data;
21246 if(data.isHandle !== false){
21247 handles[data.ddel.id] = data;
21250 var hs = data.handles;
21251 for(var i = 0, len = hs.length; i < len; i++){
21252 handles[getId(hs[i])] = data;
21258 * Unregister a drag drop element
21259 * @param {String|HTMLElement} element The id or DOM node to unregister
21261 unregister : function(el){
21262 var id = getId(el, false);
21263 var data = elements[id];
21265 delete elements[id];
21267 var hs = data.handles;
21268 for(var i = 0, len = hs.length; i < len; i++){
21269 delete handles[getId(hs[i], false)];
21276 * Returns the handle registered for a DOM Node by id
21277 * @param {String|HTMLElement} id The DOM node or id to look up
21278 * @return {Object} handle The custom handle data
21280 getHandle : function(id){
21281 if(typeof id != "string"){ // must be element?
21284 return handles[id];
21288 * Returns the handle that is registered for the DOM node that is the target of the event
21289 * @param {Event} e The event
21290 * @return {Object} handle The custom handle data
21292 getHandleFromEvent : function(e){
21293 var t = Roo.lib.Event.getTarget(e);
21294 return t ? handles[t.id] : null;
21298 * Returns a custom data object that is registered for a DOM node by id
21299 * @param {String|HTMLElement} id The DOM node or id to look up
21300 * @return {Object} data The custom data
21302 getTarget : function(id){
21303 if(typeof id != "string"){ // must be element?
21306 return elements[id];
21310 * Returns a custom data object that is registered for the DOM node that is the target of the event
21311 * @param {Event} e The event
21312 * @return {Object} data The custom data
21314 getTargetFromEvent : function(e){
21315 var t = Roo.lib.Event.getTarget(e);
21316 return t ? elements[t.id] || handles[t.id] : null;
21321 * Ext JS Library 1.1.1
21322 * Copyright(c) 2006-2007, Ext JS, LLC.
21324 * Originally Released Under LGPL - original licence link has changed is not relivant.
21327 * <script type="text/javascript">
21332 * @class Roo.dd.StatusProxy
21333 * A specialized drag proxy that supports a drop status icon, {@link Roo.Layer} styles and auto-repair. This is the
21334 * default drag proxy used by all Roo.dd components.
21336 * @param {Object} config
21338 Roo.dd.StatusProxy = function(config){
21339 Roo.apply(this, config);
21340 this.id = this.id || Roo.id();
21341 this.el = new Roo.Layer({
21343 id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
21344 {tag: "div", cls: "x-dd-drop-icon"},
21345 {tag: "div", cls: "x-dd-drag-ghost"}
21348 shadow: !config || config.shadow !== false
21350 this.ghost = Roo.get(this.el.dom.childNodes[1]);
21351 this.dropStatus = this.dropNotAllowed;
21354 Roo.dd.StatusProxy.prototype = {
21356 * @cfg {String} dropAllowed
21357 * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
21359 dropAllowed : "x-dd-drop-ok",
21361 * @cfg {String} dropNotAllowed
21362 * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
21364 dropNotAllowed : "x-dd-drop-nodrop",
21367 * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
21368 * over the current target element.
21369 * @param {String} cssClass The css class for the new drop status indicator image
21371 setStatus : function(cssClass){
21372 cssClass = cssClass || this.dropNotAllowed;
21373 if(this.dropStatus != cssClass){
21374 this.el.replaceClass(this.dropStatus, cssClass);
21375 this.dropStatus = cssClass;
21380 * Resets the status indicator to the default dropNotAllowed value
21381 * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
21383 reset : function(clearGhost){
21384 this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
21385 this.dropStatus = this.dropNotAllowed;
21387 this.ghost.update("");
21392 * Updates the contents of the ghost element
21393 * @param {String} html The html that will replace the current innerHTML of the ghost element
21395 update : function(html){
21396 if(typeof html == "string"){
21397 this.ghost.update(html);
21399 this.ghost.update("");
21400 html.style.margin = "0";
21401 this.ghost.dom.appendChild(html);
21403 // ensure float = none set?? cant remember why though.
21404 var el = this.ghost.dom.firstChild;
21406 Roo.fly(el).setStyle('float', 'none');
21411 * Returns the underlying proxy {@link Roo.Layer}
21412 * @return {Roo.Layer} el
21414 getEl : function(){
21419 * Returns the ghost element
21420 * @return {Roo.Element} el
21422 getGhost : function(){
21428 * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
21430 hide : function(clear){
21438 * Stops the repair animation if it's currently running
21441 if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
21447 * Displays this proxy
21454 * Force the Layer to sync its shadow and shim positions to the element
21461 * Causes the proxy to return to its position of origin via an animation. Should be called after an
21462 * invalid drop operation by the item being dragged.
21463 * @param {Array} xy The XY position of the element ([x, y])
21464 * @param {Function} callback The function to call after the repair is complete
21465 * @param {Object} scope The scope in which to execute the callback
21467 repair : function(xy, callback, scope){
21468 this.callback = callback;
21469 this.scope = scope;
21470 if(xy && this.animRepair !== false){
21471 this.el.addClass("x-dd-drag-repair");
21472 this.el.hideUnders(true);
21473 this.anim = this.el.shift({
21474 duration: this.repairDuration || .5,
21478 callback: this.afterRepair,
21482 this.afterRepair();
21487 afterRepair : function(){
21489 if(typeof this.callback == "function"){
21490 this.callback.call(this.scope || this);
21492 this.callback = null;
21497 * Ext JS Library 1.1.1
21498 * Copyright(c) 2006-2007, Ext JS, LLC.
21500 * Originally Released Under LGPL - original licence link has changed is not relivant.
21503 * <script type="text/javascript">
21507 * @class Roo.dd.DragSource
21508 * @extends Roo.dd.DDProxy
21509 * A simple class that provides the basic implementation needed to make any element draggable.
21511 * @param {String/HTMLElement/Element} el The container element
21512 * @param {Object} config
21514 Roo.dd.DragSource = function(el, config){
21515 this.el = Roo.get(el);
21516 this.dragData = {};
21518 Roo.apply(this, config);
21521 this.proxy = new Roo.dd.StatusProxy();
21524 Roo.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
21525 {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
21527 this.dragging = false;
21530 Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, {
21532 * @cfg {String} dropAllowed
21533 * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
21535 dropAllowed : "x-dd-drop-ok",
21537 * @cfg {String} dropNotAllowed
21538 * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
21540 dropNotAllowed : "x-dd-drop-nodrop",
21543 * Returns the data object associated with this drag source
21544 * @return {Object} data An object containing arbitrary data
21546 getDragData : function(e){
21547 return this.dragData;
21551 onDragEnter : function(e, id){
21552 var target = Roo.dd.DragDropMgr.getDDById(id);
21553 this.cachedTarget = target;
21554 if(this.beforeDragEnter(target, e, id) !== false){
21555 if(target.isNotifyTarget){
21556 var status = target.notifyEnter(this, e, this.dragData);
21557 this.proxy.setStatus(status);
21559 this.proxy.setStatus(this.dropAllowed);
21562 if(this.afterDragEnter){
21564 * An empty function by default, but provided so that you can perform a custom action
21565 * when the dragged item enters the drop target by providing an implementation.
21566 * @param {Roo.dd.DragDrop} target The drop target
21567 * @param {Event} e The event object
21568 * @param {String} id The id of the dragged element
21569 * @method afterDragEnter
21571 this.afterDragEnter(target, e, id);
21577 * An empty function by default, but provided so that you can perform a custom action
21578 * before the dragged item enters the drop target and optionally cancel the onDragEnter.
21579 * @param {Roo.dd.DragDrop} target The drop target
21580 * @param {Event} e The event object
21581 * @param {String} id The id of the dragged element
21582 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
21584 beforeDragEnter : function(target, e, id){
21589 alignElWithMouse: function() {
21590 Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
21595 onDragOver : function(e, id){
21596 var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
21597 if(this.beforeDragOver(target, e, id) !== false){
21598 if(target.isNotifyTarget){
21599 var status = target.notifyOver(this, e, this.dragData);
21600 this.proxy.setStatus(status);
21603 if(this.afterDragOver){
21605 * An empty function by default, but provided so that you can perform a custom action
21606 * while the dragged item is over the drop target by providing an implementation.
21607 * @param {Roo.dd.DragDrop} target The drop target
21608 * @param {Event} e The event object
21609 * @param {String} id The id of the dragged element
21610 * @method afterDragOver
21612 this.afterDragOver(target, e, id);
21618 * An empty function by default, but provided so that you can perform a custom action
21619 * while the dragged item is over the drop target and optionally cancel the onDragOver.
21620 * @param {Roo.dd.DragDrop} target The drop target
21621 * @param {Event} e The event object
21622 * @param {String} id The id of the dragged element
21623 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
21625 beforeDragOver : function(target, e, id){
21630 onDragOut : function(e, id){
21631 var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
21632 if(this.beforeDragOut(target, e, id) !== false){
21633 if(target.isNotifyTarget){
21634 target.notifyOut(this, e, this.dragData);
21636 this.proxy.reset();
21637 if(this.afterDragOut){
21639 * An empty function by default, but provided so that you can perform a custom action
21640 * after the dragged item is dragged out of the target without dropping.
21641 * @param {Roo.dd.DragDrop} target The drop target
21642 * @param {Event} e The event object
21643 * @param {String} id The id of the dragged element
21644 * @method afterDragOut
21646 this.afterDragOut(target, e, id);
21649 this.cachedTarget = null;
21653 * An empty function by default, but provided so that you can perform a custom action before the dragged
21654 * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
21655 * @param {Roo.dd.DragDrop} target The drop target
21656 * @param {Event} e The event object
21657 * @param {String} id The id of the dragged element
21658 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
21660 beforeDragOut : function(target, e, id){
21665 onDragDrop : function(e, id){
21666 var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
21667 if(this.beforeDragDrop(target, e, id) !== false){
21668 if(target.isNotifyTarget){
21669 if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
21670 this.onValidDrop(target, e, id);
21672 this.onInvalidDrop(target, e, id);
21675 this.onValidDrop(target, e, id);
21678 if(this.afterDragDrop){
21680 * An empty function by default, but provided so that you can perform a custom action
21681 * after a valid drag drop has occurred by providing an implementation.
21682 * @param {Roo.dd.DragDrop} target The drop target
21683 * @param {Event} e The event object
21684 * @param {String} id The id of the dropped element
21685 * @method afterDragDrop
21687 this.afterDragDrop(target, e, id);
21690 delete this.cachedTarget;
21694 * An empty function by default, but provided so that you can perform a custom action before the dragged
21695 * item is dropped onto the target and optionally cancel the onDragDrop.
21696 * @param {Roo.dd.DragDrop} target The drop target
21697 * @param {Event} e The event object
21698 * @param {String} id The id of the dragged element
21699 * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
21701 beforeDragDrop : function(target, e, id){
21706 onValidDrop : function(target, e, id){
21708 if(this.afterValidDrop){
21710 * An empty function by default, but provided so that you can perform a custom action
21711 * after a valid drop has occurred by providing an implementation.
21712 * @param {Object} target The target DD
21713 * @param {Event} e The event object
21714 * @param {String} id The id of the dropped element
21715 * @method afterInvalidDrop
21717 this.afterValidDrop(target, e, id);
21722 getRepairXY : function(e, data){
21723 return this.el.getXY();
21727 onInvalidDrop : function(target, e, id){
21728 this.beforeInvalidDrop(target, e, id);
21729 if(this.cachedTarget){
21730 if(this.cachedTarget.isNotifyTarget){
21731 this.cachedTarget.notifyOut(this, e, this.dragData);
21733 this.cacheTarget = null;
21735 this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
21737 if(this.afterInvalidDrop){
21739 * An empty function by default, but provided so that you can perform a custom action
21740 * after an invalid drop has occurred by providing an implementation.
21741 * @param {Event} e The event object
21742 * @param {String} id The id of the dropped element
21743 * @method afterInvalidDrop
21745 this.afterInvalidDrop(e, id);
21750 afterRepair : function(){
21752 this.el.highlight(this.hlColor || "c3daf9");
21754 this.dragging = false;
21758 * An empty function by default, but provided so that you can perform a custom action after an invalid
21759 * drop has occurred.
21760 * @param {Roo.dd.DragDrop} target The drop target
21761 * @param {Event} e The event object
21762 * @param {String} id The id of the dragged element
21763 * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
21765 beforeInvalidDrop : function(target, e, id){
21770 handleMouseDown : function(e){
21771 if(this.dragging) {
21774 var data = this.getDragData(e);
21775 if(data && this.onBeforeDrag(data, e) !== false){
21776 this.dragData = data;
21778 Roo.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
21783 * An empty function by default, but provided so that you can perform a custom action before the initial
21784 * drag event begins and optionally cancel it.
21785 * @param {Object} data An object containing arbitrary data to be shared with drop targets
21786 * @param {Event} e The event object
21787 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
21789 onBeforeDrag : function(data, e){
21794 * An empty function by default, but provided so that you can perform a custom action once the initial
21795 * drag event has begun. The drag cannot be canceled from this function.
21796 * @param {Number} x The x position of the click on the dragged object
21797 * @param {Number} y The y position of the click on the dragged object
21799 onStartDrag : Roo.emptyFn,
21801 // private - YUI override
21802 startDrag : function(x, y){
21803 this.proxy.reset();
21804 this.dragging = true;
21805 this.proxy.update("");
21806 this.onInitDrag(x, y);
21811 onInitDrag : function(x, y){
21812 var clone = this.el.dom.cloneNode(true);
21813 clone.id = Roo.id(); // prevent duplicate ids
21814 this.proxy.update(clone);
21815 this.onStartDrag(x, y);
21820 * Returns the drag source's underlying {@link Roo.dd.StatusProxy}
21821 * @return {Roo.dd.StatusProxy} proxy The StatusProxy
21823 getProxy : function(){
21828 * Hides the drag source's {@link Roo.dd.StatusProxy}
21830 hideProxy : function(){
21832 this.proxy.reset(true);
21833 this.dragging = false;
21837 triggerCacheRefresh : function(){
21838 Roo.dd.DDM.refreshCache(this.groups);
21841 // private - override to prevent hiding
21842 b4EndDrag: function(e) {
21845 // private - override to prevent moving
21846 endDrag : function(e){
21847 this.onEndDrag(this.dragData, e);
21851 onEndDrag : function(data, e){
21854 // private - pin to cursor
21855 autoOffset : function(x, y) {
21856 this.setDelta(-12, -20);
21860 * Ext JS Library 1.1.1
21861 * Copyright(c) 2006-2007, Ext JS, LLC.
21863 * Originally Released Under LGPL - original licence link has changed is not relivant.
21866 * <script type="text/javascript">
21871 * @class Roo.dd.DropTarget
21872 * @extends Roo.dd.DDTarget
21873 * A simple class that provides the basic implementation needed to make any element a drop target that can have
21874 * draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
21876 * @param {String/HTMLElement/Element} el The container element
21877 * @param {Object} config
21879 Roo.dd.DropTarget = function(el, config){
21880 this.el = Roo.get(el);
21882 var listeners = false; ;
21883 if (config && config.listeners) {
21884 listeners= config.listeners;
21885 delete config.listeners;
21887 Roo.apply(this, config);
21889 if(this.containerScroll){
21890 Roo.dd.ScrollManager.register(this.el);
21894 * @scope Roo.dd.DropTarget
21899 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
21900 * target. This default implementation adds the CSS class specified by overClass (if any) to the drop element
21901 * and returns the dropAllowed config value. This method should be overridden if drop validation is required.
21903 * IMPORTANT : it should set this.overClass and this.dropAllowed
21905 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
21906 * @param {Event} e The event
21907 * @param {Object} data An object containing arbitrary data supplied by the drag source
21913 * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
21914 * This method will be called on every mouse movement while the drag source is over the drop target.
21915 * This default implementation simply returns the dropAllowed config value.
21917 * IMPORTANT : it should set this.dropAllowed
21919 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
21920 * @param {Event} e The event
21921 * @param {Object} data An object containing arbitrary data supplied by the drag source
21927 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
21928 * out of the target without dropping. This default implementation simply removes the CSS class specified by
21929 * overClass (if any) from the drop element.
21931 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
21932 * @param {Event} e The event
21933 * @param {Object} data An object containing arbitrary data supplied by the drag source
21939 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
21940 * been dropped on it. This method has no default implementation and returns false, so you must provide an
21941 * implementation that does something to process the drop event and returns true so that the drag source's
21942 * repair action does not run.
21944 * IMPORTANT : it should set this.success
21946 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
21947 * @param {Event} e The event
21948 * @param {Object} data An object containing arbitrary data supplied by the drag source
21954 Roo.dd.DropTarget.superclass.constructor.call( this,
21956 this.ddGroup || this.group,
21959 listeners : listeners || {}
21967 Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
21969 * @cfg {String} overClass
21970 * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
21973 * @cfg {String} ddGroup
21974 * The drag drop group to handle drop events for
21978 * @cfg {String} dropAllowed
21979 * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
21981 dropAllowed : "x-dd-drop-ok",
21983 * @cfg {String} dropNotAllowed
21984 * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
21986 dropNotAllowed : "x-dd-drop-nodrop",
21988 * @cfg {boolean} success
21989 * set this after drop listener..
21993 * @cfg {boolean|String} valid true/false or string (ok-add/ok-sub/ok/nodrop)
21994 * if the drop point is valid for over/enter..
22001 isNotifyTarget : true,
22006 notifyEnter : function(dd, e, data)
22009 this.fireEvent('enter', dd, e, data);
22010 if(this.overClass){
22011 this.el.addClass(this.overClass);
22013 return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
22014 this.valid ? this.dropAllowed : this.dropNotAllowed
22021 notifyOver : function(dd, e, data)
22024 this.fireEvent('over', dd, e, data);
22025 return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
22026 this.valid ? this.dropAllowed : this.dropNotAllowed
22033 notifyOut : function(dd, e, data)
22035 this.fireEvent('out', dd, e, data);
22036 if(this.overClass){
22037 this.el.removeClass(this.overClass);
22044 notifyDrop : function(dd, e, data)
22046 this.success = false;
22047 this.fireEvent('drop', dd, e, data);
22048 return this.success;
22052 * Ext JS Library 1.1.1
22053 * Copyright(c) 2006-2007, Ext JS, LLC.
22055 * Originally Released Under LGPL - original licence link has changed is not relivant.
22058 * <script type="text/javascript">
22063 * @class Roo.dd.DragZone
22064 * @extends Roo.dd.DragSource
22065 * This class provides a container DD instance that proxies for multiple child node sources.<br />
22066 * By default, this class requires that draggable child nodes are registered with {@link Roo.dd.Registry}.
22068 * @param {String/HTMLElement/Element} el The container element
22069 * @param {Object} config
22071 Roo.dd.DragZone = function(el, config){
22072 Roo.dd.DragZone.superclass.constructor.call(this, el, config);
22073 if(this.containerScroll){
22074 Roo.dd.ScrollManager.register(this.el);
22078 Roo.extend(Roo.dd.DragZone, Roo.dd.DragSource, {
22080 * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
22081 * for auto scrolling during drag operations.
22084 * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
22085 * method after a failed drop (defaults to "c3daf9" - light blue)
22089 * Called when a mousedown occurs in this container. Looks in {@link Roo.dd.Registry}
22090 * for a valid target to drag based on the mouse down. Override this method
22091 * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
22092 * object has a "ddel" attribute (with an HTML Element) for other functions to work.
22093 * @param {EventObject} e The mouse down event
22094 * @return {Object} The dragData
22096 getDragData : function(e){
22097 return Roo.dd.Registry.getHandleFromEvent(e);
22101 * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
22102 * this.dragData.ddel
22103 * @param {Number} x The x position of the click on the dragged object
22104 * @param {Number} y The y position of the click on the dragged object
22105 * @return {Boolean} true to continue the drag, false to cancel
22107 onInitDrag : function(x, y){
22108 this.proxy.update(this.dragData.ddel.cloneNode(true));
22109 this.onStartDrag(x, y);
22114 * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel
22116 afterRepair : function(){
22118 Roo.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
22120 this.dragging = false;
22124 * Called before a repair of an invalid drop to get the XY to animate to. By default returns
22125 * the XY of this.dragData.ddel
22126 * @param {EventObject} e The mouse up event
22127 * @return {Array} The xy location (e.g. [100, 200])
22129 getRepairXY : function(e){
22130 return Roo.Element.fly(this.dragData.ddel).getXY();
22134 * Ext JS Library 1.1.1
22135 * Copyright(c) 2006-2007, Ext JS, LLC.
22137 * Originally Released Under LGPL - original licence link has changed is not relivant.
22140 * <script type="text/javascript">
22143 * @class Roo.dd.DropZone
22144 * @extends Roo.dd.DropTarget
22145 * This class provides a container DD instance that proxies for multiple child node targets.<br />
22146 * By default, this class requires that child nodes accepting drop are registered with {@link Roo.dd.Registry}.
22148 * @param {String/HTMLElement/Element} el The container element
22149 * @param {Object} config
22151 Roo.dd.DropZone = function(el, config){
22152 Roo.dd.DropZone.superclass.constructor.call(this, el, config);
22155 Roo.extend(Roo.dd.DropZone, Roo.dd.DropTarget, {
22157 * Returns a custom data object associated with the DOM node that is the target of the event. By default
22158 * this looks up the event target in the {@link Roo.dd.Registry}, although you can override this method to
22159 * provide your own custom lookup.
22160 * @param {Event} e The event
22161 * @return {Object} data The custom data
22163 getTargetFromEvent : function(e){
22164 return Roo.dd.Registry.getTargetFromEvent(e);
22168 * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has entered a drop node
22169 * that it has registered. This method has no default implementation and should be overridden to provide
22170 * node-specific processing if necessary.
22171 * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
22172 * {@link #getTargetFromEvent} for this node)
22173 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
22174 * @param {Event} e The event
22175 * @param {Object} data An object containing arbitrary data supplied by the drag source
22177 onNodeEnter : function(n, dd, e, data){
22182 * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is over a drop node
22183 * that it has registered. The default implementation returns this.dropNotAllowed, so it should be
22184 * overridden to provide the proper feedback.
22185 * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
22186 * {@link #getTargetFromEvent} for this node)
22187 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
22188 * @param {Event} e The event
22189 * @param {Object} data An object containing arbitrary data supplied by the drag source
22190 * @return {String} status The CSS class that communicates the drop status back to the source so that the
22191 * underlying {@link Roo.dd.StatusProxy} can be updated
22193 onNodeOver : function(n, dd, e, data){
22194 return this.dropAllowed;
22198 * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dragged out of
22199 * the drop node without dropping. This method has no default implementation and should be overridden to provide
22200 * node-specific processing if necessary.
22201 * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
22202 * {@link #getTargetFromEvent} for this node)
22203 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
22204 * @param {Event} e The event
22205 * @param {Object} data An object containing arbitrary data supplied by the drag source
22207 onNodeOut : function(n, dd, e, data){
22212 * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped onto
22213 * the drop node. The default implementation returns false, so it should be overridden to provide the
22214 * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
22215 * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
22216 * {@link #getTargetFromEvent} for this node)
22217 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
22218 * @param {Event} e The event
22219 * @param {Object} data An object containing arbitrary data supplied by the drag source
22220 * @return {Boolean} True if the drop was valid, else false
22222 onNodeDrop : function(n, dd, e, data){
22227 * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is being dragged over it,
22228 * but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
22229 * it should be overridden to provide the proper feedback if necessary.
22230 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
22231 * @param {Event} e The event
22232 * @param {Object} data An object containing arbitrary data supplied by the drag source
22233 * @return {String} status The CSS class that communicates the drop status back to the source so that the
22234 * underlying {@link Roo.dd.StatusProxy} can be updated
22236 onContainerOver : function(dd, e, data){
22237 return this.dropNotAllowed;
22241 * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped on it,
22242 * but not on any of its registered drop nodes. The default implementation returns false, so it should be
22243 * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
22244 * be able to accept drops. It should return true when valid so that the drag source's repair action does not run.
22245 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
22246 * @param {Event} e The event
22247 * @param {Object} data An object containing arbitrary data supplied by the drag source
22248 * @return {Boolean} True if the drop was valid, else false
22250 onContainerDrop : function(dd, e, data){
22255 * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source is now over
22256 * the zone. The default implementation returns this.dropNotAllowed and expects that only registered drop
22257 * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
22258 * you should override this method and provide a custom implementation.
22259 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
22260 * @param {Event} e The event
22261 * @param {Object} data An object containing arbitrary data supplied by the drag source
22262 * @return {String} status The CSS class that communicates the drop status back to the source so that the
22263 * underlying {@link Roo.dd.StatusProxy} can be updated
22265 notifyEnter : function(dd, e, data){
22266 return this.dropNotAllowed;
22270 * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the drop zone.
22271 * This method will be called on every mouse movement while the drag source is over the drop zone.
22272 * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
22273 * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
22274 * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
22275 * registered node, it will call {@link #onContainerOver}.
22276 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
22277 * @param {Event} e The event
22278 * @param {Object} data An object containing arbitrary data supplied by the drag source
22279 * @return {String} status The CSS class that communicates the drop status back to the source so that the
22280 * underlying {@link Roo.dd.StatusProxy} can be updated
22282 notifyOver : function(dd, e, data){
22283 var n = this.getTargetFromEvent(e);
22284 if(!n){ // not over valid drop target
22285 if(this.lastOverNode){
22286 this.onNodeOut(this.lastOverNode, dd, e, data);
22287 this.lastOverNode = null;
22289 return this.onContainerOver(dd, e, data);
22291 if(this.lastOverNode != n){
22292 if(this.lastOverNode){
22293 this.onNodeOut(this.lastOverNode, dd, e, data);
22295 this.onNodeEnter(n, dd, e, data);
22296 this.lastOverNode = n;
22298 return this.onNodeOver(n, dd, e, data);
22302 * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source has been dragged
22303 * out of the zone without dropping. If the drag source is currently over a registered node, the notification
22304 * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
22305 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
22306 * @param {Event} e The event
22307 * @param {Object} data An object containing arbitrary data supplied by the drag zone
22309 notifyOut : function(dd, e, data){
22310 if(this.lastOverNode){
22311 this.onNodeOut(this.lastOverNode, dd, e, data);
22312 this.lastOverNode = null;
22317 * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the dragged item has
22318 * been dropped on it. The drag zone will look up the target node based on the event passed in, and if there
22319 * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
22320 * otherwise it will call {@link #onContainerDrop}.
22321 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
22322 * @param {Event} e The event
22323 * @param {Object} data An object containing arbitrary data supplied by the drag source
22324 * @return {Boolean} True if the drop was valid, else false
22326 notifyDrop : function(dd, e, data){
22327 if(this.lastOverNode){
22328 this.onNodeOut(this.lastOverNode, dd, e, data);
22329 this.lastOverNode = null;
22331 var n = this.getTargetFromEvent(e);
22333 this.onNodeDrop(n, dd, e, data) :
22334 this.onContainerDrop(dd, e, data);
22338 triggerCacheRefresh : function(){
22339 Roo.dd.DDM.refreshCache(this.groups);