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 isEdge = ua.indexOf("edge") > -1,
61 isGecko = !isSafari && ua.indexOf("gecko") > -1,
62 isBorderBox = isIE && !isStrict,
63 isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
64 isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
65 isLinux = (ua.indexOf("linux") != -1),
66 isSecure = window.location.href.toLowerCase().indexOf("https") === 0,
67 isIOS = /iphone|ipad/.test(ua),
68 isAndroid = /android/.test(ua),
69 isTouch = (function() {
71 if (ua.indexOf('chrome') != -1 && ua.indexOf('android') == -1) {
72 window.addEventListener('touchstart', function __set_has_touch__ () {
74 window.removeEventListener('touchstart', __set_has_touch__);
76 return false; // no touch on chrome!?
78 document.createEvent("TouchEvent");
85 // remove css image flicker
88 document.execCommand("BackgroundImageCache", false, true);
94 * True if the browser is in strict mode
99 * True if the page is running over SSL
104 * True when the document is fully initialized and ready for action
109 * Turn on debugging output (currently only the factory uses this)
116 * True to automatically uncache orphaned Roo.Elements periodically (defaults to true)
119 enableGarbageCollector : true,
122 * True to automatically purge event listeners after uncaching an element (defaults to false).
123 * Note: this only happens if enableGarbageCollector is true.
126 enableListenerCollection:false,
129 * URL to a blank file used by Roo when in secure mode for iframe src and onReady src to prevent
130 * the IE insecure content warning (defaults to javascript:false).
133 SSL_SECURE_URL : "javascript:false",
136 * URL to a 1x1 transparent gif image used by Roo to create inline icons with CSS background images. (Defaults to
137 * "http://Roojs.com/s.gif" and you should change this to a URL on your server).
140 BLANK_IMAGE_URL : "http:/"+"/localhost/s.gif",
142 emptyFn : function(){},
145 * Copies all the properties of config to obj if they don't already exist.
146 * @param {Object} obj The receiver of the properties
147 * @param {Object} config The source of the properties
148 * @return {Object} returns obj
150 applyIf : function(o, c){
153 if(typeof o[p] == "undefined"){ o[p] = c[p]; }
160 * Applies event listeners to elements by selectors when the document is ready.
161 * The event name is specified with an @ suffix.
164 // add a listener for click on all anchors in element with id foo
165 '#foo a@click' : function(e, t){
169 // add the same listener to multiple selectors (separated by comma BEFORE the @)
170 '#foo a, #bar span.some-class@mouseover' : function(){
175 * @param {Object} obj The list of behaviors to apply
177 addBehaviors : function(o){
179 Roo.onReady(function(){
184 var cache = {}; // simple cache for applying multiple behaviors to same selector does query multiple times
186 var parts = b.split('@');
187 if(parts[1]){ // for Object prototype breakers
190 cache[s] = Roo.select(s);
192 cache[s].on(parts[1], o[b]);
199 * Generates unique ids. If the element already has an id, it is unchanged
200 * @param {String/HTMLElement/Element} el (optional) The element to generate an id for
201 * @param {String} prefix (optional) Id prefix (defaults "Roo-gen")
202 * @return {String} The generated Id.
204 id : function(el, prefix){
205 prefix = prefix || "roo-gen";
207 var id = prefix + (++idSeed);
208 return el ? (el.id ? el.id : (el.id = id)) : id;
213 * Extends one class with another class and optionally overrides members with the passed literal. This class
214 * also adds the function "override()" to the class that can be used to override
215 * members on an instance.
216 * @param {Object} subclass The class inheriting the functionality
217 * @param {Object} superclass The class being extended
218 * @param {Object} overrides (optional) A literal with members
223 var io = function(o){
228 return function(sb, sp, overrides){
229 if(typeof sp == 'object'){ // eg. prototype, rather than function constructor..
232 sb = function(){sp.apply(this, arguments);};
234 var F = function(){}, sbp, spp = sp.prototype;
236 sbp = sb.prototype = new F();
240 if(spp.constructor == Object.prototype.constructor){
245 sb.override = function(o){
249 Roo.override(sb, overrides);
255 * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
257 Roo.override(MyClass, {
258 newMethod1: function(){
261 newMethod2: function(foo){
266 * @param {Object} origclass The class to override
267 * @param {Object} overrides The list of functions to add to origClass. This should be specified as an object literal
268 * containing one or more methods.
271 override : function(origclass, overrides){
273 var p = origclass.prototype;
274 for(var method in overrides){
275 p[method] = overrides[method];
280 * Creates namespaces to be used for scoping variables and classes so that they are not global. Usage:
282 Roo.namespace('Company', 'Company.data');
283 Company.Widget = function() { ... }
284 Company.data.CustomStore = function(config) { ... }
286 * @param {String} namespace1
287 * @param {String} namespace2
288 * @param {String} etc
291 namespace : function(){
292 var a=arguments, o=null, i, j, d, rt;
293 for (i=0; i<a.length; ++i) {
297 eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
298 for (j=1; j<d.length; ++j) {
299 o[d[j]]=o[d[j]] || {};
305 * Creates namespaces to be used for scoping variables and classes so that they are not global. Usage:
307 Roo.factory({ xns: Roo.data, xtype : 'Store', .....});
308 Roo.factory(conf, Roo.data);
310 * @param {String} classname
311 * @param {String} namespace (optional)
315 factory : function(c, ns)
317 // no xtype, no ns or c.xns - or forced off by c.xns
318 if (!c.xtype || (!ns && !c.xns) || (c.xns === false)) { // not enough info...
321 ns = c.xns ? c.xns : ns; // if c.xns is set, then use that..
322 if (c.constructor == ns[c.xtype]) {// already created...
326 if (Roo.debug) { Roo.log("Roo.Factory(" + c.xtype + ")"); }
327 var ret = new ns[c.xtype](c);
331 c.xns = false; // prevent recursion..
335 * Logs to console if it can.
337 * @param {String|Object} string
342 if ((typeof(console) == 'undefined') || (typeof(console.log) == 'undefined')) {
349 * 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.
353 urlEncode : function(o){
359 var ov = o[key], k = Roo.encodeURIComponent(key);
360 var type = typeof ov;
361 if(type == 'undefined'){
363 }else if(type != "function" && type != "object"){
364 buf.push(k, "=", Roo.encodeURIComponent(ov), "&");
365 }else if(ov instanceof Array){
367 for(var i = 0, len = ov.length; i < len; i++) {
368 buf.push(k, "=", Roo.encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
379 * Safe version of encodeURIComponent
380 * @param {String} data
384 encodeURIComponent : function (data)
387 return encodeURIComponent(data);
388 } catch(e) {} // should be an uri encode error.
390 if (data == '' || data == null){
393 // http://stackoverflow.com/questions/2596483/unicode-and-uri-encoding-decoding-and-escaping-in-javascript
394 function nibble_to_hex(nibble){
395 var chars = '0123456789ABCDEF';
396 return chars.charAt(nibble);
398 data = data.toString();
400 for(var i=0; i<data.length; i++){
401 var c = data.charCodeAt(i);
402 var bs = new Array();
405 bs[0] = 0xF0 | ((c & 0x1C0000) >>> 18);
406 bs[1] = 0x80 | ((c & 0x3F000) >>> 12);
407 bs[2] = 0x80 | ((c & 0xFC0) >>> 6);
408 bs[3] = 0x80 | (c & 0x3F);
409 }else if (c > 0x800){
411 bs[0] = 0xE0 | ((c & 0xF000) >>> 12);
412 bs[1] = 0x80 | ((c & 0xFC0) >>> 6);
413 bs[2] = 0x80 | (c & 0x3F);
416 bs[0] = 0xC0 | ((c & 0x7C0) >>> 6);
417 bs[1] = 0x80 | (c & 0x3F);
422 for(var j=0; j<bs.length; j++){
424 var hex = nibble_to_hex((b & 0xF0) >>> 4)
425 + nibble_to_hex(b &0x0F);
434 * 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]}.
435 * @param {String} string
436 * @param {Boolean} overwrite (optional) Items of the same name will overwrite previous values instead of creating an an array (Defaults to false).
437 * @return {Object} A literal with members
439 urlDecode : function(string, overwrite){
440 if(!string || !string.length){
444 var pairs = string.split('&');
445 var pair, name, value;
446 for(var i = 0, len = pairs.length; i < len; i++){
447 pair = pairs[i].split('=');
448 name = decodeURIComponent(pair[0]);
449 value = decodeURIComponent(pair[1]);
450 if(overwrite !== true){
451 if(typeof obj[name] == "undefined"){
453 }else if(typeof obj[name] == "string"){
454 obj[name] = [obj[name]];
455 obj[name].push(value);
457 obj[name].push(value);
467 * Iterates an array calling the passed function with each item, stopping if your function returns false. If the
468 * passed array is not really an array, your function is called once with it.
469 * The supplied function is called with (Object item, Number index, Array allItems).
470 * @param {Array/NodeList/Mixed} array
471 * @param {Function} fn
472 * @param {Object} scope
474 each : function(array, fn, scope){
475 if(typeof array.length == "undefined" || typeof array == "string"){
478 for(var i = 0, len = array.length; i < len; i++){
479 if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
484 combine : function(){
485 var as = arguments, l = as.length, r = [];
486 for(var i = 0; i < l; i++){
488 if(a instanceof Array){
490 }else if(a.length !== undefined && !a.substr){
491 r = r.concat(Array.prototype.slice.call(a, 0));
500 * Escapes the passed string for use in a regular expression
501 * @param {String} str
504 escapeRe : function(s) {
505 return s.replace(/([.*+?^${}()|[\]\/\\])/g, "\\$1");
509 callback : function(cb, scope, args, delay){
510 if(typeof cb == "function"){
512 cb.defer(delay, scope, args || []);
514 cb.apply(scope, args || []);
520 * Return the dom node for the passed string (id), dom node, or Roo.Element
521 * @param {String/HTMLElement/Roo.Element} el
522 * @return HTMLElement
524 getDom : function(el){
528 return el.dom ? el.dom : (typeof el == 'string' ? document.getElementById(el) : el);
532 * Shorthand for {@link Roo.ComponentMgr#get}
534 * @return Roo.Component
536 getCmp : function(id){
537 return Roo.ComponentMgr.get(id);
540 num : function(v, defaultValue){
541 if(typeof v != 'number'){
547 destroy : function(){
548 for(var i = 0, a = arguments, len = a.length; i < len; i++) {
552 as.removeAllListeners();
556 if(typeof as.purgeListeners == 'function'){
559 if(typeof as.destroy == 'function'){
566 // inpired by a similar function in mootools library
568 * Returns the type of object that is passed in. If the object passed in is null or undefined it
569 * return false otherwise it returns one of the following values:<ul>
570 * <li><b>string</b>: If the object passed is a string</li>
571 * <li><b>number</b>: If the object passed is a number</li>
572 * <li><b>boolean</b>: If the object passed is a boolean value</li>
573 * <li><b>function</b>: If the object passed is a function reference</li>
574 * <li><b>object</b>: If the object passed is an object</li>
575 * <li><b>array</b>: If the object passed is an array</li>
576 * <li><b>regexp</b>: If the object passed is a regular expression</li>
577 * <li><b>element</b>: If the object passed is a DOM Element</li>
578 * <li><b>nodelist</b>: If the object passed is a DOM NodeList</li>
579 * <li><b>textnode</b>: If the object passed is a DOM text node and contains something other than whitespace</li>
580 * <li><b>whitespace</b>: If the object passed is a DOM text node and contains only whitespace</li>
581 * @param {Mixed} object
585 if(o === undefined || o === null){
592 if(t == 'object' && o.nodeName) {
594 case 1: return 'element';
595 case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
598 if(t == 'object' || t == 'function') {
599 switch(o.constructor) {
600 case Array: return 'array';
601 case RegExp: return 'regexp';
603 if(typeof o.length == 'number' && typeof o.item == 'function') {
611 * Returns true if the passed value is null, undefined or an empty string (optional).
612 * @param {Mixed} value The value to test
613 * @param {Boolean} allowBlank (optional) Pass true if an empty string is not considered empty
616 isEmpty : function(v, allowBlank){
617 return v === null || v === undefined || (!allowBlank ? v === '' : false);
625 isFirefox : isFirefox,
637 isBorderBox : isBorderBox,
639 isWindows : isWindows,
647 isAndroid : isAndroid,
652 * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
653 * you may want to set this to true.
656 useShims : ((isIE && !isIE7) || (isGecko && isMac)),
661 * Selects a single element as a Roo Element
662 * This is about as close as you can get to jQuery's $('do crazy stuff')
663 * @param {String} selector The selector/xpath query
664 * @param {Node} root (optional) The start of the query (defaults to document).
665 * @return {Roo.Element}
667 selectNode : function(selector, root)
669 var node = Roo.DomQuery.selectNode(selector,root);
670 return node ? Roo.get(node) : new Roo.Element(false);
673 * Find the current bootstrap width Grid size
674 * Note xs is the default for smaller.. - this is currently used by grids to render correct columns
675 * @returns {String} (xs|sm|md|lg|xl)
678 getGridSize : function()
680 var w = Roo.lib.Dom.getViewWidth();
701 Roo.namespace("Roo", "Roo.util", "Roo.grid", "Roo.dd", "Roo.tree", "Roo.data",
702 "Roo.form", "Roo.menu", "Roo.state", "Roo.lib", "Roo.layout",
707 * Ext JS Library 1.1.1
708 * Copyright(c) 2006-2007, Ext JS, LLC.
710 * Originally Released Under LGPL - original licence link has changed is not relivant.
713 * <script type="text/javascript">
717 // wrappedn so fnCleanup is not in global scope...
719 function fnCleanUp() {
720 var p = Function.prototype;
721 delete p.createSequence;
723 delete p.createDelegate;
724 delete p.createCallback;
725 delete p.createInterceptor;
727 window.detachEvent("onunload", fnCleanUp);
729 window.attachEvent("onunload", fnCleanUp);
736 * These functions are available on every Function object (any JavaScript function).
738 Roo.apply(Function.prototype, {
740 * Creates a callback that passes arguments[0], arguments[1], arguments[2], ...
741 * Call directly on any function. Example: <code>myFunction.createCallback(myarg, myarg2)</code>
742 * Will create a function that is bound to those 2 args.
743 * @return {Function} The new function
745 createCallback : function(/*args...*/){
746 // make args available, in function below
747 var args = arguments;
750 return method.apply(window, args);
755 * Creates a delegate (callback) that sets the scope to obj.
756 * Call directly on any function. Example: <code>this.myFunction.createDelegate(this)</code>
757 * Will create a function that is automatically scoped to this.
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 {Function} The new function
764 createDelegate : function(obj, args, appendArgs){
767 var callArgs = args || arguments;
768 if(appendArgs === true){
769 callArgs = Array.prototype.slice.call(arguments, 0);
770 callArgs = callArgs.concat(args);
771 }else if(typeof appendArgs == "number"){
772 callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
773 var applyArgs = [appendArgs, 0].concat(args); // create method call params
774 Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
776 return method.apply(obj || window, callArgs);
781 * Calls this function after the number of millseconds specified.
782 * @param {Number} millis The number of milliseconds for the setTimeout call (if 0 the function is executed immediately)
783 * @param {Object} obj (optional) The object for which the scope is set
784 * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
785 * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
786 * if a number the args are inserted at the specified position
787 * @return {Number} The timeout id that can be used with clearTimeout
789 defer : function(millis, obj, args, appendArgs){
790 var fn = this.createDelegate(obj, args, appendArgs);
792 return setTimeout(fn, millis);
798 * Create a combined function call sequence of the original function + the passed function.
799 * The resulting function returns the results of the original function.
800 * The passed fcn is called with the parameters of the original function
801 * @param {Function} fcn The function to sequence
802 * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
803 * @return {Function} The new function
805 createSequence : function(fcn, scope){
806 if(typeof fcn != "function"){
811 var retval = method.apply(this || window, arguments);
812 fcn.apply(scope || this || window, arguments);
818 * Creates an interceptor function. The passed fcn is called before the original one. If it returns false, the original one is not called.
819 * The resulting function returns the results of the original function.
820 * The passed fcn is called with the parameters of the original function.
822 * @param {Function} fcn The function to call before the original
823 * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
824 * @return {Function} The new function
826 createInterceptor : function(fcn, scope){
827 if(typeof fcn != "function"){
834 if(fcn.apply(scope || this || window, arguments) === false){
837 return method.apply(this || window, arguments);
843 * Ext JS Library 1.1.1
844 * Copyright(c) 2006-2007, Ext JS, LLC.
846 * Originally Released Under LGPL - original licence link has changed is not relivant.
849 * <script type="text/javascript">
852 Roo.applyIf(String, {
857 * Escapes the passed string for ' and \
858 * @param {String} string The string to escape
859 * @return {String} The escaped string
862 escape : function(string) {
863 return string.replace(/('|\\)/g, "\\$1");
867 * Pads the left side of a string with a specified character. This is especially useful
868 * for normalizing number and date strings. Example usage:
870 var s = String.leftPad('123', 5, '0');
871 // s now contains the string: '00123'
873 * @param {String} string The original string
874 * @param {Number} size The total length of the output string
875 * @param {String} char (optional) The character with which to pad the original string (defaults to empty string " ")
876 * @return {String} The padded string
879 leftPad : function (val, size, ch) {
880 var result = new String(val);
881 if(ch === null || ch === undefined || ch === '') {
884 while (result.length < size) {
885 result = ch + result;
891 * Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens. Each
892 * token must be unique, and must increment in the format {0}, {1}, etc. Example usage:
894 var cls = 'my-class', text = 'Some text';
895 var s = String.format('<div class="{0}">{1}</div>', cls, text);
896 // s now contains the string: '<div class="my-class">Some text</div>'
898 * @param {String} string The tokenized string to be formatted
899 * @param {String} value1 The value to replace token {0}
900 * @param {String} value2 Etc...
901 * @return {String} The formatted string
904 format : function(format){
905 var args = Array.prototype.slice.call(arguments, 1);
906 return format.replace(/\{(\d+)\}/g, function(m, i){
907 return Roo.util.Format.htmlEncode(args[i]);
915 * Utility function that allows you to easily switch a string between two alternating values. The passed value
916 * is compared to the current string, and if they are equal, the other value that was passed in is returned. If
917 * they are already different, the first value passed in is returned. Note that this method returns the new value
918 * but does not change the current string.
920 // alternate sort directions
921 sort = sort.toggle('ASC', 'DESC');
923 // instead of conditional logic:
924 sort = (sort == 'ASC' ? 'DESC' : 'ASC');
926 * @param {String} value The value to compare to the current string
927 * @param {String} other The new value to use if the string already equals the first value passed in
928 * @return {String} The new value
931 String.prototype.toggle = function(value, other){
932 return this == value ? other : value;
937 * Remove invalid unicode characters from a string
939 * @return {String} The clean string
941 String.prototype.unicodeClean = function () {
942 return this.replace(/[\s\S]/g,
943 function(character) {
944 if (character.charCodeAt()< 256) {
948 encodeURIComponent(character);
959 * Ext JS Library 1.1.1
960 * Copyright(c) 2006-2007, Ext JS, LLC.
962 * Originally Released Under LGPL - original licence link has changed is not relivant.
965 * <script type="text/javascript">
971 Roo.applyIf(Number.prototype, {
973 * Checks whether or not the current number is within a desired range. If the number is already within the
974 * range it is returned, otherwise the min or max value is returned depending on which side of the range is
975 * exceeded. Note that this method returns the constrained value but does not change the current number.
976 * @param {Number} min The minimum number in the range
977 * @param {Number} max The maximum number in the range
978 * @return {Number} The constrained value if outside the range, otherwise the current value
980 constrain : function(min, max){
981 return Math.min(Math.max(this, min), max);
985 * Ext JS Library 1.1.1
986 * Copyright(c) 2006-2007, Ext JS, LLC.
988 * Originally Released Under LGPL - original licence link has changed is not relivant.
991 * <script type="text/javascript">
996 Roo.applyIf(Array.prototype, {
999 * Checks whether or not the specified object exists in the array.
1000 * @param {Object} o The object to check for
1001 * @return {Number} The index of o in the array (or -1 if it is not found)
1003 indexOf : function(o){
1004 for (var i = 0, len = this.length; i < len; i++){
1005 if(this[i] == o) { return i; }
1011 * Removes the specified object from the array. If the object is not found nothing happens.
1012 * @param {Object} o The object to remove
1014 remove : function(o){
1015 var index = this.indexOf(o);
1017 this.splice(index, 1);
1021 * Map (JS 1.6 compatibility)
1022 * @param {Function} function to call
1024 map : function(fun )
1026 var len = this.length >>> 0;
1027 if (typeof fun != "function") {
1028 throw new TypeError();
1030 var res = new Array(len);
1031 var thisp = arguments[1];
1032 for (var i = 0; i < len; i++)
1035 res[i] = fun.call(thisp, this[i], i, this);
1043 * @param {Array} o The array to compare to
1044 * @returns {Boolean} true if the same
1046 equals : function(b)
1048 // https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
1055 if (this.length !== b.length) {
1059 // sort?? a.sort().equals(b.sort());
1061 for (var i = 0; i < this.length; ++i) {
1062 if (this[i] !== b[i]) {
1074 Roo.applyIf(Array, {
1078 * @param {Array} o Or Array like object (eg. nodelist)
1085 for (var i =0; i < o.length; i++) {
1094 * Ext JS Library 1.1.1
1095 * Copyright(c) 2006-2007, Ext JS, LLC.
1097 * Originally Released Under LGPL - original licence link has changed is not relivant.
1100 * <script type="text/javascript">
1106 * The date parsing and format syntax is a subset of
1107 * <a href="http://www.php.net/date">PHP's date() function</a>, and the formats that are
1108 * supported will provide results equivalent to their PHP versions.
1110 * Following is the list of all currently supported formats:
1113 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
1115 Format Output Description
1116 ------ ---------- --------------------------------------------------------------
1117 d 10 Day of the month, 2 digits with leading zeros
1118 D Wed A textual representation of a day, three letters
1119 j 10 Day of the month without leading zeros
1120 l Wednesday A full textual representation of the day of the week
1121 S th English ordinal day of month suffix, 2 chars (use with j)
1122 w 3 Numeric representation of the day of the week
1123 z 9 The julian date, or day of the year (0-365)
1124 W 01 ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
1125 F January A full textual representation of the month
1126 m 01 Numeric representation of a month, with leading zeros
1127 M Jan Month name abbreviation, three letters
1128 n 1 Numeric representation of a month, without leading zeros
1129 t 31 Number of days in the given month
1130 L 0 Whether it's a leap year (1 if it is a leap year, else 0)
1131 Y 2007 A full numeric representation of a year, 4 digits
1132 y 07 A two digit representation of a year
1133 a pm Lowercase Ante meridiem and Post meridiem
1134 A PM Uppercase Ante meridiem and Post meridiem
1135 g 3 12-hour format of an hour without leading zeros
1136 G 15 24-hour format of an hour without leading zeros
1137 h 03 12-hour format of an hour with leading zeros
1138 H 15 24-hour format of an hour with leading zeros
1139 i 05 Minutes with leading zeros
1140 s 01 Seconds, with leading zeros
1141 O -0600 Difference to Greenwich time (GMT) in hours (Allows +08, without minutes)
1142 P -06:00 Difference to Greenwich time (GMT) with colon between hours and minutes
1143 T CST Timezone setting of the machine running the code
1144 Z -21600 Timezone offset in seconds (negative if west of UTC, positive if east)
1147 * Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
1149 var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
1150 document.write(dt.format('Y-m-d')); //2007-01-10
1151 document.write(dt.format('F j, Y, g:i a')); //January 10, 2007, 3:05 pm
1152 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
1155 * Here are some standard date/time patterns that you might find helpful. They
1156 * are not part of the source of Date.js, but to use them you can simply copy this
1157 * block of code into any script that is included after Date.js and they will also become
1158 * globally available on the Date object. Feel free to add or remove patterns as needed in your code.
1161 ISO8601Long:"Y-m-d H:i:s",
1162 ISO8601Short:"Y-m-d",
1164 LongDate: "l, F d, Y",
1165 FullDateTime: "l, F d, Y g:i:s A",
1168 LongTime: "g:i:s A",
1169 SortableDateTime: "Y-m-d\\TH:i:s",
1170 UniversalSortableDateTime: "Y-m-d H:i:sO",
1177 var dt = new Date();
1178 document.write(dt.format(Date.patterns.ShortDate));
1183 * Most of the date-formatting functions below are the excellent work of Baron Schwartz.
1184 * They generate precompiled functions from date formats instead of parsing and
1185 * processing the pattern every time you format a date. These functions are available
1186 * on every Date object (any javascript function).
1188 * The original article and download are here:
1189 * http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/
1196 Returns the number of milliseconds between this date and date
1197 @param {Date} date (optional) Defaults to now
1198 @return {Number} The diff in milliseconds
1199 @member Date getElapsed
1201 Date.prototype.getElapsed = function(date) {
1202 return Math.abs((date || new Date()).getTime()-this.getTime());
1204 // was in date file..
1208 Date.parseFunctions = {count:0};
1210 Date.parseRegexes = [];
1212 Date.formatFunctions = {count:0};
1215 Date.prototype.dateFormat = function(format) {
1216 if (Date.formatFunctions[format] == null) {
1217 Date.createNewFormat(format);
1219 var func = Date.formatFunctions[format];
1220 return this[func]();
1225 * Formats a date given the supplied format string
1226 * @param {String} format The format string
1227 * @return {String} The formatted date
1230 Date.prototype.format = Date.prototype.dateFormat;
1233 Date.createNewFormat = function(format) {
1234 var funcName = "format" + Date.formatFunctions.count++;
1235 Date.formatFunctions[format] = funcName;
1236 var code = "Date.prototype." + funcName + " = function(){return ";
1237 var special = false;
1239 for (var i = 0; i < format.length; ++i) {
1240 ch = format.charAt(i);
1241 if (!special && ch == "\\") {
1246 code += "'" + String.escape(ch) + "' + ";
1249 code += Date.getFormatCode(ch);
1252 /** eval:var:zzzzzzzzzzzzz */
1253 eval(code.substring(0, code.length - 3) + ";}");
1257 Date.getFormatCode = function(character) {
1258 switch (character) {
1260 return "String.leftPad(this.getDate(), 2, '0') + ";
1262 return "Date.dayNames[this.getDay()].substring(0, 3) + ";
1264 return "this.getDate() + ";
1266 return "Date.dayNames[this.getDay()] + ";
1268 return "this.getSuffix() + ";
1270 return "this.getDay() + ";
1272 return "this.getDayOfYear() + ";
1274 return "this.getWeekOfYear() + ";
1276 return "Date.monthNames[this.getMonth()] + ";
1278 return "String.leftPad(this.getMonth() + 1, 2, '0') + ";
1280 return "Date.monthNames[this.getMonth()].substring(0, 3) + ";
1282 return "(this.getMonth() + 1) + ";
1284 return "this.getDaysInMonth() + ";
1286 return "(this.isLeapYear() ? 1 : 0) + ";
1288 return "this.getFullYear() + ";
1290 return "('' + this.getFullYear()).substring(2, 4) + ";
1292 return "(this.getHours() < 12 ? 'am' : 'pm') + ";
1294 return "(this.getHours() < 12 ? 'AM' : 'PM') + ";
1296 return "((this.getHours() % 12) ? this.getHours() % 12 : 12) + ";
1298 return "this.getHours() + ";
1300 return "String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0') + ";
1302 return "String.leftPad(this.getHours(), 2, '0') + ";
1304 return "String.leftPad(this.getMinutes(), 2, '0') + ";
1306 return "String.leftPad(this.getSeconds(), 2, '0') + ";
1308 return "this.getGMTOffset() + ";
1310 return "this.getGMTColonOffset() + ";
1312 return "this.getTimezone() + ";
1314 return "(this.getTimezoneOffset() * -60) + ";
1316 return "'" + String.escape(character) + "' + ";
1321 * Parses the passed string using the specified format. Note that this function expects dates in normal calendar
1322 * format, meaning that months are 1-based (1 = January) and not zero-based like in JavaScript dates. Any part of
1323 * the date format that is not specified will default to the current date value for that part. Time parts can also
1324 * be specified, but default to 0. Keep in mind that the input date string must precisely match the specified format
1325 * string or the parse operation will fail.
1328 //dt = Fri May 25 2007 (current date)
1329 var dt = new Date();
1331 //dt = Thu May 25 2006 (today's month/day in 2006)
1332 dt = Date.parseDate("2006", "Y");
1334 //dt = Sun Jan 15 2006 (all date parts specified)
1335 dt = Date.parseDate("2006-1-15", "Y-m-d");
1337 //dt = Sun Jan 15 2006 15:20:01 GMT-0600 (CST)
1338 dt = Date.parseDate("2006-1-15 3:20:01 PM", "Y-m-d h:i:s A" );
1340 * @param {String} input The unparsed date as a string
1341 * @param {String} format The format the date is in
1342 * @return {Date} The parsed date
1345 Date.parseDate = function(input, format) {
1346 if (Date.parseFunctions[format] == null) {
1347 Date.createParser(format);
1349 var func = Date.parseFunctions[format];
1350 return Date[func](input);
1356 Date.createParser = function(format) {
1357 var funcName = "parse" + Date.parseFunctions.count++;
1358 var regexNum = Date.parseRegexes.length;
1359 var currentGroup = 1;
1360 Date.parseFunctions[format] = funcName;
1362 var code = "Date." + funcName + " = function(input){\n"
1363 + "var y = -1, m = -1, d = -1, h = -1, i = -1, s = -1, o, z, v;\n"
1364 + "var d = new Date();\n"
1365 + "y = d.getFullYear();\n"
1366 + "m = d.getMonth();\n"
1367 + "d = d.getDate();\n"
1368 + "if (typeof(input) !== 'string') { input = input.toString(); }\n"
1369 + "var results = input.match(Date.parseRegexes[" + regexNum + "]);\n"
1370 + "if (results && results.length > 0) {";
1373 var special = false;
1375 for (var i = 0; i < format.length; ++i) {
1376 ch = format.charAt(i);
1377 if (!special && ch == "\\") {
1382 regex += String.escape(ch);
1385 var obj = Date.formatCodeToRegex(ch, currentGroup);
1386 currentGroup += obj.g;
1388 if (obj.g && obj.c) {
1394 code += "if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0)\n"
1395 + "{v = new Date(y, m, d, h, i, s);}\n"
1396 + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0)\n"
1397 + "{v = new Date(y, m, d, h, i);}\n"
1398 + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0)\n"
1399 + "{v = new Date(y, m, d, h);}\n"
1400 + "else if (y >= 0 && m >= 0 && d > 0)\n"
1401 + "{v = new Date(y, m, d);}\n"
1402 + "else if (y >= 0 && m >= 0)\n"
1403 + "{v = new Date(y, m);}\n"
1404 + "else if (y >= 0)\n"
1405 + "{v = new Date(y);}\n"
1406 + "}return (v && (z || o))?\n" // favour UTC offset over GMT offset
1407 + " ((z)? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n" // reset to UTC, then add offset
1408 + " v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n" // reset to GMT, then add offset
1411 Date.parseRegexes[regexNum] = new RegExp("^" + regex + "$");
1412 /** eval:var:zzzzzzzzzzzzz */
1417 Date.formatCodeToRegex = function(character, currentGroup) {
1418 switch (character) {
1422 s:"(?:Sun|Mon|Tue|Wed|Thu|Fri|Sat)"};
1425 c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1426 s:"(\\d{1,2})"}; // day of month without leading zeroes
1429 c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1430 s:"(\\d{2})"}; // day of month with leading zeroes
1434 s:"(?:" + Date.dayNames.join("|") + ")"};
1438 s:"(?:st|nd|rd|th)"};
1453 c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "].substring(0, 3)], 10);\n",
1454 s:"(" + Date.monthNames.join("|") + ")"};
1457 c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "]], 10);\n",
1458 s:"(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)"};
1461 c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1462 s:"(\\d{1,2})"}; // Numeric representation of a month, without leading zeros
1465 c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1466 s:"(\\d{2})"}; // Numeric representation of a month, with leading zeros
1477 c:"y = parseInt(results[" + currentGroup + "], 10);\n",
1481 c:"var ty = parseInt(results[" + currentGroup + "], 10);\n"
1482 + "y = ty > Date.y2kYear ? 1900 + ty : 2000 + ty;\n",
1486 c:"if (results[" + currentGroup + "] == 'am') {\n"
1487 + "if (h == 12) { h = 0; }\n"
1488 + "} else { if (h < 12) { h += 12; }}",
1492 c:"if (results[" + currentGroup + "] == 'AM') {\n"
1493 + "if (h == 12) { h = 0; }\n"
1494 + "} else { if (h < 12) { h += 12; }}",
1499 c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1500 s:"(\\d{1,2})"}; // 12/24-hr format format of an hour without leading zeroes
1504 c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1505 s:"(\\d{2})"}; // 12/24-hr format format of an hour with leading zeroes
1508 c:"i = parseInt(results[" + currentGroup + "], 10);\n",
1512 c:"s = parseInt(results[" + currentGroup + "], 10);\n",
1517 "o = results[", currentGroup, "];\n",
1518 "var sn = o.substring(0,1);\n", // get + / - sign
1519 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60);\n", // get hours (performs minutes-to-hour conversion also)
1520 "var mn = o.substring(3,5) % 60;\n", // get minutes
1521 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n", // -12hrs <= GMT offset <= 14hrs
1522 " (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1524 s:"([+\-]\\d{2,4})"};
1530 "o = results[", currentGroup, "];\n",
1531 "var sn = o.substring(0,1);\n",
1532 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60);\n",
1533 "var mn = o.substring(4,6) % 60;\n",
1534 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n",
1535 " (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1541 s:"[A-Z]{1,4}"}; // timezone abbrev. may be between 1 - 4 chars
1544 c:"z = results[" + currentGroup + "];\n" // -43200 <= UTC offset <= 50400
1545 + "z = (-43200 <= z*1 && z*1 <= 50400)? z : null;\n",
1546 s:"([+\-]?\\d{1,5})"}; // leading '+' sign is optional for UTC offset
1550 s:String.escape(character)};
1555 * Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
1556 * @return {String} The abbreviated timezone name (e.g. 'CST')
1558 Date.prototype.getTimezone = function() {
1559 return this.toString().replace(/^.*? ([A-Z]{1,4})[\-+][0-9]{4} .*$/, "$1");
1563 * Get the offset from GMT of the current date (equivalent to the format specifier 'O').
1564 * @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600')
1566 Date.prototype.getGMTOffset = function() {
1567 return (this.getTimezoneOffset() > 0 ? "-" : "+")
1568 + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1569 + String.leftPad(this.getTimezoneOffset() % 60, 2, "0");
1573 * Get the offset from GMT of the current date (equivalent to the format specifier 'P').
1574 * @return {String} 2-characters representing hours and 2-characters representing minutes
1575 * seperated by a colon and prefixed with + or - (e.g. '-06:00')
1577 Date.prototype.getGMTColonOffset = function() {
1578 return (this.getTimezoneOffset() > 0 ? "-" : "+")
1579 + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1581 + String.leftPad(this.getTimezoneOffset() %60, 2, "0");
1585 * Get the numeric day number of the year, adjusted for leap year.
1586 * @return {Number} 0 through 364 (365 in leap years)
1588 Date.prototype.getDayOfYear = function() {
1590 Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1591 for (var i = 0; i < this.getMonth(); ++i) {
1592 num += Date.daysInMonth[i];
1594 return num + this.getDate() - 1;
1598 * Get the string representation of the numeric week number of the year
1599 * (equivalent to the format specifier 'W').
1600 * @return {String} '00' through '52'
1602 Date.prototype.getWeekOfYear = function() {
1603 // Skip to Thursday of this week
1604 var now = this.getDayOfYear() + (4 - this.getDay());
1605 // Find the first Thursday of the year
1606 var jan1 = new Date(this.getFullYear(), 0, 1);
1607 var then = (7 - jan1.getDay() + 4);
1608 return String.leftPad(((now - then) / 7) + 1, 2, "0");
1612 * Whether or not the current date is in a leap year.
1613 * @return {Boolean} True if the current date is in a leap year, else false
1615 Date.prototype.isLeapYear = function() {
1616 var year = this.getFullYear();
1617 return ((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
1621 * Get the first day of the current month, adjusted for leap year. The returned value
1622 * is the numeric day index within the week (0-6) which can be used in conjunction with
1623 * the {@link #monthNames} array to retrieve the textual day name.
1626 var dt = new Date('1/10/2007');
1627 document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'
1629 * @return {Number} The day number (0-6)
1631 Date.prototype.getFirstDayOfMonth = function() {
1632 var day = (this.getDay() - (this.getDate() - 1)) % 7;
1633 return (day < 0) ? (day + 7) : day;
1637 * Get the last day of the current month, adjusted for leap year. The returned value
1638 * is the numeric day index within the week (0-6) which can be used in conjunction with
1639 * the {@link #monthNames} array to retrieve the textual day name.
1642 var dt = new Date('1/10/2007');
1643 document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
1645 * @return {Number} The day number (0-6)
1647 Date.prototype.getLastDayOfMonth = function() {
1648 var day = (this.getDay() + (Date.daysInMonth[this.getMonth()] - this.getDate())) % 7;
1649 return (day < 0) ? (day + 7) : day;
1654 * Get the first date of this date's month
1657 Date.prototype.getFirstDateOfMonth = function() {
1658 return new Date(this.getFullYear(), this.getMonth(), 1);
1662 * Get the last date of this date's month
1665 Date.prototype.getLastDateOfMonth = function() {
1666 return new Date(this.getFullYear(), this.getMonth(), this.getDaysInMonth());
1669 * Get the number of days in the current month, adjusted for leap year.
1670 * @return {Number} The number of days in the month
1672 Date.prototype.getDaysInMonth = function() {
1673 Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1674 return Date.daysInMonth[this.getMonth()];
1678 * Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
1679 * @return {String} 'st, 'nd', 'rd' or 'th'
1681 Date.prototype.getSuffix = function() {
1682 switch (this.getDate()) {
1699 Date.daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
1702 * An array of textual month names.
1703 * Override these values for international dates, for example...
1704 * Date.monthNames = ['JanInYourLang', 'FebInYourLang', ...];
1723 * An array of textual day names.
1724 * Override these values for international dates, for example...
1725 * Date.dayNames = ['SundayInYourLang', 'MondayInYourLang', ...];
1741 Date.monthNumbers = {
1756 * Creates and returns a new Date instance with the exact same date value as the called instance.
1757 * Dates are copied and passed by reference, so if a copied date variable is modified later, the original
1758 * variable will also be changed. When the intention is to create a new variable that will not
1759 * modify the original instance, you should create a clone.
1761 * Example of correctly cloning a date:
1764 var orig = new Date('10/1/2006');
1767 document.write(orig); //returns 'Thu Oct 05 2006'!
1770 var orig = new Date('10/1/2006');
1771 var copy = orig.clone();
1773 document.write(orig); //returns 'Thu Oct 01 2006'
1775 * @return {Date} The new Date instance
1777 Date.prototype.clone = function() {
1778 return new Date(this.getTime());
1782 * Clears any time information from this date
1783 @param {Boolean} clone true to create a clone of this date, clear the time and return it
1784 @return {Date} this or the clone
1786 Date.prototype.clearTime = function(clone){
1788 return this.clone().clearTime();
1793 this.setMilliseconds(0);
1798 // safari setMonth is broken -- check that this is only donw once...
1799 if(Roo.isSafari && typeof(Date.brokenSetMonth) == 'undefined'){
1800 Date.brokenSetMonth = Date.prototype.setMonth;
1801 Date.prototype.setMonth = function(num){
1803 var n = Math.ceil(-num);
1804 var back_year = Math.ceil(n/12);
1805 var month = (n % 12) ? 12 - n % 12 : 0 ;
1806 this.setFullYear(this.getFullYear() - back_year);
1807 return Date.brokenSetMonth.call(this, month);
1809 return Date.brokenSetMonth.apply(this, arguments);
1814 /** Date interval constant
1818 /** Date interval constant
1822 /** Date interval constant
1826 /** Date interval constant
1830 /** Date interval constant
1834 /** Date interval constant
1838 /** Date interval constant
1844 * Provides a convenient method of performing basic date arithmetic. This method
1845 * does not modify the Date instance being called - it creates and returns
1846 * a new Date instance containing the resulting date value.
1851 var dt = new Date('10/29/2006').add(Date.DAY, 5);
1852 document.write(dt); //returns 'Fri Oct 06 2006 00:00:00'
1854 //Negative values will subtract correctly:
1855 var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
1856 document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'
1858 //You can even chain several calls together in one line!
1859 var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
1860 document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
1863 * @param {String} interval A valid date interval enum value
1864 * @param {Number} value The amount to add to the current date
1865 * @return {Date} The new Date instance
1867 Date.prototype.add = function(interval, value){
1868 var d = this.clone();
1869 if (!interval || value === 0) { return d; }
1870 switch(interval.toLowerCase()){
1872 d.setMilliseconds(this.getMilliseconds() + value);
1875 d.setSeconds(this.getSeconds() + value);
1878 d.setMinutes(this.getMinutes() + value);
1881 d.setHours(this.getHours() + value);
1884 d.setDate(this.getDate() + value);
1887 var day = this.getDate();
1889 day = Math.min(day, this.getFirstDateOfMonth().add('mo', value).getLastDateOfMonth().getDate());
1892 d.setMonth(this.getMonth() + value);
1895 d.setFullYear(this.getFullYear() + value);
1901 * @class Roo.lib.Dom
1905 * Dom utils (from YIU afaik)
1911 * Get the view width
1912 * @param {Boolean} full True will get the full document, otherwise it's the view width
1913 * @return {Number} The width
1916 getViewWidth : function(full) {
1917 return full ? this.getDocumentWidth() : this.getViewportWidth();
1920 * Get the view height
1921 * @param {Boolean} full True will get the full document, otherwise it's the view height
1922 * @return {Number} The height
1924 getViewHeight : function(full) {
1925 return full ? this.getDocumentHeight() : this.getViewportHeight();
1928 * Get the Full Document height
1929 * @return {Number} The height
1931 getDocumentHeight: function() {
1932 var scrollHeight = (document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight;
1933 return Math.max(scrollHeight, this.getViewportHeight());
1936 * Get the Full Document width
1937 * @return {Number} The width
1939 getDocumentWidth: function() {
1940 var scrollWidth = (document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth;
1941 return Math.max(scrollWidth, this.getViewportWidth());
1944 * Get the Window Viewport height
1945 * @return {Number} The height
1947 getViewportHeight: function() {
1948 var height = self.innerHeight;
1949 var mode = document.compatMode;
1951 if ((mode || Roo.isIE) && !Roo.isOpera) {
1952 height = (mode == "CSS1Compat") ?
1953 document.documentElement.clientHeight :
1954 document.body.clientHeight;
1960 * Get the Window Viewport width
1961 * @return {Number} The width
1963 getViewportWidth: function() {
1964 var width = self.innerWidth;
1965 var mode = document.compatMode;
1967 if (mode || Roo.isIE) {
1968 width = (mode == "CSS1Compat") ?
1969 document.documentElement.clientWidth :
1970 document.body.clientWidth;
1975 isAncestor : function(p, c) {
1982 if (p.contains && !Roo.isSafari) {
1983 return p.contains(c);
1984 } else if (p.compareDocumentPosition) {
1985 return !!(p.compareDocumentPosition(c) & 16);
1987 var parent = c.parentNode;
1992 else if (!parent.tagName || parent.tagName.toUpperCase() == "HTML") {
1995 parent = parent.parentNode;
2001 getRegion : function(el) {
2002 return Roo.lib.Region.getRegion(el);
2005 getY : function(el) {
2006 return this.getXY(el)[1];
2009 getX : function(el) {
2010 return this.getXY(el)[0];
2013 getXY : function(el) {
2014 var p, pe, b, scroll, bd = document.body;
2015 el = Roo.getDom(el);
2016 var fly = Roo.lib.AnimBase.fly;
2017 if (el.getBoundingClientRect) {
2018 b = el.getBoundingClientRect();
2019 scroll = fly(document).getScroll();
2020 return [b.left + scroll.left, b.top + scroll.top];
2026 var hasAbsolute = fly(el).getStyle("position") == "absolute";
2033 if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
2040 var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
2041 var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;
2048 if (p != el && pe.getStyle('overflow') != 'visible') {
2056 if (Roo.isSafari && hasAbsolute) {
2061 if (Roo.isGecko && !hasAbsolute) {
2063 x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
2064 y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
2068 while (p && p != bd) {
2069 if (!Roo.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
2081 setXY : function(el, xy) {
2082 el = Roo.fly(el, '_setXY');
2084 var pts = el.translatePoints(xy);
2085 if (xy[0] !== false) {
2086 el.dom.style.left = pts.left + "px";
2088 if (xy[1] !== false) {
2089 el.dom.style.top = pts.top + "px";
2093 setX : function(el, x) {
2094 this.setXY(el, [x, false]);
2097 setY : function(el, y) {
2098 this.setXY(el, [false, y]);
2102 * Portions of this file are based on pieces of Yahoo User Interface Library
2103 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2104 * YUI licensed under the BSD License:
2105 * http://developer.yahoo.net/yui/license.txt
2106 * <script type="text/javascript">
2110 Roo.lib.Event = function() {
2111 var loadComplete = false;
2113 var unloadListeners = [];
2115 var onAvailStack = [];
2117 var lastError = null;
2130 startInterval: function() {
2131 if (!this._interval) {
2133 var callback = function() {
2134 self._tryPreloadAttach();
2136 this._interval = setInterval(callback, this.POLL_INTERVAL);
2141 onAvailable: function(p_id, p_fn, p_obj, p_override) {
2142 onAvailStack.push({ id: p_id,
2145 override: p_override,
2146 checkReady: false });
2148 retryCount = this.POLL_RETRYS;
2149 this.startInterval();
2153 addListener: function(el, eventName, fn) {
2154 el = Roo.getDom(el);
2159 if ("unload" == eventName) {
2160 unloadListeners[unloadListeners.length] =
2161 [el, eventName, fn];
2165 var wrappedFn = function(e) {
2166 return fn(Roo.lib.Event.getEvent(e));
2169 var li = [el, eventName, fn, wrappedFn];
2171 var index = listeners.length;
2172 listeners[index] = li;
2174 this.doAdd(el, eventName, wrappedFn, false);
2180 removeListener: function(el, eventName, fn) {
2183 el = Roo.getDom(el);
2186 return this.purgeElement(el, false, eventName);
2190 if ("unload" == eventName) {
2192 for (i = 0,len = unloadListeners.length; i < len; i++) {
2193 var li = unloadListeners[i];
2196 li[1] == eventName &&
2198 unloadListeners.splice(i, 1);
2206 var cacheItem = null;
2209 var index = arguments[3];
2211 if ("undefined" == typeof index) {
2212 index = this._getCacheIndex(el, eventName, fn);
2216 cacheItem = listeners[index];
2219 if (!el || !cacheItem) {
2223 this.doRemove(el, eventName, cacheItem[this.WFN], false);
2225 delete listeners[index][this.WFN];
2226 delete listeners[index][this.FN];
2227 listeners.splice(index, 1);
2234 getTarget: function(ev, resolveTextNode) {
2235 ev = ev.browserEvent || ev;
2236 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2237 var t = ev.target || ev.srcElement;
2238 return this.resolveTextNode(t);
2242 resolveTextNode: function(node) {
2243 if (Roo.isSafari && node && 3 == node.nodeType) {
2244 return node.parentNode;
2251 getPageX: function(ev) {
2252 ev = ev.browserEvent || ev;
2253 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2255 if (!x && 0 !== x) {
2256 x = ev.clientX || 0;
2259 x += this.getScroll()[1];
2267 getPageY: function(ev) {
2268 ev = ev.browserEvent || ev;
2269 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2271 if (!y && 0 !== y) {
2272 y = ev.clientY || 0;
2275 y += this.getScroll()[0];
2284 getXY: function(ev) {
2285 ev = ev.browserEvent || ev;
2286 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2287 return [this.getPageX(ev), this.getPageY(ev)];
2291 getRelatedTarget: function(ev) {
2292 ev = ev.browserEvent || ev;
2293 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2294 var t = ev.relatedTarget;
2296 if (ev.type == "mouseout") {
2298 } else if (ev.type == "mouseover") {
2303 return this.resolveTextNode(t);
2307 getTime: function(ev) {
2308 ev = ev.browserEvent || ev;
2309 ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev ) : ev;
2311 var t = new Date().getTime();
2315 this.lastError = ex;
2324 stopEvent: function(ev) {
2325 this.stopPropagation(ev);
2326 this.preventDefault(ev);
2330 stopPropagation: function(ev) {
2331 ev = ev.browserEvent || ev;
2332 if (ev.stopPropagation) {
2333 ev.stopPropagation();
2335 ev.cancelBubble = true;
2340 preventDefault: function(ev) {
2341 ev = ev.browserEvent || ev;
2342 if(ev.preventDefault) {
2343 ev.preventDefault();
2345 ev.returnValue = false;
2350 getEvent: function(e) {
2351 var ev = e || window.event;
2353 var c = this.getEvent.caller;
2355 ev = c.arguments[0];
2356 if (ev && Event == ev.constructor) {
2366 getCharCode: function(ev) {
2367 ev = ev.browserEvent || ev;
2368 return ev.charCode || ev.keyCode || 0;
2372 _getCacheIndex: function(el, eventName, fn) {
2373 for (var i = 0,len = listeners.length; i < len; ++i) {
2374 var li = listeners[i];
2376 li[this.FN] == fn &&
2377 li[this.EL] == el &&
2378 li[this.TYPE] == eventName) {
2390 getEl: function(id) {
2391 return document.getElementById(id);
2395 clearCache: function() {
2399 _load: function(e) {
2400 loadComplete = true;
2401 var EU = Roo.lib.Event;
2405 EU.doRemove(window, "load", EU._load);
2410 _tryPreloadAttach: function() {
2419 var tryAgain = !loadComplete;
2421 tryAgain = (retryCount > 0);
2426 for (var i = 0,len = onAvailStack.length; i < len; ++i) {
2427 var item = onAvailStack[i];
2429 var el = this.getEl(item.id);
2432 if (!item.checkReady ||
2435 (document && document.body)) {
2438 if (item.override) {
2439 if (item.override === true) {
2442 scope = item.override;
2445 item.fn.call(scope, item.obj);
2446 onAvailStack[i] = null;
2449 notAvail.push(item);
2454 retryCount = (notAvail.length === 0) ? 0 : retryCount - 1;
2458 this.startInterval();
2460 clearInterval(this._interval);
2461 this._interval = null;
2464 this.locked = false;
2471 purgeElement: function(el, recurse, eventName) {
2472 var elListeners = this.getListeners(el, eventName);
2474 for (var i = 0,len = elListeners.length; i < len; ++i) {
2475 var l = elListeners[i];
2476 this.removeListener(el, l.type, l.fn);
2480 if (recurse && el && el.childNodes) {
2481 for (i = 0,len = el.childNodes.length; i < len; ++i) {
2482 this.purgeElement(el.childNodes[i], recurse, eventName);
2488 getListeners: function(el, eventName) {
2489 var results = [], searchLists;
2491 searchLists = [listeners, unloadListeners];
2492 } else if (eventName == "unload") {
2493 searchLists = [unloadListeners];
2495 searchLists = [listeners];
2498 for (var j = 0; j < searchLists.length; ++j) {
2499 var searchList = searchLists[j];
2500 if (searchList && searchList.length > 0) {
2501 for (var i = 0,len = searchList.length; i < len; ++i) {
2502 var l = searchList[i];
2503 if (l && l[this.EL] === el &&
2504 (!eventName || eventName === l[this.TYPE])) {
2509 adjust: l[this.ADJ_SCOPE],
2517 return (results.length) ? results : null;
2521 _unload: function(e) {
2523 var EU = Roo.lib.Event, i, j, l, len, index;
2525 for (i = 0,len = unloadListeners.length; i < len; ++i) {
2526 l = unloadListeners[i];
2529 if (l[EU.ADJ_SCOPE]) {
2530 if (l[EU.ADJ_SCOPE] === true) {
2533 scope = l[EU.ADJ_SCOPE];
2536 l[EU.FN].call(scope, EU.getEvent(e), l[EU.OBJ]);
2537 unloadListeners[i] = null;
2543 unloadListeners = null;
2545 if (listeners && listeners.length > 0) {
2546 j = listeners.length;
2549 l = listeners[index];
2551 EU.removeListener(l[EU.EL], l[EU.TYPE],
2561 EU.doRemove(window, "unload", EU._unload);
2566 getScroll: function() {
2567 var dd = document.documentElement, db = document.body;
2568 if (dd && (dd.scrollTop || dd.scrollLeft)) {
2569 return [dd.scrollTop, dd.scrollLeft];
2571 return [db.scrollTop, db.scrollLeft];
2578 doAdd: function () {
2579 if (window.addEventListener) {
2580 return function(el, eventName, fn, capture) {
2581 el.addEventListener(eventName, fn, (capture));
2583 } else if (window.attachEvent) {
2584 return function(el, eventName, fn, capture) {
2585 el.attachEvent("on" + eventName, fn);
2594 doRemove: function() {
2595 if (window.removeEventListener) {
2596 return function (el, eventName, fn, capture) {
2597 el.removeEventListener(eventName, fn, (capture));
2599 } else if (window.detachEvent) {
2600 return function (el, eventName, fn) {
2601 el.detachEvent("on" + eventName, fn);
2613 var E = Roo.lib.Event;
2614 E.on = E.addListener;
2615 E.un = E.removeListener;
2617 if (document && document.body) {
2620 E.doAdd(window, "load", E._load);
2622 E.doAdd(window, "unload", E._unload);
2623 E._tryPreloadAttach();
2630 * @class Roo.lib.Ajax
2632 * provide a simple Ajax request utility functions
2634 * Portions of this file are based on pieces of Yahoo User Interface Library
2635 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2636 * YUI licensed under the BSD License:
2637 * http://developer.yahoo.net/yui/license.txt
2638 * <script type="text/javascript">
2646 request : function(method, uri, cb, data, options) {
2648 var hs = options.headers;
2651 if(hs.hasOwnProperty(h)){
2652 this.initHeader(h, hs[h], false);
2656 if(options.xmlData){
2657 this.initHeader('Content-Type', 'text/xml', false);
2659 data = options.xmlData;
2663 return this.asyncRequest(method, uri, cb, data);
2669 * @param {DomForm} form element
2670 * @return {String} urlencode form output.
2672 serializeForm : function(form) {
2673 if(typeof form == 'string') {
2674 form = (document.getElementById(form) || document.forms[form]);
2677 var el, name, val, disabled, data = '', hasSubmit = false;
2678 for (var i = 0; i < form.elements.length; i++) {
2679 el = form.elements[i];
2680 disabled = form.elements[i].disabled;
2681 name = form.elements[i].name;
2682 val = form.elements[i].value;
2684 if (!disabled && name){
2688 case 'select-multiple':
2689 for (var j = 0; j < el.options.length; j++) {
2690 if (el.options[j].selected) {
2692 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].attributes['value'].specified ? el.options[j].value : el.options[j].text) + '&';
2695 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].hasAttribute('value') ? el.options[j].value : el.options[j].text) + '&';
2703 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2716 if(hasSubmit == false) {
2717 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2722 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2727 data = data.substr(0, data.length - 1);
2735 useDefaultHeader:true,
2737 defaultPostHeader:'application/x-www-form-urlencoded',
2739 useDefaultXhrHeader:true,
2741 defaultXhrHeader:'XMLHttpRequest',
2743 hasDefaultHeaders:true,
2755 setProgId:function(id)
2757 this.activeX.unshift(id);
2760 setDefaultPostHeader:function(b)
2762 this.useDefaultHeader = b;
2765 setDefaultXhrHeader:function(b)
2767 this.useDefaultXhrHeader = b;
2770 setPollingInterval:function(i)
2772 if (typeof i == 'number' && isFinite(i)) {
2773 this.pollInterval = i;
2777 createXhrObject:function(transactionId)
2783 http = new XMLHttpRequest();
2785 obj = { conn:http, tId:transactionId };
2789 for (var i = 0; i < this.activeX.length; ++i) {
2793 http = new ActiveXObject(this.activeX[i]);
2795 obj = { conn:http, tId:transactionId };
2808 getConnectionObject:function()
2811 var tId = this.transactionId;
2815 o = this.createXhrObject(tId);
2817 this.transactionId++;
2828 asyncRequest:function(method, uri, callback, postData)
2830 var o = this.getConnectionObject();
2836 o.conn.open(method, uri, true);
2838 if (this.useDefaultXhrHeader) {
2839 if (!this.defaultHeaders['X-Requested-With']) {
2840 this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
2844 if(postData && this.useDefaultHeader){
2845 this.initHeader('Content-Type', this.defaultPostHeader);
2848 if (this.hasDefaultHeaders || this.hasHeaders) {
2852 this.handleReadyState(o, callback);
2853 o.conn.send(postData || null);
2859 handleReadyState:function(o, callback)
2863 if (callback && callback.timeout) {
2865 this.timeout[o.tId] = window.setTimeout(function() {
2866 oConn.abort(o, callback, true);
2867 }, callback.timeout);
2870 this.poll[o.tId] = window.setInterval(
2872 if (o.conn && o.conn.readyState == 4) {
2873 window.clearInterval(oConn.poll[o.tId]);
2874 delete oConn.poll[o.tId];
2876 if(callback && callback.timeout) {
2877 window.clearTimeout(oConn.timeout[o.tId]);
2878 delete oConn.timeout[o.tId];
2881 oConn.handleTransactionResponse(o, callback);
2884 , this.pollInterval);
2887 handleTransactionResponse:function(o, callback, isAbort)
2891 this.releaseObject(o);
2895 var httpStatus, responseObject;
2899 if (o.conn.status !== undefined && o.conn.status != 0) {
2900 httpStatus = o.conn.status;
2912 if (httpStatus >= 200 && httpStatus < 300) {
2913 responseObject = this.createResponseObject(o, callback.argument);
2914 if (callback.success) {
2915 if (!callback.scope) {
2916 callback.success(responseObject);
2921 callback.success.apply(callback.scope, [responseObject]);
2926 switch (httpStatus) {
2934 responseObject = this.createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false));
2935 if (callback.failure) {
2936 if (!callback.scope) {
2937 callback.failure(responseObject);
2940 callback.failure.apply(callback.scope, [responseObject]);
2945 responseObject = this.createResponseObject(o, callback.argument);
2946 if (callback.failure) {
2947 if (!callback.scope) {
2948 callback.failure(responseObject);
2951 callback.failure.apply(callback.scope, [responseObject]);
2957 this.releaseObject(o);
2958 responseObject = null;
2961 createResponseObject:function(o, callbackArg)
2968 var headerStr = o.conn.getAllResponseHeaders();
2969 var header = headerStr.split('\n');
2970 for (var i = 0; i < header.length; i++) {
2971 var delimitPos = header[i].indexOf(':');
2972 if (delimitPos != -1) {
2973 headerObj[header[i].substring(0, delimitPos)] = header[i].substring(delimitPos + 2);
2981 obj.status = o.conn.status;
2982 obj.statusText = o.conn.statusText;
2983 obj.getResponseHeader = headerObj;
2984 obj.getAllResponseHeaders = headerStr;
2985 obj.responseText = o.conn.responseText;
2986 obj.responseXML = o.conn.responseXML;
2988 if (typeof callbackArg !== undefined) {
2989 obj.argument = callbackArg;
2995 createExceptionObject:function(tId, callbackArg, isAbort)
2998 var COMM_ERROR = 'communication failure';
2999 var ABORT_CODE = -1;
3000 var ABORT_ERROR = 'transaction aborted';
3006 obj.status = ABORT_CODE;
3007 obj.statusText = ABORT_ERROR;
3010 obj.status = COMM_CODE;
3011 obj.statusText = COMM_ERROR;
3015 obj.argument = callbackArg;
3021 initHeader:function(label, value, isDefault)
3023 var headerObj = (isDefault) ? this.defaultHeaders : this.headers;
3025 if (headerObj[label] === undefined) {
3026 headerObj[label] = value;
3031 headerObj[label] = value + "," + headerObj[label];
3035 this.hasDefaultHeaders = true;
3038 this.hasHeaders = true;
3043 setHeader:function(o)
3045 if (this.hasDefaultHeaders) {
3046 for (var prop in this.defaultHeaders) {
3047 if (this.defaultHeaders.hasOwnProperty(prop)) {
3048 o.conn.setRequestHeader(prop, this.defaultHeaders[prop]);
3053 if (this.hasHeaders) {
3054 for (var prop in this.headers) {
3055 if (this.headers.hasOwnProperty(prop)) {
3056 o.conn.setRequestHeader(prop, this.headers[prop]);
3060 this.hasHeaders = false;
3064 resetDefaultHeaders:function() {
3065 delete this.defaultHeaders;
3066 this.defaultHeaders = {};
3067 this.hasDefaultHeaders = false;
3070 abort:function(o, callback, isTimeout)
3072 if(this.isCallInProgress(o)) {
3074 window.clearInterval(this.poll[o.tId]);
3075 delete this.poll[o.tId];
3077 delete this.timeout[o.tId];
3080 this.handleTransactionResponse(o, callback, true);
3090 isCallInProgress:function(o)
3093 return o.conn.readyState != 4 && o.conn.readyState != 0;
3102 releaseObject:function(o)
3111 'MSXML2.XMLHTTP.3.0',
3119 * Portions of this file are based on pieces of Yahoo User Interface Library
3120 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3121 * YUI licensed under the BSD License:
3122 * http://developer.yahoo.net/yui/license.txt
3123 * <script type="text/javascript">
3127 Roo.lib.Region = function(t, r, b, l) {
3137 Roo.lib.Region.prototype = {
3138 contains : function(region) {
3139 return ( region.left >= this.left &&
3140 region.right <= this.right &&
3141 region.top >= this.top &&
3142 region.bottom <= this.bottom );
3146 getArea : function() {
3147 return ( (this.bottom - this.top) * (this.right - this.left) );
3150 intersect : function(region) {
3151 var t = Math.max(this.top, region.top);
3152 var r = Math.min(this.right, region.right);
3153 var b = Math.min(this.bottom, region.bottom);
3154 var l = Math.max(this.left, region.left);
3156 if (b >= t && r >= l) {
3157 return new Roo.lib.Region(t, r, b, l);
3162 union : function(region) {
3163 var t = Math.min(this.top, region.top);
3164 var r = Math.max(this.right, region.right);
3165 var b = Math.max(this.bottom, region.bottom);
3166 var l = Math.min(this.left, region.left);
3168 return new Roo.lib.Region(t, r, b, l);
3171 adjust : function(t, l, b, r) {
3180 Roo.lib.Region.getRegion = function(el) {
3181 var p = Roo.lib.Dom.getXY(el);
3184 var r = p[0] + el.offsetWidth;
3185 var b = p[1] + el.offsetHeight;
3188 return new Roo.lib.Region(t, r, b, l);
3191 * Portions of this file are based on pieces of Yahoo User Interface Library
3192 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3193 * YUI licensed under the BSD License:
3194 * http://developer.yahoo.net/yui/license.txt
3195 * <script type="text/javascript">
3198 //@@dep Roo.lib.Region
3201 Roo.lib.Point = function(x, y) {
3202 if (x instanceof Array) {
3206 this.x = this.right = this.left = this[0] = x;
3207 this.y = this.top = this.bottom = this[1] = y;
3210 Roo.lib.Point.prototype = new Roo.lib.Region();
3212 * Portions of this file are based on pieces of Yahoo User Interface Library
3213 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3214 * YUI licensed under the BSD License:
3215 * http://developer.yahoo.net/yui/license.txt
3216 * <script type="text/javascript">
3223 scroll : function(el, args, duration, easing, cb, scope) {
3224 this.run(el, args, duration, easing, cb, scope, Roo.lib.Scroll);
3227 motion : function(el, args, duration, easing, cb, scope) {
3228 this.run(el, args, duration, easing, cb, scope, Roo.lib.Motion);
3231 color : function(el, args, duration, easing, cb, scope) {
3232 this.run(el, args, duration, easing, cb, scope, Roo.lib.ColorAnim);
3235 run : function(el, args, duration, easing, cb, scope, type) {
3236 type = type || Roo.lib.AnimBase;
3237 if (typeof easing == "string") {
3238 easing = Roo.lib.Easing[easing];
3240 var anim = new type(el, args, duration, easing);
3241 anim.animateX(function() {
3242 Roo.callback(cb, scope);
3248 * Portions of this file are based on pieces of Yahoo User Interface Library
3249 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3250 * YUI licensed under the BSD License:
3251 * http://developer.yahoo.net/yui/license.txt
3252 * <script type="text/javascript">
3260 if (!libFlyweight) {
3261 libFlyweight = new Roo.Element.Flyweight();
3263 libFlyweight.dom = el;
3264 return libFlyweight;
3267 // since this uses fly! - it cant be in DOM (which does not have fly yet..)
3271 Roo.lib.AnimBase = function(el, attributes, duration, method) {
3273 this.init(el, attributes, duration, method);
3277 Roo.lib.AnimBase.fly = fly;
3281 Roo.lib.AnimBase.prototype = {
3283 toString: function() {
3284 var el = this.getEl();
3285 var id = el.id || el.tagName;
3286 return ("Anim " + id);
3290 noNegatives: /width|height|opacity|padding/i,
3291 offsetAttribute: /^((width|height)|(top|left))$/,
3292 defaultUnit: /width|height|top$|bottom$|left$|right$/i,
3293 offsetUnit: /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i
3297 doMethod: function(attr, start, end) {
3298 return this.method(this.currentFrame, start, end - start, this.totalFrames);
3302 setAttribute: function(attr, val, unit) {
3303 if (this.patterns.noNegatives.test(attr)) {
3304 val = (val > 0) ? val : 0;
3307 Roo.fly(this.getEl(), '_anim').setStyle(attr, val + unit);
3311 getAttribute: function(attr) {
3312 var el = this.getEl();
3313 var val = fly(el).getStyle(attr);
3315 if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
3316 return parseFloat(val);
3319 var a = this.patterns.offsetAttribute.exec(attr) || [];
3320 var pos = !!( a[3] );
3321 var box = !!( a[2] );
3324 if (box || (fly(el).getStyle('position') == 'absolute' && pos)) {
3325 val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
3334 getDefaultUnit: function(attr) {
3335 if (this.patterns.defaultUnit.test(attr)) {
3342 animateX : function(callback, scope) {
3343 var f = function() {
3344 this.onComplete.removeListener(f);
3345 if (typeof callback == "function") {
3346 callback.call(scope || this, this);
3349 this.onComplete.addListener(f, this);
3354 setRuntimeAttribute: function(attr) {
3357 var attributes = this.attributes;
3359 this.runtimeAttributes[attr] = {};
3361 var isset = function(prop) {
3362 return (typeof prop !== 'undefined');
3365 if (!isset(attributes[attr]['to']) && !isset(attributes[attr]['by'])) {
3369 start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
3372 if (isset(attributes[attr]['to'])) {
3373 end = attributes[attr]['to'];
3374 } else if (isset(attributes[attr]['by'])) {
3375 if (start.constructor == Array) {
3377 for (var i = 0, len = start.length; i < len; ++i) {
3378 end[i] = start[i] + attributes[attr]['by'][i];
3381 end = start + attributes[attr]['by'];
3385 this.runtimeAttributes[attr].start = start;
3386 this.runtimeAttributes[attr].end = end;
3389 this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ? attributes[attr]['unit'] : this.getDefaultUnit(attr);
3393 init: function(el, attributes, duration, method) {
3395 var isAnimated = false;
3398 var startTime = null;
3401 var actualFrames = 0;
3404 el = Roo.getDom(el);
3407 this.attributes = attributes || {};
3410 this.duration = duration || 1;
3413 this.method = method || Roo.lib.Easing.easeNone;
3416 this.useSeconds = true;
3419 this.currentFrame = 0;
3422 this.totalFrames = Roo.lib.AnimMgr.fps;
3425 this.getEl = function() {
3430 this.isAnimated = function() {
3435 this.getStartTime = function() {
3439 this.runtimeAttributes = {};
3442 this.animate = function() {
3443 if (this.isAnimated()) {
3447 this.currentFrame = 0;
3449 this.totalFrames = ( this.useSeconds ) ? Math.ceil(Roo.lib.AnimMgr.fps * this.duration) : this.duration;
3451 Roo.lib.AnimMgr.registerElement(this);
3455 this.stop = function(finish) {
3457 this.currentFrame = this.totalFrames;
3458 this._onTween.fire();
3460 Roo.lib.AnimMgr.stop(this);
3463 var onStart = function() {
3464 this.onStart.fire();
3466 this.runtimeAttributes = {};
3467 for (var attr in this.attributes) {
3468 this.setRuntimeAttribute(attr);
3473 startTime = new Date();
3477 var onTween = function() {
3479 duration: new Date() - this.getStartTime(),
3480 currentFrame: this.currentFrame
3483 data.toString = function() {
3485 'duration: ' + data.duration +
3486 ', currentFrame: ' + data.currentFrame
3490 this.onTween.fire(data);
3492 var runtimeAttributes = this.runtimeAttributes;
3494 for (var attr in runtimeAttributes) {
3495 this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit);
3501 var onComplete = function() {
3502 var actual_duration = (new Date() - startTime) / 1000 ;
3505 duration: actual_duration,
3506 frames: actualFrames,
3507 fps: actualFrames / actual_duration
3510 data.toString = function() {
3512 'duration: ' + data.duration +
3513 ', frames: ' + data.frames +
3514 ', fps: ' + data.fps
3520 this.onComplete.fire(data);
3524 this._onStart = new Roo.util.Event(this);
3525 this.onStart = new Roo.util.Event(this);
3526 this.onTween = new Roo.util.Event(this);
3527 this._onTween = new Roo.util.Event(this);
3528 this.onComplete = new Roo.util.Event(this);
3529 this._onComplete = new Roo.util.Event(this);
3530 this._onStart.addListener(onStart);
3531 this._onTween.addListener(onTween);
3532 this._onComplete.addListener(onComplete);
3537 * Portions of this file are based on pieces of Yahoo User Interface Library
3538 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3539 * YUI licensed under the BSD License:
3540 * http://developer.yahoo.net/yui/license.txt
3541 * <script type="text/javascript">
3545 Roo.lib.AnimMgr = new function() {
3562 this.registerElement = function(tween) {
3563 queue[queue.length] = tween;
3565 tween._onStart.fire();
3570 this.unRegister = function(tween, index) {
3571 tween._onComplete.fire();
3572 index = index || getIndex(tween);
3574 queue.splice(index, 1);
3578 if (tweenCount <= 0) {
3584 this.start = function() {
3585 if (thread === null) {
3586 thread = setInterval(this.run, this.delay);
3591 this.stop = function(tween) {
3593 clearInterval(thread);
3595 for (var i = 0, len = queue.length; i < len; ++i) {
3596 if (queue[0].isAnimated()) {
3597 this.unRegister(queue[0], 0);
3606 this.unRegister(tween);
3611 this.run = function() {
3612 for (var i = 0, len = queue.length; i < len; ++i) {
3613 var tween = queue[i];
3614 if (!tween || !tween.isAnimated()) {
3618 if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
3620 tween.currentFrame += 1;
3622 if (tween.useSeconds) {
3623 correctFrame(tween);
3625 tween._onTween.fire();
3628 Roo.lib.AnimMgr.stop(tween, i);
3633 var getIndex = function(anim) {
3634 for (var i = 0, len = queue.length; i < len; ++i) {
3635 if (queue[i] == anim) {
3643 var correctFrame = function(tween) {
3644 var frames = tween.totalFrames;
3645 var frame = tween.currentFrame;
3646 var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
3647 var elapsed = (new Date() - tween.getStartTime());
3650 if (elapsed < tween.duration * 1000) {
3651 tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
3653 tweak = frames - (frame + 1);
3655 if (tweak > 0 && isFinite(tweak)) {
3656 if (tween.currentFrame + tweak >= frames) {
3657 tweak = frames - (frame + 1);
3660 tween.currentFrame += tweak;
3666 * Portions of this file are based on pieces of Yahoo User Interface Library
3667 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3668 * YUI licensed under the BSD License:
3669 * http://developer.yahoo.net/yui/license.txt
3670 * <script type="text/javascript">
3673 Roo.lib.Bezier = new function() {
3675 this.getPosition = function(points, t) {
3676 var n = points.length;
3679 for (var i = 0; i < n; ++i) {
3680 tmp[i] = [points[i][0], points[i][1]];
3683 for (var j = 1; j < n; ++j) {
3684 for (i = 0; i < n - j; ++i) {
3685 tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
3686 tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
3690 return [ tmp[0][0], tmp[0][1] ];
3696 * @class Roo.lib.Color
3698 * An abstract Color implementation. Concrete Color implementations should use
3699 * an instance of this function as their prototype, and implement the getRGB and
3700 * getHSL functions. getRGB should return an object representing the RGB
3701 * components of this Color, with the red, green, and blue components in the
3702 * range [0,255] and the alpha component in the range [0,100]. getHSL should
3703 * return an object representing the HSL components of this Color, with the hue
3704 * component in the range [0,360), the saturation and lightness components in
3705 * the range [0,100], and the alpha component in the range [0,1].
3710 * Functions for Color handling and processing.
3712 * http://www.safalra.com/web-design/javascript/Color-handling-and-processing/
3714 * The author of this program, Safalra (Stephen Morley), irrevocably releases all
3715 * rights to this program, with the intention of it becoming part of the public
3716 * domain. Because this program is released into the public domain, it comes with
3717 * no warranty either expressed or implied, to the extent permitted by law.
3719 * For more free and public domain JavaScript code by the same author, visit:
3720 * http://www.safalra.com/web-design/javascript/
3723 Roo.lib.Color = function() { }
3726 Roo.apply(Roo.lib.Color.prototype, {
3734 * @return {Object} an object representing the RGBA components of this Color. The red,
3735 * green, and blue components are converted to integers in the range [0,255].
3736 * The alpha is a value in the range [0,1].
3738 getIntegerRGB : function(){
3740 // get the RGB components of this Color
3741 var rgb = this.getRGB();
3743 // return the integer components
3745 'r' : Math.round(rgb.r),
3746 'g' : Math.round(rgb.g),
3747 'b' : Math.round(rgb.b),
3755 * @return {Object} an object representing the RGBA components of this Color. The red,
3756 * green, and blue components are converted to numbers in the range [0,100].
3757 * The alpha is a value in the range [0,1].
3759 getPercentageRGB : function(){
3761 // get the RGB components of this Color
3762 var rgb = this.getRGB();
3764 // return the percentage components
3766 'r' : 100 * rgb.r / 255,
3767 'g' : 100 * rgb.g / 255,
3768 'b' : 100 * rgb.b / 255,
3775 * getCSSHexadecimalRGB
3776 * @return {String} a string representing this Color as a CSS hexadecimal RGB Color
3777 * value - that is, a string of the form #RRGGBB where each of RR, GG, and BB
3778 * are two-digit hexadecimal numbers.
3780 getCSSHexadecimalRGB : function()
3783 // get the integer RGB components
3784 var rgb = this.getIntegerRGB();
3786 // determine the hexadecimal equivalents
3787 var r16 = rgb.r.toString(16);
3788 var g16 = rgb.g.toString(16);
3789 var b16 = rgb.b.toString(16);
3791 // return the CSS RGB Color value
3793 + (r16.length == 2 ? r16 : '0' + r16)
3794 + (g16.length == 2 ? g16 : '0' + g16)
3795 + (b16.length == 2 ? b16 : '0' + b16);
3801 * @return {String} a string representing this Color as a CSS integer RGB Color
3802 * value - that is, a string of the form rgb(r,g,b) where each of r, g, and b
3803 * are integers in the range [0,255].
3805 getCSSIntegerRGB : function(){
3807 // get the integer RGB components
3808 var rgb = this.getIntegerRGB();
3810 // return the CSS RGB Color value
3811 return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
3817 * @return {String} Returns a string representing this Color as a CSS integer RGBA Color
3818 * value - that is, a string of the form rgba(r,g,b,a) where each of r, g, and
3819 * b are integers in the range [0,255] and a is in the range [0,1].
3821 getCSSIntegerRGBA : function(){
3823 // get the integer RGB components
3824 var rgb = this.getIntegerRGB();
3826 // return the CSS integer RGBA Color value
3827 return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')';
3832 * getCSSPercentageRGB
3833 * @return {String} a string representing this Color as a CSS percentage RGB Color
3834 * value - that is, a string of the form rgb(r%,g%,b%) where each of r, g, and
3835 * b are in the range [0,100].
3837 getCSSPercentageRGB : function(){
3839 // get the percentage RGB components
3840 var rgb = this.getPercentageRGB();
3842 // return the CSS RGB Color value
3843 return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%)';
3848 * getCSSPercentageRGBA
3849 * @return {String} a string representing this Color as a CSS percentage RGBA Color
3850 * value - that is, a string of the form rgba(r%,g%,b%,a) where each of r, g,
3851 * and b are in the range [0,100] and a is in the range [0,1].
3853 getCSSPercentageRGBA : function(){
3855 // get the percentage RGB components
3856 var rgb = this.getPercentageRGB();
3858 // return the CSS percentage RGBA Color value
3859 return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%,' + rgb.a + ')';
3865 * @return {String} a string representing this Color as a CSS HSL Color value - that
3866 * is, a string of the form hsl(h,s%,l%) where h is in the range [0,100] and
3867 * s and l are in the range [0,100].
3869 getCSSHSL : function(){
3871 // get the HSL components
3872 var hsl = this.getHSL();
3874 // return the CSS HSL Color value
3875 return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
3881 * @return {String} a string representing this Color as a CSS HSLA Color value - that
3882 * is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,100],
3883 * s and l are in the range [0,100], and a is in the range [0,1].
3885 getCSSHSLA : function(){
3887 // get the HSL components
3888 var hsl = this.getHSL();
3890 // return the CSS HSL Color value
3891 return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%,' + hsl.a + ')';
3896 * Sets the Color of the specified node to this Color. This functions sets
3897 * the CSS 'color' property for the node. The parameter is:
3899 * @param {DomElement} node - the node whose Color should be set
3901 setNodeColor : function(node){
3903 // set the Color of the node
3904 node.style.color = this.getCSSHexadecimalRGB();
3909 * Sets the background Color of the specified node to this Color. This
3910 * functions sets the CSS 'background-color' property for the node. The
3913 * @param {DomElement} node - the node whose background Color should be set
3915 setNodeBackgroundColor : function(node){
3917 // set the background Color of the node
3918 node.style.backgroundColor = this.getCSSHexadecimalRGB();
3921 // convert between formats..
3924 var r = this.getIntegerRGB();
3925 return new Roo.lib.RGBColor(r.r,r.g,r.b,r.a);
3930 var hsl = this.getHSL();
3931 // return the CSS HSL Color value
3932 return new Roo.lib.HSLColor(hsl.h, hsl.s, hsl.l , hsl.a );
3938 var rgb = this.toRGB();
3939 var hsv = rgb.getHSV();
3940 // return the CSS HSL Color value
3941 return new Roo.lib.HSVColor(hsv.h, hsv.s, hsv.v , hsv.a );
3945 // modify v = 0 ... 1 (eg. 0.5)
3946 saturate : function(v)
3948 var rgb = this.toRGB();
3949 var hsv = rgb.getHSV();
3950 return new Roo.lib.HSVColor(hsv.h, hsv.s * v, hsv.v , hsv.a );
3958 * @return {Object} the RGB and alpha components of this Color as an object with r,
3959 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
3964 // return the RGB components
3976 * @return {Object} the HSV and alpha components of this Color as an object with h,
3977 * s, v, and a properties. h is in the range [0,360), s and v are in the range
3978 * [0,100], and a is in the range [0,1].
3983 // calculate the HSV components if necessary
3984 if (this.hsv == null) {
3985 this.calculateHSV();
3988 // return the HSV components
4000 * @return {Object} the HSL and alpha components of this Color as an object with h,
4001 * s, l, and a properties. h is in the range [0,360), s and l are in the range
4002 * [0,100], and a is in the range [0,1].
4004 getHSL : function(){
4007 // calculate the HSV components if necessary
4008 if (this.hsl == null) { this.calculateHSL(); }
4010 // return the HSL components
4025 * @class Roo.lib.RGBColor
4026 * @extends Roo.lib.Color
4027 * Creates a Color specified in the RGB Color space, with an optional alpha
4028 * component. The parameters are:
4032 * @param {Number} r - the red component, clipped to the range [0,255]
4033 * @param {Number} g - the green component, clipped to the range [0,255]
4034 * @param {Number} b - the blue component, clipped to the range [0,255]
4035 * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
4036 * optional and defaults to 1
4038 Roo.lib.RGBColor = function (r, g, b, a){
4040 // store the alpha component after clipping it if necessary
4041 this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
4043 // store the RGB components after clipping them if necessary
4046 'r' : Math.max(0, Math.min(255, r)),
4047 'g' : Math.max(0, Math.min(255, g)),
4048 'b' : Math.max(0, Math.min(255, b))
4051 // initialise the HSV and HSL components to null
4055 * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
4056 * range [0,360). The parameters are:
4058 * maximum - the maximum of the RGB component values
4059 * range - the range of the RGB component values
4064 // this does an 'exteds'
4065 Roo.extend(Roo.lib.RGBColor, Roo.lib.Color, {
4068 getHue : function(maximum, range)
4072 // check whether the range is zero
4075 // set the hue to zero (any hue is acceptable as the Color is grey)
4080 // determine which of the components has the highest value and set the hue
4083 // red has the highest value
4085 var hue = (rgb.g - rgb.b) / range * 60;
4086 if (hue < 0) { hue += 360; }
4089 // green has the highest value
4091 var hue = (rgb.b - rgb.r) / range * 60 + 120;
4094 // blue has the highest value
4096 var hue = (rgb.r - rgb.g) / range * 60 + 240;
4108 /* //private Calculates and stores the HSV components of this RGBColor so that they can
4109 * be returned be the getHSV function.
4111 calculateHSV : function(){
4113 // get the maximum and range of the RGB component values
4114 var maximum = Math.max(rgb.r, rgb.g, rgb.b);
4115 var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
4117 // store the HSV components
4120 'h' : this.getHue(maximum, range),
4121 's' : (maximum == 0 ? 0 : 100 * range / maximum),
4122 'v' : maximum / 2.55
4127 /* //private Calculates and stores the HSL components of this RGBColor so that they can
4128 * be returned be the getHSL function.
4130 calculateHSL : function(){
4132 // get the maximum and range of the RGB component values
4133 var maximum = Math.max(rgb.r, rgb.g, rgb.b);
4134 var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
4136 // determine the lightness in the range [0,1]
4137 var l = maximum / 255 - range / 510;
4139 // store the HSL components
4142 'h' : this.getHue(maximum, range),
4143 's' : (range == 0 ? 0 : range / 2.55 / (l < 0.5 ? l * 2 : 2 - l * 2)),
4152 * @class Roo.lib.HSVColor
4153 * @extends Roo.lib.Color
4154 * Creates a Color specified in the HSV Color space, with an optional alpha
4155 * component. The parameters are:
4158 * @param {Number} h - the hue component, wrapped to the range [0,360)
4159 * @param {Number} s - the saturation component, clipped to the range [0,100]
4160 * @param {Number} v - the value component, clipped to the range [0,100]
4161 * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
4162 * optional and defaults to 1
4164 Roo.lib.HSVColor = function (h, s, v, a){
4166 // store the alpha component after clipping it if necessary
4167 this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
4169 // store the HSV components after clipping or wrapping them if necessary
4172 'h' : (h % 360 + 360) % 360,
4173 's' : Math.max(0, Math.min(100, s)),
4174 'v' : Math.max(0, Math.min(100, v))
4177 // initialise the RGB and HSL components to null
4182 Roo.extend(Roo.lib.HSVColor, Roo.lib.Color, {
4183 /* Calculates and stores the RGB components of this HSVColor so that they can
4184 * be returned be the getRGB function.
4186 calculateRGB: function ()
4189 // check whether the saturation is zero
4192 // set the Color to the appropriate shade of grey
4199 // set some temporary values
4200 var f = hsv.h / 60 - Math.floor(hsv.h / 60);
4201 var p = hsv.v * (1 - hsv.s / 100);
4202 var q = hsv.v * (1 - hsv.s / 100 * f);
4203 var t = hsv.v * (1 - hsv.s / 100 * (1 - f));
4205 // set the RGB Color components to their temporary values
4206 switch (Math.floor(hsv.h / 60)){
4207 case 0: var r = hsv.v; var g = t; var b = p; break;
4208 case 1: var r = q; var g = hsv.v; var b = p; break;
4209 case 2: var r = p; var g = hsv.v; var b = t; break;
4210 case 3: var r = p; var g = q; var b = hsv.v; break;
4211 case 4: var r = t; var g = p; var b = hsv.v; break;
4212 case 5: var r = hsv.v; var g = p; var b = q; break;
4217 // store the RGB components
4227 /* Calculates and stores the HSL components of this HSVColor so that they can
4228 * be returned be the getHSL function.
4230 calculateHSL : function (){
4233 // determine the lightness in the range [0,100]
4234 var l = (2 - hsv.s / 100) * hsv.v / 2;
4236 // store the HSL components
4240 's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
4244 // correct a division-by-zero error
4245 if (isNaN(hsl.s)) { hsl.s = 0; }
4254 * @class Roo.lib.HSLColor
4255 * @extends Roo.lib.Color
4258 * Creates a Color specified in the HSL Color space, with an optional alpha
4259 * component. The parameters are:
4261 * @param {Number} h - the hue component, wrapped to the range [0,360)
4262 * @param {Number} s - the saturation component, clipped to the range [0,100]
4263 * @param {Number} l - the lightness component, clipped to the range [0,100]
4264 * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
4265 * optional and defaults to 1
4268 Roo.lib.HSLColor = function(h, s, l, a){
4270 // store the alpha component after clipping it if necessary
4271 this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
4273 // store the HSL components after clipping or wrapping them if necessary
4276 'h' : (h % 360 + 360) % 360,
4277 's' : Math.max(0, Math.min(100, s)),
4278 'l' : Math.max(0, Math.min(100, l))
4281 // initialise the RGB and HSV components to null
4284 Roo.extend(Roo.lib.HSLColor, Roo.lib.Color, {
4286 /* Calculates and stores the RGB components of this HSLColor so that they can
4287 * be returned be the getRGB function.
4289 calculateRGB: function (){
4291 // check whether the saturation is zero
4292 if (this.hsl.s == 0){
4294 // store the RGB components representing the appropriate shade of grey
4297 'r' : this.hsl.l * 2.55,
4298 'g' : this.hsl.l * 2.55,
4299 'b' : this.hsl.l * 2.55
4304 // set some temporary values
4305 var p = this.hsl.l < 50
4306 ? this.hsl.l * (1 + hsl.s / 100)
4307 : this.hsl.l + hsl.s - hsl.l * hsl.s / 100;
4308 var q = 2 * hsl.l - p;
4310 // initialise the RGB components
4313 'r' : (h + 120) / 60 % 6,
4315 'b' : (h + 240) / 60 % 6
4318 // loop over the RGB components
4319 for (var key in this.rgb){
4321 // ensure that the property is not inherited from the root object
4322 if (this.rgb.hasOwnProperty(key)){
4324 // set the component to its value in the range [0,100]
4325 if (this.rgb[key] < 1){
4326 this.rgb[key] = q + (p - q) * this.rgb[key];
4327 }else if (this.rgb[key] < 3){
4329 }else if (this.rgb[key] < 4){
4330 this.rgb[key] = q + (p - q) * (4 - this.rgb[key]);
4335 // set the component to its value in the range [0,255]
4336 this.rgb[key] *= 2.55;
4346 /* Calculates and stores the HSV components of this HSLColor so that they can
4347 * be returned be the getHSL function.
4349 calculateHSV : function(){
4351 // set a temporary value
4352 var t = this.hsl.s * (this.hsl.l < 50 ? this.hsl.l : 100 - this.hsl.l) / 100;
4354 // store the HSV components
4358 's' : 200 * t / (this.hsl.l + t),
4359 'v' : t + this.hsl.l
4362 // correct a division-by-zero error
4363 if (isNaN(this.hsv.s)) { this.hsv.s = 0; }
4370 * Portions of this file are based on pieces of Yahoo User Interface Library
4371 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4372 * YUI licensed under the BSD License:
4373 * http://developer.yahoo.net/yui/license.txt
4374 * <script type="text/javascript">
4379 Roo.lib.ColorAnim = function(el, attributes, duration, method) {
4380 Roo.lib.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
4383 Roo.extend(Roo.lib.ColorAnim, Roo.lib.AnimBase);
4385 var fly = Roo.lib.AnimBase.fly;
4387 var superclass = Y.ColorAnim.superclass;
4388 var proto = Y.ColorAnim.prototype;
4390 proto.toString = function() {
4391 var el = this.getEl();
4392 var id = el.id || el.tagName;
4393 return ("ColorAnim " + id);
4396 proto.patterns.color = /color$/i;
4397 proto.patterns.rgb = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
4398 proto.patterns.hex = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
4399 proto.patterns.hex3 = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
4400 proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/;
4403 proto.parseColor = function(s) {
4404 if (s.length == 3) {
4408 var c = this.patterns.hex.exec(s);
4409 if (c && c.length == 4) {
4410 return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
4413 c = this.patterns.rgb.exec(s);
4414 if (c && c.length == 4) {
4415 return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
4418 c = this.patterns.hex3.exec(s);
4419 if (c && c.length == 4) {
4420 return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
4425 // since this uses fly! - it cant be in ColorAnim (which does not have fly yet..)
4426 proto.getAttribute = function(attr) {
4427 var el = this.getEl();
4428 if (this.patterns.color.test(attr)) {
4429 var val = fly(el).getStyle(attr);
4431 if (this.patterns.transparent.test(val)) {
4432 var parent = el.parentNode;
4433 val = fly(parent).getStyle(attr);
4435 while (parent && this.patterns.transparent.test(val)) {
4436 parent = parent.parentNode;
4437 val = fly(parent).getStyle(attr);
4438 if (parent.tagName.toUpperCase() == 'HTML') {
4444 val = superclass.getAttribute.call(this, attr);
4449 proto.getAttribute = function(attr) {
4450 var el = this.getEl();
4451 if (this.patterns.color.test(attr)) {
4452 var val = fly(el).getStyle(attr);
4454 if (this.patterns.transparent.test(val)) {
4455 var parent = el.parentNode;
4456 val = fly(parent).getStyle(attr);
4458 while (parent && this.patterns.transparent.test(val)) {
4459 parent = parent.parentNode;
4460 val = fly(parent).getStyle(attr);
4461 if (parent.tagName.toUpperCase() == 'HTML') {
4467 val = superclass.getAttribute.call(this, attr);
4473 proto.doMethod = function(attr, start, end) {
4476 if (this.patterns.color.test(attr)) {
4478 for (var i = 0, len = start.length; i < len; ++i) {
4479 val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
4482 val = 'rgb(' + Math.floor(val[0]) + ',' + Math.floor(val[1]) + ',' + Math.floor(val[2]) + ')';
4485 val = superclass.doMethod.call(this, attr, start, end);
4491 proto.setRuntimeAttribute = function(attr) {
4492 superclass.setRuntimeAttribute.call(this, attr);
4494 if (this.patterns.color.test(attr)) {
4495 var attributes = this.attributes;
4496 var start = this.parseColor(this.runtimeAttributes[attr].start);
4497 var end = this.parseColor(this.runtimeAttributes[attr].end);
4499 if (typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined') {
4500 end = this.parseColor(attributes[attr].by);
4502 for (var i = 0, len = start.length; i < len; ++i) {
4503 end[i] = start[i] + end[i];
4507 this.runtimeAttributes[attr].start = start;
4508 this.runtimeAttributes[attr].end = end;
4514 * Portions of this file are based on pieces of Yahoo User Interface Library
4515 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4516 * YUI licensed under the BSD License:
4517 * http://developer.yahoo.net/yui/license.txt
4518 * <script type="text/javascript">
4524 easeNone: function (t, b, c, d) {
4525 return c * t / d + b;
4529 easeIn: function (t, b, c, d) {
4530 return c * (t /= d) * t + b;
4534 easeOut: function (t, b, c, d) {
4535 return -c * (t /= d) * (t - 2) + b;
4539 easeBoth: function (t, b, c, d) {
4540 if ((t /= d / 2) < 1) {
4541 return c / 2 * t * t + b;
4544 return -c / 2 * ((--t) * (t - 2) - 1) + b;
4548 easeInStrong: function (t, b, c, d) {
4549 return c * (t /= d) * t * t * t + b;
4553 easeOutStrong: function (t, b, c, d) {
4554 return -c * ((t = t / d - 1) * t * t * t - 1) + b;
4558 easeBothStrong: function (t, b, c, d) {
4559 if ((t /= d / 2) < 1) {
4560 return c / 2 * t * t * t * t + b;
4563 return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
4568 elasticIn: function (t, b, c, d, a, p) {
4572 if ((t /= d) == 1) {
4579 if (!a || a < Math.abs(c)) {
4584 var s = p / (2 * Math.PI) * Math.asin(c / a);
4587 return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
4591 elasticOut: function (t, b, c, d, a, p) {
4595 if ((t /= d) == 1) {
4602 if (!a || a < Math.abs(c)) {
4607 var s = p / (2 * Math.PI) * Math.asin(c / a);
4610 return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
4614 elasticBoth: function (t, b, c, d, a, p) {
4619 if ((t /= d / 2) == 2) {
4627 if (!a || a < Math.abs(c)) {
4632 var s = p / (2 * Math.PI) * Math.asin(c / a);
4636 return -.5 * (a * Math.pow(2, 10 * (t -= 1)) *
4637 Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
4639 return a * Math.pow(2, -10 * (t -= 1)) *
4640 Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
4645 backIn: function (t, b, c, d, s) {
4646 if (typeof s == 'undefined') {
4649 return c * (t /= d) * t * ((s + 1) * t - s) + b;
4653 backOut: function (t, b, c, d, s) {
4654 if (typeof s == 'undefined') {
4657 return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
4661 backBoth: function (t, b, c, d, s) {
4662 if (typeof s == 'undefined') {
4666 if ((t /= d / 2 ) < 1) {
4667 return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
4669 return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
4673 bounceIn: function (t, b, c, d) {
4674 return c - Roo.lib.Easing.bounceOut(d - t, 0, c, d) + b;
4678 bounceOut: function (t, b, c, d) {
4679 if ((t /= d) < (1 / 2.75)) {
4680 return c * (7.5625 * t * t) + b;
4681 } else if (t < (2 / 2.75)) {
4682 return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
4683 } else if (t < (2.5 / 2.75)) {
4684 return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
4686 return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
4690 bounceBoth: function (t, b, c, d) {
4692 return Roo.lib.Easing.bounceIn(t * 2, 0, c, d) * .5 + b;
4694 return Roo.lib.Easing.bounceOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
4697 * Portions of this file are based on pieces of Yahoo User Interface Library
4698 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4699 * YUI licensed under the BSD License:
4700 * http://developer.yahoo.net/yui/license.txt
4701 * <script type="text/javascript">
4705 Roo.lib.Motion = function(el, attributes, duration, method) {
4707 Roo.lib.Motion.superclass.constructor.call(this, el, attributes, duration, method);
4711 Roo.extend(Roo.lib.Motion, Roo.lib.ColorAnim);
4715 var superclass = Y.Motion.superclass;
4716 var proto = Y.Motion.prototype;
4718 proto.toString = function() {
4719 var el = this.getEl();
4720 var id = el.id || el.tagName;
4721 return ("Motion " + id);
4724 proto.patterns.points = /^points$/i;
4726 proto.setAttribute = function(attr, val, unit) {
4727 if (this.patterns.points.test(attr)) {
4728 unit = unit || 'px';
4729 superclass.setAttribute.call(this, 'left', val[0], unit);
4730 superclass.setAttribute.call(this, 'top', val[1], unit);
4732 superclass.setAttribute.call(this, attr, val, unit);
4736 proto.getAttribute = function(attr) {
4737 if (this.patterns.points.test(attr)) {
4739 superclass.getAttribute.call(this, 'left'),
4740 superclass.getAttribute.call(this, 'top')
4743 val = superclass.getAttribute.call(this, attr);
4749 proto.doMethod = function(attr, start, end) {
4752 if (this.patterns.points.test(attr)) {
4753 var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;
4754 val = Y.Bezier.getPosition(this.runtimeAttributes[attr], t);
4756 val = superclass.doMethod.call(this, attr, start, end);
4761 proto.setRuntimeAttribute = function(attr) {
4762 if (this.patterns.points.test(attr)) {
4763 var el = this.getEl();
4764 var attributes = this.attributes;
4766 var control = attributes['points']['control'] || [];
4770 if (control.length > 0 && !(control[0] instanceof Array)) {
4771 control = [control];
4774 for (i = 0,len = control.length; i < len; ++i) {
4775 tmp[i] = control[i];
4780 Roo.fly(el).position();
4782 if (isset(attributes['points']['from'])) {
4783 Roo.lib.Dom.setXY(el, attributes['points']['from']);
4786 Roo.lib.Dom.setXY(el, Roo.lib.Dom.getXY(el));
4789 start = this.getAttribute('points');
4792 if (isset(attributes['points']['to'])) {
4793 end = translateValues.call(this, attributes['points']['to'], start);
4795 var pageXY = Roo.lib.Dom.getXY(this.getEl());
4796 for (i = 0,len = control.length; i < len; ++i) {
4797 control[i] = translateValues.call(this, control[i], start);
4801 } else if (isset(attributes['points']['by'])) {
4802 end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1] ];
4804 for (i = 0,len = control.length; i < len; ++i) {
4805 control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
4809 this.runtimeAttributes[attr] = [start];
4811 if (control.length > 0) {
4812 this.runtimeAttributes[attr] = this.runtimeAttributes[attr].concat(control);
4815 this.runtimeAttributes[attr][this.runtimeAttributes[attr].length] = end;
4818 superclass.setRuntimeAttribute.call(this, attr);
4822 var translateValues = function(val, start) {
4823 var pageXY = Roo.lib.Dom.getXY(this.getEl());
4824 val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
4829 var isset = function(prop) {
4830 return (typeof prop !== 'undefined');
4834 * Portions of this file are based on pieces of Yahoo User Interface Library
4835 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4836 * YUI licensed under the BSD License:
4837 * http://developer.yahoo.net/yui/license.txt
4838 * <script type="text/javascript">
4842 Roo.lib.Scroll = function(el, attributes, duration, method) {
4844 Roo.lib.Scroll.superclass.constructor.call(this, el, attributes, duration, method);
4848 Roo.extend(Roo.lib.Scroll, Roo.lib.ColorAnim);
4852 var superclass = Y.Scroll.superclass;
4853 var proto = Y.Scroll.prototype;
4855 proto.toString = function() {
4856 var el = this.getEl();
4857 var id = el.id || el.tagName;
4858 return ("Scroll " + id);
4861 proto.doMethod = function(attr, start, end) {
4864 if (attr == 'scroll') {
4866 this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
4867 this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
4871 val = superclass.doMethod.call(this, attr, start, end);
4876 proto.getAttribute = function(attr) {
4878 var el = this.getEl();
4880 if (attr == 'scroll') {
4881 val = [ el.scrollLeft, el.scrollTop ];
4883 val = superclass.getAttribute.call(this, attr);
4889 proto.setAttribute = function(attr, val, unit) {
4890 var el = this.getEl();
4892 if (attr == 'scroll') {
4893 el.scrollLeft = val[0];
4894 el.scrollTop = val[1];
4896 superclass.setAttribute.call(this, attr, val, unit);
4902 * Ext JS Library 1.1.1
4903 * Copyright(c) 2006-2007, Ext JS, LLC.
4905 * Originally Released Under LGPL - original licence link has changed is not relivant.
4908 * <script type="text/javascript">
4912 // nasty IE9 hack - what a pile of crap that is..
4914 if (typeof Range != "undefined" && typeof Range.prototype.createContextualFragment == "undefined") {
4915 Range.prototype.createContextualFragment = function (html) {
4916 var doc = window.document;
4917 var container = doc.createElement("div");
4918 container.innerHTML = html;
4919 var frag = doc.createDocumentFragment(), n;
4920 while ((n = container.firstChild)) {
4921 frag.appendChild(n);
4928 * @class Roo.DomHelper
4929 * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
4930 * 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>.
4933 Roo.DomHelper = function(){
4934 var tempTableEl = null;
4935 var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
4936 var tableRe = /^table|tbody|tr|td$/i;
4938 // build as innerHTML where available
4940 var createHtml = function(o){
4941 if(typeof o == 'string'){
4950 if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") { continue; }
4951 if(attr == "style"){
4953 if(typeof s == "function"){
4956 if(typeof s == "string"){
4957 b += ' style="' + s + '"';
4958 }else if(typeof s == "object"){
4961 if(typeof s[key] != "function"){
4962 b += key + ":" + s[key] + ";";
4969 b += ' class="' + o["cls"] + '"';
4970 }else if(attr == "htmlFor"){
4971 b += ' for="' + o["htmlFor"] + '"';
4973 b += " " + attr + '="' + o[attr] + '"';
4977 if(emptyTags.test(o.tag)){
4981 var cn = o.children || o.cn;
4983 //http://bugs.kde.org/show_bug.cgi?id=71506
4984 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
4985 for(var i = 0, len = cn.length; i < len; i++) {
4986 b += createHtml(cn[i], b);
4989 b += createHtml(cn, b);
4995 b += "</" + o.tag + ">";
5002 var createDom = function(o, parentNode){
5004 // defininition craeted..
5006 if (o.ns && o.ns != 'html') {
5008 if (o.xmlns && typeof(xmlns[o.ns]) == 'undefined') {
5009 xmlns[o.ns] = o.xmlns;
5012 if (typeof(xmlns[o.ns]) == 'undefined') {
5013 console.log("Trying to create namespace element " + o.ns + ", however no xmlns was sent to builder previously");
5019 if (typeof(o) == 'string') {
5020 return parentNode.appendChild(document.createTextNode(o));
5022 o.tag = o.tag || div;
5023 if (o.ns && Roo.isIE) {
5025 o.tag = o.ns + ':' + o.tag;
5028 var el = ns ? document.createElementNS( ns, o.tag||'div') : document.createElement(o.tag||'div');
5029 var useSet = el.setAttribute ? true : false; // In IE some elements don't have setAttribute
5032 if(attr == "tag" || attr == "ns" ||attr == "xmlns" ||attr == "children" || attr == "cn" || attr == "html" ||
5033 attr == "style" || typeof o[attr] == "function") { continue; }
5035 if(attr=="cls" && Roo.isIE){
5036 el.className = o["cls"];
5038 if(useSet) { el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);}
5044 Roo.DomHelper.applyStyles(el, o.style);
5045 var cn = o.children || o.cn;
5047 //http://bugs.kde.org/show_bug.cgi?id=71506
5048 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
5049 for(var i = 0, len = cn.length; i < len; i++) {
5050 createDom(cn[i], el);
5057 el.innerHTML = o.html;
5060 parentNode.appendChild(el);
5065 var ieTable = function(depth, s, h, e){
5066 tempTableEl.innerHTML = [s, h, e].join('');
5067 var i = -1, el = tempTableEl;
5068 while(++i < depth && el.firstChild){
5074 // kill repeat to save bytes
5078 tbe = '</tbody>'+te,
5084 * Nasty code for IE's broken table implementation
5086 var insertIntoTable = function(tag, where, el, html){
5088 tempTableEl = document.createElement('div');
5093 if(where == 'afterbegin' || where == 'beforeend'){ // INTO a TD
5096 if(where == 'beforebegin'){
5100 before = el.nextSibling;
5103 node = ieTable(4, trs, html, tre);
5105 else if(tag == 'tr'){
5106 if(where == 'beforebegin'){
5109 node = ieTable(3, tbs, html, tbe);
5110 } else if(where == 'afterend'){
5111 before = el.nextSibling;
5113 node = ieTable(3, tbs, html, tbe);
5114 } else{ // INTO a TR
5115 if(where == 'afterbegin'){
5116 before = el.firstChild;
5118 node = ieTable(4, trs, html, tre);
5120 } else if(tag == 'tbody'){
5121 if(where == 'beforebegin'){
5124 node = ieTable(2, ts, html, te);
5125 } else if(where == 'afterend'){
5126 before = el.nextSibling;
5128 node = ieTable(2, ts, html, te);
5130 if(where == 'afterbegin'){
5131 before = el.firstChild;
5133 node = ieTable(3, tbs, html, tbe);
5136 if(where == 'beforebegin' || where == 'afterend'){ // OUTSIDE the table
5139 if(where == 'afterbegin'){
5140 before = el.firstChild;
5142 node = ieTable(2, ts, html, te);
5144 el.insertBefore(node, before);
5148 // this is a bit like the react update code...
5151 var updateNode = function(from, to)
5153 // should we handle non-standard elements?
5155 if (from.nodeType != to.nodeType) {
5156 from.parentNode.replaceChild(to, from);
5159 if (from.nodeType == 3) {
5160 // assume it's text?!
5161 if (from.data == to.data) {
5164 from.data = to.data;
5168 // assume 'to' doesnt have '1/3 nodetypes!
5169 if (from.nodeType !=1 || from.tagName != to.tagName) {
5170 from.parentNode.replaceChild(to, from);
5173 // compare attributes
5174 var ar = Array.from(from.attributes);
5175 for(var i = 0; i< ar.length;i++) {
5176 if (to.hasAttribute(ar[i].name)) {
5179 from.removeAttribute(ar[i].name);
5182 for(var i = 0; i< ar.length;i++) {
5183 if (from.getAttribute(ar[i].name) == to.getAttribute(ar[i].name)) {
5186 from.setAttribute(ar[i].name, to.getAttribute(ar[i].name));
5189 var far = Array.from(from.childNodes);
5190 var tar = Array.from(to.childNodes);
5191 // if the lengths are different.. then it's probably a editable content change, rather than
5192 // a change of the block definition..
5193 if (from.innerHTML == to.innerHTML) {
5196 if (far.length != tar.length) {
5197 from.innerHTML = to.innerHTML;
5201 for(var i = 0; i < far.length; i++) {
5202 updateNode(far[i], tar[i]);
5211 /** True to force the use of DOM instead of html fragments @type Boolean */
5215 * Returns the markup for the passed Element(s) config
5216 * @param {Object} o The Dom object spec (and children)
5219 markup : function(o){
5220 return createHtml(o);
5224 * Applies a style specification to an element
5225 * @param {String/HTMLElement} el The element to apply styles to
5226 * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
5227 * a function which returns such a specification.
5229 applyStyles : function(el, styles){
5232 if(typeof styles == "string"){
5233 var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
5235 while ((matches = re.exec(styles)) != null){
5236 el.setStyle(matches[1], matches[2]);
5238 }else if (typeof styles == "object"){
5239 for (var style in styles){
5240 el.setStyle(style, styles[style]);
5242 }else if (typeof styles == "function"){
5243 Roo.DomHelper.applyStyles(el, styles.call());
5249 * Inserts an HTML fragment into the Dom
5250 * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
5251 * @param {HTMLElement} el The context element
5252 * @param {String} html The HTML fragmenet
5253 * @return {HTMLElement} The new node
5255 insertHtml : function(where, el, html){
5256 where = where.toLowerCase();
5257 if(el.insertAdjacentHTML){
5258 if(tableRe.test(el.tagName)){
5260 if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
5266 el.insertAdjacentHTML('BeforeBegin', html);
5267 return el.previousSibling;
5269 el.insertAdjacentHTML('AfterBegin', html);
5270 return el.firstChild;
5272 el.insertAdjacentHTML('BeforeEnd', html);
5273 return el.lastChild;
5275 el.insertAdjacentHTML('AfterEnd', html);
5276 return el.nextSibling;
5278 throw 'Illegal insertion point -> "' + where + '"';
5280 var range = el.ownerDocument.createRange();
5284 range.setStartBefore(el);
5285 frag = range.createContextualFragment(html);
5286 el.parentNode.insertBefore(frag, el);
5287 return el.previousSibling;
5290 range.setStartBefore(el.firstChild);
5291 frag = range.createContextualFragment(html);
5292 el.insertBefore(frag, el.firstChild);
5293 return el.firstChild;
5295 el.innerHTML = html;
5296 return el.firstChild;
5300 range.setStartAfter(el.lastChild);
5301 frag = range.createContextualFragment(html);
5302 el.appendChild(frag);
5303 return el.lastChild;
5305 el.innerHTML = html;
5306 return el.lastChild;
5309 range.setStartAfter(el);
5310 frag = range.createContextualFragment(html);
5311 el.parentNode.insertBefore(frag, el.nextSibling);
5312 return el.nextSibling;
5314 throw 'Illegal insertion point -> "' + where + '"';
5318 * Creates new Dom element(s) and inserts them before el
5319 * @param {String/HTMLElement/Element} el The context element
5320 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5321 * @param {Boolean} returnElement (optional) true to return a Roo.Element
5322 * @return {HTMLElement/Roo.Element} The new node
5324 insertBefore : function(el, o, returnElement){
5325 return this.doInsert(el, o, returnElement, "beforeBegin");
5329 * Creates new Dom element(s) and inserts them after el
5330 * @param {String/HTMLElement/Element} el The context element
5331 * @param {Object} o The Dom object spec (and children)
5332 * @param {Boolean} returnElement (optional) true to return a Roo.Element
5333 * @return {HTMLElement/Roo.Element} The new node
5335 insertAfter : function(el, o, returnElement){
5336 return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
5340 * Creates new Dom element(s) and inserts them as the first child of el
5341 * @param {String/HTMLElement/Element} el The context element
5342 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5343 * @param {Boolean} returnElement (optional) true to return a Roo.Element
5344 * @return {HTMLElement/Roo.Element} The new node
5346 insertFirst : function(el, o, returnElement){
5347 return this.doInsert(el, o, returnElement, "afterBegin");
5351 doInsert : function(el, o, returnElement, pos, sibling){
5352 el = Roo.getDom(el);
5354 if(this.useDom || o.ns){
5355 newNode = createDom(o, null);
5356 el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
5358 var html = createHtml(o);
5359 newNode = this.insertHtml(pos, el, html);
5361 return returnElement ? Roo.get(newNode, true) : newNode;
5365 * Creates new Dom element(s) and appends them to el
5366 * @param {String/HTMLElement/Element} el The context element
5367 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5368 * @param {Boolean} returnElement (optional) true to return a Roo.Element
5369 * @return {HTMLElement/Roo.Element} The new node
5371 append : function(el, o, returnElement){
5372 el = Roo.getDom(el);
5374 if(this.useDom || o.ns){
5375 newNode = createDom(o, null);
5376 el.appendChild(newNode);
5378 var html = createHtml(o);
5379 newNode = this.insertHtml("beforeEnd", el, html);
5381 return returnElement ? Roo.get(newNode, true) : newNode;
5385 * Creates new Dom element(s) and overwrites the contents of el with them
5386 * @param {String/HTMLElement/Element} el The context element
5387 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5388 * @param {Boolean} returnElement (optional) true to return a Roo.Element
5389 * @return {HTMLElement/Roo.Element} The new node
5391 overwrite : function(el, o, returnElement)
5393 el = Roo.getDom(el);
5396 while (el.childNodes.length) {
5397 el.removeChild(el.firstChild);
5401 el.innerHTML = createHtml(o);
5404 return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
5408 * Creates a new Roo.DomHelper.Template from the Dom object spec
5409 * @param {Object} o The Dom object spec (and children)
5410 * @return {Roo.DomHelper.Template} The new template
5412 createTemplate : function(o){
5413 var html = createHtml(o);
5414 return new Roo.Template(html);
5417 * Updates the first element with the spec from the o (replacing if necessary)
5418 * This iterates through the children, and updates attributes / children etc..
5419 * @param {String/HTMLElement/Element} el The context element
5420 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5423 update : function(el, o)
5425 updateNode(Roo.getDom(el), createDom(o));
5434 * Ext JS Library 1.1.1
5435 * Copyright(c) 2006-2007, Ext JS, LLC.
5437 * Originally Released Under LGPL - original licence link has changed is not relivant.
5440 * <script type="text/javascript">
5444 * @class Roo.Template
5445 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
5446 * For a list of available format functions, see {@link Roo.util.Format}.<br />
5449 var t = new Roo.Template({
5450 html : '<div name="{id}">' +
5451 '<span class="{cls}">{name:trim} {someval:this.myformat}{value:ellipsis(10)}</span>' +
5453 myformat: function (value, allValues) {
5454 return 'XX' + value;
5457 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
5459 * For more information see this blog post with examples:
5460 * <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
5461 - Create Elements using DOM, HTML fragments and Templates</a>.
5463 * @param {Object} cfg - Configuration object.
5465 Roo.Template = function(cfg){
5467 if(cfg instanceof Array){
5469 }else if(arguments.length > 1){
5470 cfg = Array.prototype.join.call(arguments, "");
5474 if (typeof(cfg) == 'object') {
5485 Roo.Template.prototype = {
5488 * @cfg {Function} onLoad Called after the template has been loaded and complied (usually from a remove source)
5494 * @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..
5495 * it should be fixed so that template is observable...
5499 * @cfg {String} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
5507 * Returns an HTML fragment of this template with the specified values applied.
5508 * @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'})
5509 * @return {String} The HTML fragment
5514 applyTemplate : function(values){
5515 //Roo.log(["applyTemplate", values]);
5519 return this.compiled(values);
5521 var useF = this.disableFormats !== true;
5522 var fm = Roo.util.Format, tpl = this;
5523 var fn = function(m, name, format, args){
5525 if(format.substr(0, 5) == "this."){
5526 return tpl.call(format.substr(5), values[name], values);
5529 // quoted values are required for strings in compiled templates,
5530 // but for non compiled we need to strip them
5531 // quoted reversed for jsmin
5532 var re = /^\s*['"](.*)["']\s*$/;
5533 args = args.split(',');
5534 for(var i = 0, len = args.length; i < len; i++){
5535 args[i] = args[i].replace(re, "$1");
5537 args = [values[name]].concat(args);
5539 args = [values[name]];
5541 return fm[format].apply(fm, args);
5544 return values[name] !== undefined ? values[name] : "";
5547 return this.html.replace(this.re, fn);
5565 this.loading = true;
5566 this.compiled = false;
5568 var cx = new Roo.data.Connection();
5572 success : function (response) {
5576 _t.set(response.responseText,true);
5582 failure : function(response) {
5583 Roo.log("Template failed to load from " + _t.url);
5590 * Sets the HTML used as the template and optionally compiles it.
5591 * @param {String} html
5592 * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
5593 * @return {Roo.Template} this
5595 set : function(html, compile){
5597 this.compiled = false;
5605 * True to disable format functions (defaults to false)
5608 disableFormats : false,
5611 * The regular expression used to match template variables
5615 re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
5618 * Compiles the template into an internal function, eliminating the RegEx overhead.
5619 * @return {Roo.Template} this
5621 compile : function(){
5622 var fm = Roo.util.Format;
5623 var useF = this.disableFormats !== true;
5624 var sep = Roo.isGecko ? "+" : ",";
5625 var fn = function(m, name, format, args){
5627 args = args ? ',' + args : "";
5628 if(format.substr(0, 5) != "this."){
5629 format = "fm." + format + '(';
5631 format = 'this.call("'+ format.substr(5) + '", ';
5635 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
5637 return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
5640 // branched to use + in gecko and [].join() in others
5642 body = "this.compiled = function(values){ return '" +
5643 this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
5646 body = ["this.compiled = function(values){ return ['"];
5647 body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
5648 body.push("'].join('');};");
5649 body = body.join('');
5659 // private function used to call members
5660 call : function(fnName, value, allValues){
5661 return this[fnName](value, allValues);
5665 * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
5666 * @param {String/HTMLElement/Roo.Element} el The context element
5667 * @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'})
5668 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
5669 * @return {HTMLElement/Roo.Element} The new node or Element
5671 insertFirst: function(el, values, returnElement){
5672 return this.doInsert('afterBegin', el, values, returnElement);
5676 * Applies the supplied values to the template and inserts the new node(s) before el.
5677 * @param {String/HTMLElement/Roo.Element} el The context element
5678 * @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'})
5679 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
5680 * @return {HTMLElement/Roo.Element} The new node or Element
5682 insertBefore: function(el, values, returnElement){
5683 return this.doInsert('beforeBegin', el, values, returnElement);
5687 * Applies the supplied values to the template and inserts the new node(s) after el.
5688 * @param {String/HTMLElement/Roo.Element} el The context element
5689 * @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'})
5690 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
5691 * @return {HTMLElement/Roo.Element} The new node or Element
5693 insertAfter : function(el, values, returnElement){
5694 return this.doInsert('afterEnd', el, values, returnElement);
5698 * Applies the supplied values to the template and appends the new node(s) to el.
5699 * @param {String/HTMLElement/Roo.Element} el The context element
5700 * @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'})
5701 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
5702 * @return {HTMLElement/Roo.Element} The new node or Element
5704 append : function(el, values, returnElement){
5705 return this.doInsert('beforeEnd', el, values, returnElement);
5708 doInsert : function(where, el, values, returnEl){
5709 el = Roo.getDom(el);
5710 var newNode = Roo.DomHelper.insertHtml(where, el, this.applyTemplate(values));
5711 return returnEl ? Roo.get(newNode, true) : newNode;
5715 * Applies the supplied values to the template and overwrites the content of el with the new node(s).
5716 * @param {String/HTMLElement/Roo.Element} el The context element
5717 * @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'})
5718 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
5719 * @return {HTMLElement/Roo.Element} The new node or Element
5721 overwrite : function(el, values, returnElement){
5722 el = Roo.getDom(el);
5723 el.innerHTML = this.applyTemplate(values);
5724 return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
5728 * Alias for {@link #applyTemplate}
5731 Roo.Template.prototype.apply = Roo.Template.prototype.applyTemplate;
5734 Roo.DomHelper.Template = Roo.Template;
5737 * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
5738 * @param {String/HTMLElement} el A DOM element or its id
5739 * @returns {Roo.Template} The created template
5742 Roo.Template.from = function(el){
5743 el = Roo.getDom(el);
5744 return new Roo.Template(el.value || el.innerHTML);
5747 * Ext JS Library 1.1.1
5748 * Copyright(c) 2006-2007, Ext JS, LLC.
5750 * Originally Released Under LGPL - original licence link has changed is not relivant.
5753 * <script type="text/javascript">
5758 * This is code is also distributed under MIT license for use
5759 * with jQuery and prototype JavaScript libraries.
5762 * @class Roo.DomQuery
5763 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).
5765 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>
5768 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.
5770 <h4>Element Selectors:</h4>
5772 <li> <b>*</b> any element</li>
5773 <li> <b>E</b> an element with the tag E</li>
5774 <li> <b>E F</b> All descendent elements of E that have the tag F</li>
5775 <li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>
5776 <li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>
5777 <li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>
5779 <h4>Attribute Selectors:</h4>
5780 <p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>
5782 <li> <b>E[foo]</b> has an attribute "foo"</li>
5783 <li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>
5784 <li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>
5785 <li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>
5786 <li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>
5787 <li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>
5788 <li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>
5790 <h4>Pseudo Classes:</h4>
5792 <li> <b>E:first-child</b> E is the first child of its parent</li>
5793 <li> <b>E:last-child</b> E is the last child of its parent</li>
5794 <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>
5795 <li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>
5796 <li> <b>E:nth-child(even)</b> E is an even child of its parent</li>
5797 <li> <b>E:only-child</b> E is the only child of its parent</li>
5798 <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>
5799 <li> <b>E:first</b> the first E in the resultset</li>
5800 <li> <b>E:last</b> the last E in the resultset</li>
5801 <li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>
5802 <li> <b>E:odd</b> shortcut for :nth-child(odd)</li>
5803 <li> <b>E:even</b> shortcut for :nth-child(even)</li>
5804 <li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>
5805 <li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>
5806 <li> <b>E:not(S)</b> an E element that does not match simple selector S</li>
5807 <li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>
5808 <li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>
5809 <li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>
5811 <h4>CSS Value Selectors:</h4>
5813 <li> <b>E{display=none}</b> css value "display" that equals "none"</li>
5814 <li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>
5815 <li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>
5816 <li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>
5817 <li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
5818 <li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
5822 Roo.DomQuery = function(){
5823 var cache = {}, simpleCache = {}, valueCache = {};
5824 var nonSpace = /\S/;
5825 var trimRe = /^\s+|\s+$/g;
5826 var tplRe = /\{(\d+)\}/g;
5827 var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
5828 var tagTokenRe = /^(#)?([\w-\*]+)/;
5829 var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;
5831 function child(p, index){
5833 var n = p.firstChild;
5835 if(n.nodeType == 1){
5846 while((n = n.nextSibling) && n.nodeType != 1);
5851 while((n = n.previousSibling) && n.nodeType != 1);
5855 function children(d){
5856 var n = d.firstChild, ni = -1;
5858 var nx = n.nextSibling;
5859 if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
5869 function byClassName(c, a, v){
5873 var r = [], ri = -1, cn;
5874 for(var i = 0, ci; ci = c[i]; i++){
5878 ( (ci instanceof SVGElement) ? ci.className.baseVal : ci.className)
5879 +' ').indexOf(v) != -1){
5886 function attrValue(n, attr){
5887 if(!n.tagName && typeof n.length != "undefined"){
5896 if(attr == "class" || attr == "className"){
5897 return (n instanceof SVGElement) ? n.className.baseVal : n.className;
5899 return n.getAttribute(attr) || n[attr];
5903 function getNodes(ns, mode, tagName){
5904 var result = [], ri = -1, cs;
5908 tagName = tagName || "*";
5909 if(typeof ns.getElementsByTagName != "undefined"){
5913 for(var i = 0, ni; ni = ns[i]; i++){
5914 cs = ni.getElementsByTagName(tagName);
5915 for(var j = 0, ci; ci = cs[j]; j++){
5919 }else if(mode == "/" || mode == ">"){
5920 var utag = tagName.toUpperCase();
5921 for(var i = 0, ni, cn; ni = ns[i]; i++){
5922 cn = ni.children || ni.childNodes;
5923 for(var j = 0, cj; cj = cn[j]; j++){
5924 if(cj.nodeName == utag || cj.nodeName == tagName || tagName == '*'){
5929 }else if(mode == "+"){
5930 var utag = tagName.toUpperCase();
5931 for(var i = 0, n; n = ns[i]; i++){
5932 while((n = n.nextSibling) && n.nodeType != 1);
5933 if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
5937 }else if(mode == "~"){
5938 for(var i = 0, n; n = ns[i]; i++){
5939 while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
5948 function concat(a, b){
5952 for(var i = 0, l = b.length; i < l; i++){
5958 function byTag(cs, tagName){
5959 if(cs.tagName || cs == document){
5965 var r = [], ri = -1;
5966 tagName = tagName.toLowerCase();
5967 for(var i = 0, ci; ci = cs[i]; i++){
5968 if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
5975 function byId(cs, attr, id){
5976 if(cs.tagName || cs == document){
5982 var r = [], ri = -1;
5983 for(var i = 0,ci; ci = cs[i]; i++){
5984 if(ci && ci.id == id){
5992 function byAttribute(cs, attr, value, op, custom){
5993 var r = [], ri = -1, st = custom=="{";
5994 var f = Roo.DomQuery.operators[op];
5995 for(var i = 0, ci; ci = cs[i]; i++){
5998 a = Roo.DomQuery.getStyle(ci, attr);
6000 else if(attr == "class" || attr == "className"){
6001 a = (ci instanceof SVGElement) ? ci.className.baseVal : ci.className;
6002 }else if(attr == "for"){
6004 }else if(attr == "href"){
6005 a = ci.getAttribute("href", 2);
6007 a = ci.getAttribute(attr);
6009 if((f && f(a, value)) || (!f && a)){
6016 function byPseudo(cs, name, value){
6017 return Roo.DomQuery.pseudos[name](cs, value);
6020 // This is for IE MSXML which does not support expandos.
6021 // IE runs the same speed using setAttribute, however FF slows way down
6022 // and Safari completely fails so they need to continue to use expandos.
6023 var isIE = window.ActiveXObject ? true : false;
6025 // this eval is stop the compressor from
6026 // renaming the variable to something shorter
6028 /** eval:var:batch */
6033 function nodupIEXml(cs){
6035 cs[0].setAttribute("_nodup", d);
6037 for(var i = 1, len = cs.length; i < len; i++){
6039 if(!c.getAttribute("_nodup") != d){
6040 c.setAttribute("_nodup", d);
6044 for(var i = 0, len = cs.length; i < len; i++){
6045 cs[i].removeAttribute("_nodup");
6054 var len = cs.length, c, i, r = cs, cj, ri = -1;
6055 if(!len || typeof cs.nodeType != "undefined" || len == 1){
6058 if(isIE && typeof cs[0].selectSingleNode != "undefined"){
6059 return nodupIEXml(cs);
6063 for(i = 1; c = cs[i]; i++){
6068 for(var j = 0; j < i; j++){
6071 for(j = i+1; cj = cs[j]; j++){
6083 function quickDiffIEXml(c1, c2){
6085 for(var i = 0, len = c1.length; i < len; i++){
6086 c1[i].setAttribute("_qdiff", d);
6089 for(var i = 0, len = c2.length; i < len; i++){
6090 if(c2[i].getAttribute("_qdiff") != d){
6091 r[r.length] = c2[i];
6094 for(var i = 0, len = c1.length; i < len; i++){
6095 c1[i].removeAttribute("_qdiff");
6100 function quickDiff(c1, c2){
6101 var len1 = c1.length;
6105 if(isIE && c1[0].selectSingleNode){
6106 return quickDiffIEXml(c1, c2);
6109 for(var i = 0; i < len1; i++){
6113 for(var i = 0, len = c2.length; i < len; i++){
6114 if(c2[i]._qdiff != d){
6115 r[r.length] = c2[i];
6121 function quickId(ns, mode, root, id){
6123 var d = root.ownerDocument || root;
6124 return d.getElementById(id);
6126 ns = getNodes(ns, mode, "*");
6127 return byId(ns, null, id);
6131 getStyle : function(el, name){
6132 return Roo.fly(el).getStyle(name);
6135 * Compiles a selector/xpath query into a reusable function. The returned function
6136 * takes one parameter "root" (optional), which is the context node from where the query should start.
6137 * @param {String} selector The selector/xpath query
6138 * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
6139 * @return {Function}
6141 compile : function(path, type){
6142 type = type || "select";
6144 var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"];
6145 var q = path, mode, lq;
6146 var tk = Roo.DomQuery.matchers;
6147 var tklen = tk.length;
6150 // accept leading mode switch
6151 var lmode = q.match(modeRe);
6152 if(lmode && lmode[1]){
6153 fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
6154 q = q.replace(lmode[1], "");
6156 // strip leading slashes
6157 while(path.substr(0, 1)=="/"){
6158 path = path.substr(1);
6161 while(q && lq != q){
6163 var tm = q.match(tagTokenRe);
6164 if(type == "select"){
6167 fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
6169 fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
6171 q = q.replace(tm[0], "");
6172 }else if(q.substr(0, 1) != '@'){
6173 fn[fn.length] = 'n = getNodes(n, mode, "*");';
6178 fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
6180 fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
6182 q = q.replace(tm[0], "");
6185 while(!(mm = q.match(modeRe))){
6186 var matched = false;
6187 for(var j = 0; j < tklen; j++){
6189 var m = q.match(t.re);
6191 fn[fn.length] = t.select.replace(tplRe, function(x, i){
6194 q = q.replace(m[0], "");
6199 // prevent infinite loop on bad selector
6201 throw 'Error parsing selector, parsing failed at "' + q + '"';
6205 fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
6206 q = q.replace(mm[1], "");
6209 fn[fn.length] = "return nodup(n);\n}";
6212 * list of variables that need from compression as they are used by eval.
6222 * eval:var:byClassName
6224 * eval:var:byAttribute
6225 * eval:var:attrValue
6233 * Selects a group of elements.
6234 * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
6235 * @param {Node} root (optional) The start of the query (defaults to document).
6238 select : function(path, root, type){
6239 if(!root || root == document){
6242 if(typeof root == "string"){
6243 root = document.getElementById(root);
6245 var paths = path.split(",");
6247 for(var i = 0, len = paths.length; i < len; i++){
6248 var p = paths[i].replace(trimRe, "");
6250 cache[p] = Roo.DomQuery.compile(p);
6252 throw p + " is not a valid selector";
6255 var result = cache[p](root);
6256 if(result && result != document){
6257 results = results.concat(result);
6260 if(paths.length > 1){
6261 return nodup(results);
6267 * Selects a single element.
6268 * @param {String} selector The selector/xpath query
6269 * @param {Node} root (optional) The start of the query (defaults to document).
6272 selectNode : function(path, root){
6273 return Roo.DomQuery.select(path, root)[0];
6277 * Selects the value of a node, optionally replacing null with the defaultValue.
6278 * @param {String} selector The selector/xpath query
6279 * @param {Node} root (optional) The start of the query (defaults to document).
6280 * @param {String} defaultValue
6282 selectValue : function(path, root, defaultValue){
6283 path = path.replace(trimRe, "");
6284 if(!valueCache[path]){
6285 valueCache[path] = Roo.DomQuery.compile(path, "select");
6287 var n = valueCache[path](root);
6288 n = n[0] ? n[0] : n;
6289 var v = (n && n.firstChild ? n.firstChild.nodeValue : null);
6290 return ((v === null||v === undefined||v==='') ? defaultValue : v);
6294 * Selects the value of a node, parsing integers and floats.
6295 * @param {String} selector The selector/xpath query
6296 * @param {Node} root (optional) The start of the query (defaults to document).
6297 * @param {Number} defaultValue
6300 selectNumber : function(path, root, defaultValue){
6301 var v = Roo.DomQuery.selectValue(path, root, defaultValue || 0);
6302 return parseFloat(v);
6306 * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
6307 * @param {String/HTMLElement/Array} el An element id, element or array of elements
6308 * @param {String} selector The simple selector to test
6311 is : function(el, ss){
6312 if(typeof el == "string"){
6313 el = document.getElementById(el);
6315 var isArray = (el instanceof Array);
6316 var result = Roo.DomQuery.filter(isArray ? el : [el], ss);
6317 return isArray ? (result.length == el.length) : (result.length > 0);
6321 * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
6322 * @param {Array} el An array of elements to filter
6323 * @param {String} selector The simple selector to test
6324 * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
6325 * the selector instead of the ones that match
6328 filter : function(els, ss, nonMatches){
6329 ss = ss.replace(trimRe, "");
6330 if(!simpleCache[ss]){
6331 simpleCache[ss] = Roo.DomQuery.compile(ss, "simple");
6333 var result = simpleCache[ss](els);
6334 return nonMatches ? quickDiff(result, els) : result;
6338 * Collection of matching regular expressions and code snippets.
6342 select: 'n = byClassName(n, null, " {1} ");'
6344 re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
6345 select: 'n = byPseudo(n, "{1}", "{2}");'
6347 re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
6348 select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
6351 select: 'n = byId(n, null, "{1}");'
6354 select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
6359 * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
6360 * 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, > <.
6363 "=" : function(a, v){
6366 "!=" : function(a, v){
6369 "^=" : function(a, v){
6370 return a && a.substr(0, v.length) == v;
6372 "$=" : function(a, v){
6373 return a && a.substr(a.length-v.length) == v;
6375 "*=" : function(a, v){
6376 return a && a.indexOf(v) !== -1;
6378 "%=" : function(a, v){
6379 return (a % v) == 0;
6381 "|=" : function(a, v){
6382 return a && (a == v || a.substr(0, v.length+1) == v+'-');
6384 "~=" : function(a, v){
6385 return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
6390 * Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
6391 * and the argument (if any) supplied in the selector.
6394 "first-child" : function(c){
6395 var r = [], ri = -1, n;
6396 for(var i = 0, ci; ci = n = c[i]; i++){
6397 while((n = n.previousSibling) && n.nodeType != 1);
6405 "last-child" : function(c){
6406 var r = [], ri = -1, n;
6407 for(var i = 0, ci; ci = n = c[i]; i++){
6408 while((n = n.nextSibling) && n.nodeType != 1);
6416 "nth-child" : function(c, a) {
6417 var r = [], ri = -1;
6418 var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
6419 var f = (m[1] || 1) - 0, l = m[2] - 0;
6420 for(var i = 0, n; n = c[i]; i++){
6421 var pn = n.parentNode;
6422 if (batch != pn._batch) {
6424 for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
6425 if(cn.nodeType == 1){
6432 if (l == 0 || n.nodeIndex == l){
6435 } else if ((n.nodeIndex + l) % f == 0){
6443 "only-child" : function(c){
6444 var r = [], ri = -1;;
6445 for(var i = 0, ci; ci = c[i]; i++){
6446 if(!prev(ci) && !next(ci)){
6453 "empty" : function(c){
6454 var r = [], ri = -1;
6455 for(var i = 0, ci; ci = c[i]; i++){
6456 var cns = ci.childNodes, j = 0, cn, empty = true;
6459 if(cn.nodeType == 1 || cn.nodeType == 3){
6471 "contains" : function(c, v){
6472 var r = [], ri = -1;
6473 for(var i = 0, ci; ci = c[i]; i++){
6474 if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
6481 "nodeValue" : function(c, v){
6482 var r = [], ri = -1;
6483 for(var i = 0, ci; ci = c[i]; i++){
6484 if(ci.firstChild && ci.firstChild.nodeValue == v){
6491 "checked" : function(c){
6492 var r = [], ri = -1;
6493 for(var i = 0, ci; ci = c[i]; i++){
6494 if(ci.checked == true){
6501 "not" : function(c, ss){
6502 return Roo.DomQuery.filter(c, ss, true);
6505 "odd" : function(c){
6506 return this["nth-child"](c, "odd");
6509 "even" : function(c){
6510 return this["nth-child"](c, "even");
6513 "nth" : function(c, a){
6514 return c[a-1] || [];
6517 "first" : function(c){
6521 "last" : function(c){
6522 return c[c.length-1] || [];
6525 "has" : function(c, ss){
6526 var s = Roo.DomQuery.select;
6527 var r = [], ri = -1;
6528 for(var i = 0, ci; ci = c[i]; i++){
6529 if(s(ss, ci).length > 0){
6536 "next" : function(c, ss){
6537 var is = Roo.DomQuery.is;
6538 var r = [], ri = -1;
6539 for(var i = 0, ci; ci = c[i]; i++){
6548 "prev" : function(c, ss){
6549 var is = Roo.DomQuery.is;
6550 var r = [], ri = -1;
6551 for(var i = 0, ci; ci = c[i]; i++){
6564 * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Roo.DomQuery#select}
6565 * @param {String} path The selector/xpath query
6566 * @param {Node} root (optional) The start of the query (defaults to document).
6571 Roo.query = Roo.DomQuery.select;
6574 * Ext JS Library 1.1.1
6575 * Copyright(c) 2006-2007, Ext JS, LLC.
6577 * Originally Released Under LGPL - original licence link has changed is not relivant.
6580 * <script type="text/javascript">
6584 * @class Roo.util.Observable
6585 * Base class that provides a common interface for publishing events. Subclasses are expected to
6586 * to have a property "events" with all the events defined.<br>
6589 Employee = function(name){
6596 Roo.extend(Employee, Roo.util.Observable);
6598 * @param {Object} config properties to use (incuding events / listeners)
6601 Roo.util.Observable = function(cfg){
6604 this.addEvents(cfg.events || {});
6606 delete cfg.events; // make sure
6609 Roo.apply(this, cfg);
6612 this.on(this.listeners);
6613 delete this.listeners;
6616 Roo.util.Observable.prototype = {
6618 * @cfg {Object} listeners list of events and functions to call for this object,
6622 'click' : function(e) {
6632 * Fires the specified event with the passed parameters (minus the event name).
6633 * @param {String} eventName
6634 * @param {Object...} args Variable number of parameters are passed to handlers
6635 * @return {Boolean} returns false if any of the handlers return false otherwise it returns true
6637 fireEvent : function(){
6638 var ce = this.events[arguments[0].toLowerCase()];
6639 if(typeof ce == "object"){
6640 return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
6647 filterOptRe : /^(?:scope|delay|buffer|single)$/,
6650 * Appends an event handler to this component
6651 * @param {String} eventName The type of event to listen for
6652 * @param {Function} handler The method the event invokes
6653 * @param {Object} scope (optional) The scope in which to execute the handler
6654 * function. The handler function's "this" context.
6655 * @param {Object} options (optional) An object containing handler configuration
6656 * properties. This may contain any of the following properties:<ul>
6657 * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
6658 * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
6659 * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
6660 * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
6661 * by the specified number of milliseconds. If the event fires again within that time, the original
6662 * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
6665 * <b>Combining Options</b><br>
6666 * Using the options argument, it is possible to combine different types of listeners:<br>
6668 * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
6670 el.on('click', this.onClick, this, {
6677 * <b>Attaching multiple handlers in 1 call</b><br>
6678 * The method also allows for a single argument to be passed which is a config object containing properties
6679 * which specify multiple handlers.
6688 fn: this.onMouseOver,
6692 fn: this.onMouseOut,
6698 * Or a shorthand syntax which passes the same scope object to all handlers:
6701 'click': this.onClick,
6702 'mouseover': this.onMouseOver,
6703 'mouseout': this.onMouseOut,
6708 addListener : function(eventName, fn, scope, o){
6709 if(typeof eventName == "object"){
6712 if(this.filterOptRe.test(e)){
6715 if(typeof o[e] == "function"){
6717 this.addListener(e, o[e], o.scope, o);
6719 // individual options
6720 this.addListener(e, o[e].fn, o[e].scope, o[e]);
6725 o = (!o || typeof o == "boolean") ? {} : o;
6726 eventName = eventName.toLowerCase();
6727 var ce = this.events[eventName] || true;
6728 if(typeof ce == "boolean"){
6729 ce = new Roo.util.Event(this, eventName);
6730 this.events[eventName] = ce;
6732 ce.addListener(fn, scope, o);
6736 * Removes a listener
6737 * @param {String} eventName The type of event to listen for
6738 * @param {Function} handler The handler to remove
6739 * @param {Object} scope (optional) The scope (this object) for the handler
6741 removeListener : function(eventName, fn, scope){
6742 var ce = this.events[eventName.toLowerCase()];
6743 if(typeof ce == "object"){
6744 ce.removeListener(fn, scope);
6749 * Removes all listeners for this object
6751 purgeListeners : function(){
6752 for(var evt in this.events){
6753 if(typeof this.events[evt] == "object"){
6754 this.events[evt].clearListeners();
6759 relayEvents : function(o, events){
6760 var createHandler = function(ename){
6763 return this.fireEvent.apply(this, Roo.combine(ename, Array.prototype.slice.call(arguments, 0)));
6766 for(var i = 0, len = events.length; i < len; i++){
6767 var ename = events[i];
6768 if(!this.events[ename]){
6769 this.events[ename] = true;
6771 o.on(ename, createHandler(ename), this);
6776 * Used to define events on this Observable
6777 * @param {Object} object The object with the events defined
6779 addEvents : function(o){
6783 Roo.applyIf(this.events, o);
6787 * Checks to see if this object has any listeners for a specified event
6788 * @param {String} eventName The name of the event to check for
6789 * @return {Boolean} True if the event is being listened for, else false
6791 hasListener : function(eventName){
6792 var e = this.events[eventName];
6793 return typeof e == "object" && e.listeners.length > 0;
6797 * Appends an event handler to this element (shorthand for addListener)
6798 * @param {String} eventName The type of event to listen for
6799 * @param {Function} handler The method the event invokes
6800 * @param {Object} scope (optional) The scope in which to execute the handler
6801 * function. The handler function's "this" context.
6802 * @param {Object} options (optional)
6805 Roo.util.Observable.prototype.on = Roo.util.Observable.prototype.addListener;
6807 * Removes a listener (shorthand for removeListener)
6808 * @param {String} eventName The type of event to listen for
6809 * @param {Function} handler The handler to remove
6810 * @param {Object} scope (optional) The scope (this object) for the handler
6813 Roo.util.Observable.prototype.un = Roo.util.Observable.prototype.removeListener;
6816 * Starts capture on the specified Observable. All events will be passed
6817 * to the supplied function with the event name + standard signature of the event
6818 * <b>before</b> the event is fired. If the supplied function returns false,
6819 * the event will not fire.
6820 * @param {Observable} o The Observable to capture
6821 * @param {Function} fn The function to call
6822 * @param {Object} scope (optional) The scope (this object) for the fn
6825 Roo.util.Observable.capture = function(o, fn, scope){
6826 o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
6830 * Removes <b>all</b> added captures from the Observable.
6831 * @param {Observable} o The Observable to release
6834 Roo.util.Observable.releaseCapture = function(o){
6835 o.fireEvent = Roo.util.Observable.prototype.fireEvent;
6840 var createBuffered = function(h, o, scope){
6841 var task = new Roo.util.DelayedTask();
6843 task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
6847 var createSingle = function(h, e, fn, scope){
6849 e.removeListener(fn, scope);
6850 return h.apply(scope, arguments);
6854 var createDelayed = function(h, o, scope){
6856 var args = Array.prototype.slice.call(arguments, 0);
6857 setTimeout(function(){
6858 h.apply(scope, args);
6863 Roo.util.Event = function(obj, name){
6866 this.listeners = [];
6869 Roo.util.Event.prototype = {
6870 addListener : function(fn, scope, options){
6871 var o = options || {};
6872 scope = scope || this.obj;
6873 if(!this.isListening(fn, scope)){
6874 var l = {fn: fn, scope: scope, options: o};
6877 h = createDelayed(h, o, scope);
6880 h = createSingle(h, this, fn, scope);
6883 h = createBuffered(h, o, scope);
6886 if(!this.firing){ // if we are currently firing this event, don't disturb the listener loop
6887 this.listeners.push(l);
6889 this.listeners = this.listeners.slice(0);
6890 this.listeners.push(l);
6895 findListener : function(fn, scope){
6896 scope = scope || this.obj;
6897 var ls = this.listeners;
6898 for(var i = 0, len = ls.length; i < len; i++){
6900 if(l.fn == fn && l.scope == scope){
6907 isListening : function(fn, scope){
6908 return this.findListener(fn, scope) != -1;
6911 removeListener : function(fn, scope){
6913 if((index = this.findListener(fn, scope)) != -1){
6915 this.listeners.splice(index, 1);
6917 this.listeners = this.listeners.slice(0);
6918 this.listeners.splice(index, 1);
6925 clearListeners : function(){
6926 this.listeners = [];
6930 var ls = this.listeners, scope, len = ls.length;
6933 var args = Array.prototype.slice.call(arguments, 0);
6934 for(var i = 0; i < len; i++){
6936 if(l.fireFn.apply(l.scope||this.obj||window, args) === false){
6937 this.firing = false;
6941 this.firing = false;
6948 * Copyright(c) 2007-2017, Roo J Solutions Ltd
6955 * @class Roo.Document
6956 * @extends Roo.util.Observable
6957 * This is a convience class to wrap up the main document loading code.. , rather than adding Roo.onReady(......)
6959 * @param {Object} config the methods and properties of the 'base' class for the application.
6961 * Generic Page handler - implement this to start your app..
6964 * MyProject = new Roo.Document({
6966 'load' : true // your events..
6969 'ready' : function() {
6970 // fired on Roo.onReady()
6975 Roo.Document = function(cfg) {
6980 Roo.util.Observable.call(this,cfg);
6984 Roo.onReady(function() {
6985 _this.fireEvent('ready');
6991 Roo.extend(Roo.Document, Roo.util.Observable, {});/*
6993 * Ext JS Library 1.1.1
6994 * Copyright(c) 2006-2007, Ext JS, LLC.
6996 * Originally Released Under LGPL - original licence link has changed is not relivant.
6999 * <script type="text/javascript">
7003 * @class Roo.EventManager
7004 * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
7005 * several useful events directly.
7006 * See {@link Roo.EventObject} for more details on normalized event objects.
7009 Roo.EventManager = function(){
7010 var docReadyEvent, docReadyProcId, docReadyState = false;
7011 var resizeEvent, resizeTask, textEvent, textSize;
7012 var E = Roo.lib.Event;
7013 var D = Roo.lib.Dom;
7018 var fireDocReady = function(){
7020 docReadyState = true;
7023 clearInterval(docReadyProcId);
7025 if(Roo.isGecko || Roo.isOpera) {
7026 document.removeEventListener("DOMContentLoaded", fireDocReady, false);
7029 var defer = document.getElementById("ie-deferred-loader");
7031 defer.onreadystatechange = null;
7032 defer.parentNode.removeChild(defer);
7036 docReadyEvent.fire();
7037 docReadyEvent.clearListeners();
7042 var initDocReady = function(){
7043 docReadyEvent = new Roo.util.Event();
7044 if(Roo.isGecko || Roo.isOpera) {
7045 document.addEventListener("DOMContentLoaded", fireDocReady, false);
7047 document.write("<s"+'cript id="ie-deferred-loader" defer="defer" src="/'+'/:"></s'+"cript>");
7048 var defer = document.getElementById("ie-deferred-loader");
7049 defer.onreadystatechange = function(){
7050 if(this.readyState == "complete"){
7054 }else if(Roo.isSafari){
7055 docReadyProcId = setInterval(function(){
7056 var rs = document.readyState;
7057 if(rs == "complete") {
7062 // no matter what, make sure it fires on load
7063 E.on(window, "load", fireDocReady);
7066 var createBuffered = function(h, o){
7067 var task = new Roo.util.DelayedTask(h);
7069 // create new event object impl so new events don't wipe out properties
7070 e = new Roo.EventObjectImpl(e);
7071 task.delay(o.buffer, h, null, [e]);
7075 var createSingle = function(h, el, ename, fn){
7077 Roo.EventManager.removeListener(el, ename, fn);
7082 var createDelayed = function(h, o){
7084 // create new event object impl so new events don't wipe out properties
7085 e = new Roo.EventObjectImpl(e);
7086 setTimeout(function(){
7091 var transitionEndVal = false;
7093 var transitionEnd = function()
7095 if (transitionEndVal) {
7096 return transitionEndVal;
7098 var el = document.createElement('div');
7100 var transEndEventNames = {
7101 WebkitTransition : 'webkitTransitionEnd',
7102 MozTransition : 'transitionend',
7103 OTransition : 'oTransitionEnd otransitionend',
7104 transition : 'transitionend'
7107 for (var name in transEndEventNames) {
7108 if (el.style[name] !== undefined) {
7109 transitionEndVal = transEndEventNames[name];
7110 return transitionEndVal ;
7117 var listen = function(element, ename, opt, fn, scope)
7119 var o = (!opt || typeof opt == "boolean") ? {} : opt;
7120 fn = fn || o.fn; scope = scope || o.scope;
7121 var el = Roo.getDom(element);
7125 throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
7128 if (ename == 'transitionend') {
7129 ename = transitionEnd();
7131 var h = function(e){
7132 e = Roo.EventObject.setEvent(e);
7135 t = e.getTarget(o.delegate, el);
7142 if(o.stopEvent === true){
7145 if(o.preventDefault === true){
7148 if(o.stopPropagation === true){
7149 e.stopPropagation();
7152 if(o.normalized === false){
7156 fn.call(scope || el, e, t, o);
7159 h = createDelayed(h, o);
7162 h = createSingle(h, el, ename, fn);
7165 h = createBuffered(h, o);
7168 fn._handlers = fn._handlers || [];
7171 fn._handlers.push([Roo.id(el), ename, h]);
7175 E.on(el, ename, h); // this adds the actuall listener to the object..
7178 if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
7179 el.addEventListener("DOMMouseScroll", h, false);
7180 E.on(window, 'unload', function(){
7181 el.removeEventListener("DOMMouseScroll", h, false);
7184 if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
7185 Roo.EventManager.stoppedMouseDownEvent.addListener(h);
7190 var stopListening = function(el, ename, fn){
7191 var id = Roo.id(el), hds = fn._handlers, hd = fn;
7193 for(var i = 0, len = hds.length; i < len; i++){
7195 if(h[0] == id && h[1] == ename){
7202 E.un(el, ename, hd);
7203 el = Roo.getDom(el);
7204 if(ename == "mousewheel" && el.addEventListener){
7205 el.removeEventListener("DOMMouseScroll", hd, false);
7207 if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
7208 Roo.EventManager.stoppedMouseDownEvent.removeListener(hd);
7212 var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
7219 * @scope Roo.EventManager
7224 * This is no longer needed and is deprecated. Places a simple wrapper around an event handler to override the browser event
7225 * object with a Roo.EventObject
7226 * @param {Function} fn The method the event invokes
7227 * @param {Object} scope An object that becomes the scope of the handler
7228 * @param {boolean} override If true, the obj passed in becomes
7229 * the execution scope of the listener
7230 * @return {Function} The wrapped function
7233 wrap : function(fn, scope, override){
7235 Roo.EventObject.setEvent(e);
7236 fn.call(override ? scope || window : window, Roo.EventObject, scope);
7241 * Appends an event handler to an element (shorthand for addListener)
7242 * @param {String/HTMLElement} element The html element or id to assign the
7243 * @param {String} eventName The type of event to listen for
7244 * @param {Function} handler The method the event invokes
7245 * @param {Object} scope (optional) The scope in which to execute the handler
7246 * function. The handler function's "this" context.
7247 * @param {Object} options (optional) An object containing handler configuration
7248 * properties. This may contain any of the following properties:<ul>
7249 * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
7250 * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
7251 * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
7252 * <li>preventDefault {Boolean} True to prevent the default action</li>
7253 * <li>stopPropagation {Boolean} True to prevent event propagation</li>
7254 * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
7255 * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
7256 * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
7257 * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
7258 * by the specified number of milliseconds. If the event fires again within that time, the original
7259 * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
7262 * <b>Combining Options</b><br>
7263 * Using the options argument, it is possible to combine different types of listeners:<br>
7265 * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
7267 el.on('click', this.onClick, this, {
7274 * <b>Attaching multiple handlers in 1 call</b><br>
7275 * The method also allows for a single argument to be passed which is a config object containing properties
7276 * which specify multiple handlers.
7286 fn: this.onMouseOver
7295 * Or a shorthand syntax:<br>
7298 'click' : this.onClick,
7299 'mouseover' : this.onMouseOver,
7300 'mouseout' : this.onMouseOut
7304 addListener : function(element, eventName, fn, scope, options){
7305 if(typeof eventName == "object"){
7311 if(typeof o[e] == "function"){
7313 listen(element, e, o, o[e], o.scope);
7315 // individual options
7316 listen(element, e, o[e]);
7321 return listen(element, eventName, options, fn, scope);
7325 * Removes an event handler
7327 * @param {String/HTMLElement} element The id or html element to remove the
7329 * @param {String} eventName The type of event
7330 * @param {Function} fn
7331 * @return {Boolean} True if a listener was actually removed
7333 removeListener : function(element, eventName, fn){
7334 return stopListening(element, eventName, fn);
7338 * Fires when the document is ready (before onload and before images are loaded). Can be
7339 * accessed shorthanded Roo.onReady().
7340 * @param {Function} fn The method the event invokes
7341 * @param {Object} scope An object that becomes the scope of the handler
7342 * @param {boolean} options
7344 onDocumentReady : function(fn, scope, options){
7345 if(docReadyState){ // if it already fired
7346 docReadyEvent.addListener(fn, scope, options);
7347 docReadyEvent.fire();
7348 docReadyEvent.clearListeners();
7354 docReadyEvent.addListener(fn, scope, options);
7358 * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.
7359 * @param {Function} fn The method the event invokes
7360 * @param {Object} scope An object that becomes the scope of the handler
7361 * @param {boolean} options
7363 onWindowResize : function(fn, scope, options)
7366 resizeEvent = new Roo.util.Event();
7367 resizeTask = new Roo.util.DelayedTask(function(){
7368 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
7370 E.on(window, "resize", function()
7373 resizeTask.delay(50);
7375 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
7379 resizeEvent.addListener(fn, scope, options);
7383 * Fires when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
7384 * @param {Function} fn The method the event invokes
7385 * @param {Object} scope An object that becomes the scope of the handler
7386 * @param {boolean} options
7388 onTextResize : function(fn, scope, options){
7390 textEvent = new Roo.util.Event();
7391 var textEl = new Roo.Element(document.createElement('div'));
7392 textEl.dom.className = 'x-text-resize';
7393 textEl.dom.innerHTML = 'X';
7394 textEl.appendTo(document.body);
7395 textSize = textEl.dom.offsetHeight;
7396 setInterval(function(){
7397 if(textEl.dom.offsetHeight != textSize){
7398 textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
7400 }, this.textResizeInterval);
7402 textEvent.addListener(fn, scope, options);
7406 * Removes the passed window resize listener.
7407 * @param {Function} fn The method the event invokes
7408 * @param {Object} scope The scope of handler
7410 removeResizeListener : function(fn, scope){
7412 resizeEvent.removeListener(fn, scope);
7417 fireResize : function(){
7419 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
7423 * Url used for onDocumentReady with using SSL (defaults to Roo.SSL_SECURE_URL)
7427 * The frequency, in milliseconds, to check for text resize events (defaults to 50)
7429 textResizeInterval : 50
7434 * @scopeAlias pub=Roo.EventManager
7438 * Appends an event handler to an element (shorthand for addListener)
7439 * @param {String/HTMLElement} element The html element or id to assign the
7440 * @param {String} eventName The type of event to listen for
7441 * @param {Function} handler The method the event invokes
7442 * @param {Object} scope (optional) The scope in which to execute the handler
7443 * function. The handler function's "this" context.
7444 * @param {Object} options (optional) An object containing handler configuration
7445 * properties. This may contain any of the following properties:<ul>
7446 * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
7447 * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
7448 * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
7449 * <li>preventDefault {Boolean} True to prevent the default action</li>
7450 * <li>stopPropagation {Boolean} True to prevent event propagation</li>
7451 * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
7452 * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
7453 * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
7454 * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
7455 * by the specified number of milliseconds. If the event fires again within that time, the original
7456 * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
7459 * <b>Combining Options</b><br>
7460 * Using the options argument, it is possible to combine different types of listeners:<br>
7462 * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
7464 el.on('click', this.onClick, this, {
7471 * <b>Attaching multiple handlers in 1 call</b><br>
7472 * The method also allows for a single argument to be passed which is a config object containing properties
7473 * which specify multiple handlers.
7483 fn: this.onMouseOver
7492 * Or a shorthand syntax:<br>
7495 'click' : this.onClick,
7496 'mouseover' : this.onMouseOver,
7497 'mouseout' : this.onMouseOut
7501 pub.on = pub.addListener;
7502 pub.un = pub.removeListener;
7504 pub.stoppedMouseDownEvent = new Roo.util.Event();
7508 * Fires when the document is ready (before onload and before images are loaded). Shorthand of {@link Roo.EventManager#onDocumentReady}.
7509 * @param {Function} fn The method the event invokes
7510 * @param {Object} scope An object that becomes the scope of the handler
7511 * @param {boolean} override If true, the obj passed in becomes
7512 * the execution scope of the listener
7516 Roo.onReady = Roo.EventManager.onDocumentReady;
7518 Roo.onReady(function(){
7519 var bd = Roo.get(document.body);
7524 : Roo.isIE11 ? "roo-ie11"
7525 : Roo.isEdge ? "roo-edge"
7526 : Roo.isGecko ? "roo-gecko"
7527 : Roo.isOpera ? "roo-opera"
7528 : Roo.isSafari ? "roo-safari" : ""];
7531 cls.push("roo-mac");
7534 cls.push("roo-linux");
7537 cls.push("roo-ios");
7540 cls.push("roo-touch");
7542 if(Roo.isBorderBox){
7543 cls.push('roo-border-box');
7545 if(Roo.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
7546 var p = bd.dom.parentNode;
7548 p.className += ' roo-strict';
7551 bd.addClass(cls.join(' '));
7555 * @class Roo.EventObject
7556 * EventObject exposes the Yahoo! UI Event functionality directly on the object
7557 * passed to your event handler. It exists mostly for convenience. It also fixes the annoying null checks automatically to cleanup your code
7560 function handleClick(e){ // e is not a standard event object, it is a Roo.EventObject
7562 var target = e.getTarget();
7565 var myDiv = Roo.get("myDiv");
7566 myDiv.on("click", handleClick);
7568 Roo.EventManager.on("myDiv", 'click', handleClick);
7569 Roo.EventManager.addListener("myDiv", 'click', handleClick);
7573 Roo.EventObject = function(){
7575 var E = Roo.lib.Event;
7577 // safari keypress events for special keys return bad keycodes
7580 63235 : 39, // right
7583 63276 : 33, // page up
7584 63277 : 34, // page down
7585 63272 : 46, // delete
7590 // normalize button clicks
7591 var btnMap = Roo.isIE ? {1:0,4:1,2:2} :
7592 (Roo.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
7594 Roo.EventObjectImpl = function(e){
7596 this.setEvent(e.browserEvent || e);
7599 Roo.EventObjectImpl.prototype = {
7601 * Used to fix doc tools.
7602 * @scope Roo.EventObject.prototype
7608 /** The normal browser event */
7609 browserEvent : null,
7610 /** The button pressed in a mouse event */
7612 /** True if the shift key was down during the event */
7614 /** True if the control key was down during the event */
7616 /** True if the alt key was down during the event */
7675 setEvent : function(e){
7676 if(e == this || (e && e.browserEvent)){ // already wrapped
7679 this.browserEvent = e;
7681 // normalize buttons
7682 this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
7683 if(e.type == 'click' && this.button == -1){
7687 this.shiftKey = e.shiftKey;
7688 // mac metaKey behaves like ctrlKey
7689 this.ctrlKey = e.ctrlKey || e.metaKey;
7690 this.altKey = e.altKey;
7691 // in getKey these will be normalized for the mac
7692 this.keyCode = e.keyCode;
7693 // keyup warnings on firefox.
7694 this.charCode = (e.type == 'keyup' || e.type == 'keydown') ? 0 : e.charCode;
7695 // cache the target for the delayed and or buffered events
7696 this.target = E.getTarget(e);
7698 this.xy = E.getXY(e);
7701 this.shiftKey = false;
7702 this.ctrlKey = false;
7703 this.altKey = false;
7713 * Stop the event (preventDefault and stopPropagation)
7715 stopEvent : function(){
7716 if(this.browserEvent){
7717 if(this.browserEvent.type == 'mousedown'){
7718 Roo.EventManager.stoppedMouseDownEvent.fire(this);
7720 E.stopEvent(this.browserEvent);
7725 * Prevents the browsers default handling of the event.
7727 preventDefault : function(){
7728 if(this.browserEvent){
7729 E.preventDefault(this.browserEvent);
7734 isNavKeyPress : function(){
7735 var k = this.keyCode;
7736 k = Roo.isSafari ? (safariKeys[k] || k) : k;
7737 return (k >= 33 && k <= 40) || k == this.RETURN || k == this.TAB || k == this.ESC;
7740 isSpecialKey : function(){
7741 var k = this.keyCode;
7742 return (this.type == 'keypress' && this.ctrlKey) || k == 9 || k == 13 || k == 40 || k == 27 ||
7743 (k == 16) || (k == 17) ||
7744 (k >= 18 && k <= 20) ||
7745 (k >= 33 && k <= 35) ||
7746 (k >= 36 && k <= 39) ||
7747 (k >= 44 && k <= 45);
7750 * Cancels bubbling of the event.
7752 stopPropagation : function(){
7753 if(this.browserEvent){
7754 if(this.type == 'mousedown'){
7755 Roo.EventManager.stoppedMouseDownEvent.fire(this);
7757 E.stopPropagation(this.browserEvent);
7762 * Gets the key code for the event.
7765 getCharCode : function(){
7766 return this.charCode || this.keyCode;
7770 * Returns a normalized keyCode for the event.
7771 * @return {Number} The key code
7773 getKey : function(){
7774 var k = this.keyCode || this.charCode;
7775 return Roo.isSafari ? (safariKeys[k] || k) : k;
7779 * Gets the x coordinate of the event.
7782 getPageX : function(){
7787 * Gets the y coordinate of the event.
7790 getPageY : function(){
7795 * Gets the time of the event.
7798 getTime : function(){
7799 if(this.browserEvent){
7800 return E.getTime(this.browserEvent);
7806 * Gets the page coordinates of the event.
7807 * @return {Array} The xy values like [x, y]
7814 * Gets the target for the event.
7815 * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
7816 * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
7817 search as a number or element (defaults to 10 || document.body)
7818 * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
7819 * @return {HTMLelement}
7821 getTarget : function(selector, maxDepth, returnEl){
7822 return selector ? Roo.fly(this.target).findParent(selector, maxDepth, returnEl) : this.target;
7825 * Gets the related target.
7826 * @return {HTMLElement}
7828 getRelatedTarget : function(){
7829 if(this.browserEvent){
7830 return E.getRelatedTarget(this.browserEvent);
7836 * Normalizes mouse wheel delta across browsers
7837 * @return {Number} The delta
7839 getWheelDelta : function(){
7840 var e = this.browserEvent;
7842 if(e.wheelDelta){ /* IE/Opera. */
7843 delta = e.wheelDelta/120;
7844 }else if(e.detail){ /* Mozilla case. */
7845 delta = -e.detail/3;
7851 * Returns true if the control, meta, shift or alt key was pressed during this event.
7854 hasModifier : function(){
7855 return !!((this.ctrlKey || this.altKey) || this.shiftKey);
7859 * Returns true if the target of this event equals el or is a child of el
7860 * @param {String/HTMLElement/Element} el
7861 * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
7864 within : function(el, related){
7865 var t = this[related ? "getRelatedTarget" : "getTarget"]();
7866 return t && Roo.fly(el).contains(t);
7869 getPoint : function(){
7870 return new Roo.lib.Point(this.xy[0], this.xy[1]);
7874 return new Roo.EventObjectImpl();
7879 * Ext JS Library 1.1.1
7880 * Copyright(c) 2006-2007, Ext JS, LLC.
7882 * Originally Released Under LGPL - original licence link has changed is not relivant.
7885 * <script type="text/javascript">
7889 // was in Composite Element!??!?!
7892 var D = Roo.lib.Dom;
7893 var E = Roo.lib.Event;
7894 var A = Roo.lib.Anim;
7896 // local style camelizing for speed
7898 var camelRe = /(-[a-z])/gi;
7899 var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
7900 var view = document.defaultView;
7903 * @class Roo.Element
7904 * Represents an Element in the DOM.<br><br>
7907 var el = Roo.get("my-div");
7910 var el = getEl("my-div");
7912 // or with a DOM element
7913 var el = Roo.get(myDivElement);
7915 * Using Roo.get() or getEl() instead of calling the constructor directly ensures you get the same object
7916 * each call instead of constructing a new one.<br><br>
7917 * <b>Animations</b><br />
7918 * Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter
7919 * should either be a boolean (true) or an object literal with animation options. The animation options are:
7921 Option Default Description
7922 --------- -------- ---------------------------------------------
7923 duration .35 The duration of the animation in seconds
7924 easing easeOut The YUI easing method
7925 callback none A function to execute when the anim completes
7926 scope this The scope (this) of the callback function
7928 * Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or
7929 * manipulate the animation. Here's an example:
7931 var el = Roo.get("my-div");
7936 // default animation
7937 el.setWidth(100, true);
7939 // animation with some options set
7946 // using the "anim" property to get the Anim object
7952 el.setWidth(100, opt);
7954 if(opt.anim.isAnimated()){
7958 * <b> Composite (Collections of) Elements</b><br />
7959 * For working with collections of Elements, see <a href="Roo.CompositeElement.html">Roo.CompositeElement</a>
7960 * @constructor Create a new Element directly.
7961 * @param {String/HTMLElement} element
7962 * @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).
7964 Roo.Element = function(element, forceNew)
7966 var dom = typeof element == "string" ?
7967 document.getElementById(element) : element;
7969 this.listeners = {};
7971 if(!dom){ // invalid id/element
7975 if(forceNew !== true && id && Roo.Element.cache[id]){ // element object already exists
7976 return Roo.Element.cache[id];
7986 * The DOM element ID
7989 this.id = id || Roo.id(dom);
7991 return this; // assumed for cctor?
7994 var El = Roo.Element;
7998 * The element's default display mode (defaults to "")
8001 originalDisplay : "",
8004 // note this is overridden in BS version..
8007 * The default unit to append to CSS values where a unit isn't provided (defaults to px).
8013 * Sets the element's visibility mode. When setVisible() is called it
8014 * will use this to determine whether to set the visibility or the display property.
8015 * @param visMode Element.VISIBILITY or Element.DISPLAY
8016 * @return {Roo.Element} this
8018 setVisibilityMode : function(visMode){
8019 this.visibilityMode = visMode;
8023 * Convenience method for setVisibilityMode(Element.DISPLAY)
8024 * @param {String} display (optional) What to set display to when visible
8025 * @return {Roo.Element} this
8027 enableDisplayMode : function(display){
8028 this.setVisibilityMode(El.DISPLAY);
8029 if(typeof display != "undefined") { this.originalDisplay = display; }
8034 * 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)
8035 * @param {String} selector The simple selector to test
8036 * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8037 search as a number or element (defaults to 10 || document.body)
8038 * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
8039 * @return {HTMLElement} The matching DOM node (or null if no match was found)
8041 findParent : function(simpleSelector, maxDepth, returnEl){
8042 var p = this.dom, b = document.body, depth = 0, dq = Roo.DomQuery, stopEl;
8043 maxDepth = maxDepth || 50;
8044 if(typeof maxDepth != "number"){
8045 stopEl = Roo.getDom(maxDepth);
8048 while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
8049 if(dq.is(p, simpleSelector)){
8050 return returnEl ? Roo.get(p) : p;
8060 * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
8061 * @param {String} selector The simple selector to test
8062 * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8063 search as a number or element (defaults to 10 || document.body)
8064 * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
8065 * @return {HTMLElement} The matching DOM node (or null if no match was found)
8067 findParentNode : function(simpleSelector, maxDepth, returnEl){
8068 var p = Roo.fly(this.dom.parentNode, '_internal');
8069 return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
8073 * Looks at the scrollable parent element
8075 findScrollableParent : function()
8077 var overflowRegex = /(auto|scroll)/;
8079 if(this.getStyle('position') === 'fixed'){
8080 return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
8083 var excludeStaticParent = this.getStyle('position') === "absolute";
8085 for (var parent = this; (parent = Roo.get(parent.dom.parentNode));){
8087 if (excludeStaticParent && parent.getStyle('position') === "static") {
8091 if (overflowRegex.test(parent.getStyle('overflow') + parent.getStyle('overflow-x') + parent.getStyle('overflow-y'))){
8095 if(parent.dom.nodeName.toLowerCase() == 'body'){
8096 return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
8100 return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
8104 * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
8105 * This is a shortcut for findParentNode() that always returns an Roo.Element.
8106 * @param {String} selector The simple selector to test
8107 * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8108 search as a number or element (defaults to 10 || document.body)
8109 * @return {Roo.Element} The matching DOM node (or null if no match was found)
8111 up : function(simpleSelector, maxDepth){
8112 return this.findParentNode(simpleSelector, maxDepth, true);
8118 * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
8119 * @param {String} selector The simple selector to test
8120 * @return {Boolean} True if this element matches the selector, else false
8122 is : function(simpleSelector){
8123 return Roo.DomQuery.is(this.dom, simpleSelector);
8127 * Perform animation on this element.
8128 * @param {Object} args The YUI animation control args
8129 * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
8130 * @param {Function} onComplete (optional) Function to call when animation completes
8131 * @param {String} easing (optional) Easing method to use (defaults to 'easeOut')
8132 * @param {String} animType (optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'
8133 * @return {Roo.Element} this
8135 animate : function(args, duration, onComplete, easing, animType){
8136 this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
8141 * @private Internal animation call
8143 anim : function(args, opt, animType, defaultDur, defaultEase, cb){
8144 animType = animType || 'run';
8146 var anim = Roo.lib.Anim[animType](
8148 (opt.duration || defaultDur) || .35,
8149 (opt.easing || defaultEase) || 'easeOut',
8151 Roo.callback(cb, this);
8152 Roo.callback(opt.callback, opt.scope || this, [this, opt]);
8160 // private legacy anim prep
8161 preanim : function(a, i){
8162 return !a[i] ? false : (typeof a[i] == "object" ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
8166 * Removes worthless text nodes
8167 * @param {Boolean} forceReclean (optional) By default the element
8168 * keeps track if it has been cleaned already so
8169 * you can call this over and over. However, if you update the element and
8170 * need to force a reclean, you can pass true.
8172 clean : function(forceReclean){
8173 if(this.isCleaned && forceReclean !== true){
8177 var d = this.dom, n = d.firstChild, ni = -1;
8179 var nx = n.nextSibling;
8180 if(n.nodeType == 3 && !ns.test(n.nodeValue)){
8187 this.isCleaned = true;
8192 calcOffsetsTo : function(el){
8195 var restorePos = false;
8196 if(el.getStyle('position') == 'static'){
8197 el.position('relative');
8202 while(op && op != d && op.tagName != 'HTML'){
8205 op = op.offsetParent;
8208 el.position('static');
8214 * Scrolls this element into view within the passed container.
8215 * @param {String/HTMLElement/Element} container (optional) The container element to scroll (defaults to document.body)
8216 * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
8217 * @return {Roo.Element} this
8219 scrollIntoView : function(container, hscroll){
8220 var c = Roo.getDom(container) || document.body;
8223 var o = this.calcOffsetsTo(c),
8226 b = t+el.offsetHeight,
8227 r = l+el.offsetWidth;
8229 var ch = c.clientHeight;
8230 var ct = parseInt(c.scrollTop, 10);
8231 var cl = parseInt(c.scrollLeft, 10);
8233 var cr = cl + c.clientWidth;
8241 if(hscroll !== false){
8245 c.scrollLeft = r-c.clientWidth;
8252 scrollChildIntoView : function(child, hscroll){
8253 Roo.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
8257 * Measures the element's content height and updates height to match. Note: this function uses setTimeout so
8258 * the new height may not be available immediately.
8259 * @param {Boolean} animate (optional) Animate the transition (defaults to false)
8260 * @param {Float} duration (optional) Length of the animation in seconds (defaults to .35)
8261 * @param {Function} onComplete (optional) Function to call when animation completes
8262 * @param {String} easing (optional) Easing method to use (defaults to easeOut)
8263 * @return {Roo.Element} this
8265 autoHeight : function(animate, duration, onComplete, easing){
8266 var oldHeight = this.getHeight();
8268 this.setHeight(1); // force clipping
8269 setTimeout(function(){
8270 var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
8272 this.setHeight(height);
8274 if(typeof onComplete == "function"){
8278 this.setHeight(oldHeight); // restore original height
8279 this.setHeight(height, animate, duration, function(){
8281 if(typeof onComplete == "function") { onComplete(); }
8282 }.createDelegate(this), easing);
8284 }.createDelegate(this), 0);
8289 * Returns true if this element is an ancestor of the passed element
8290 * @param {HTMLElement/String} el The element to check
8291 * @return {Boolean} True if this element is an ancestor of el, else false
8293 contains : function(el){
8294 if(!el){return false;}
8295 return D.isAncestor(this.dom, el.dom ? el.dom : el);
8299 * Checks whether the element is currently visible using both visibility and display properties.
8300 * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
8301 * @return {Boolean} True if the element is currently visible, else false
8303 isVisible : function(deep) {
8304 var vis = !(this.getStyle("visibility") == "hidden" || this.getStyle("display") == "none");
8305 if(deep !== true || !vis){
8308 var p = this.dom.parentNode;
8309 while(p && p.tagName.toLowerCase() != "body"){
8310 if(!Roo.fly(p, '_isVisible').isVisible()){
8319 * Creates a {@link Roo.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
8320 * @param {String} selector The CSS selector
8321 * @param {Boolean} unique (optional) True to create a unique Roo.Element for each child (defaults to false, which creates a single shared flyweight object)
8322 * @return {CompositeElement/CompositeElementLite} The composite element
8324 select : function(selector, unique){
8325 return El.select(selector, unique, this.dom);
8329 * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
8330 * @param {String} selector The CSS selector
8331 * @return {Array} An array of the matched nodes
8333 query : function(selector, unique){
8334 return Roo.DomQuery.select(selector, this.dom);
8338 * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
8339 * @param {String} selector The CSS selector
8340 * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
8341 * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
8343 child : function(selector, returnDom){
8344 var n = Roo.DomQuery.selectNode(selector, this.dom);
8345 return returnDom ? n : Roo.get(n);
8349 * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
8350 * @param {String} selector The CSS selector
8351 * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
8352 * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
8354 down : function(selector, returnDom){
8355 var n = Roo.DomQuery.selectNode(" > " + selector, this.dom);
8356 return returnDom ? n : Roo.get(n);
8360 * Initializes a {@link Roo.dd.DD} drag drop object for this element.
8361 * @param {String} group The group the DD object is member of
8362 * @param {Object} config The DD config object
8363 * @param {Object} overrides An object containing methods to override/implement on the DD object
8364 * @return {Roo.dd.DD} The DD object
8366 initDD : function(group, config, overrides){
8367 var dd = new Roo.dd.DD(Roo.id(this.dom), group, config);
8368 return Roo.apply(dd, overrides);
8372 * Initializes a {@link Roo.dd.DDProxy} object for this element.
8373 * @param {String} group The group the DDProxy object is member of
8374 * @param {Object} config The DDProxy config object
8375 * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
8376 * @return {Roo.dd.DDProxy} The DDProxy object
8378 initDDProxy : function(group, config, overrides){
8379 var dd = new Roo.dd.DDProxy(Roo.id(this.dom), group, config);
8380 return Roo.apply(dd, overrides);
8384 * Initializes a {@link Roo.dd.DDTarget} object for this element.
8385 * @param {String} group The group the DDTarget object is member of
8386 * @param {Object} config The DDTarget config object
8387 * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
8388 * @return {Roo.dd.DDTarget} The DDTarget object
8390 initDDTarget : function(group, config, overrides){
8391 var dd = new Roo.dd.DDTarget(Roo.id(this.dom), group, config);
8392 return Roo.apply(dd, overrides);
8396 * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
8397 * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
8398 * @param {Boolean} visible Whether the element is visible
8399 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8400 * @return {Roo.Element} this
8402 setVisible : function(visible, animate){
8404 if(this.visibilityMode == El.DISPLAY){
8405 this.setDisplayed(visible);
8408 this.dom.style.visibility = visible ? "visible" : "hidden";
8411 // closure for composites
8413 var visMode = this.visibilityMode;
8415 this.setOpacity(.01);
8416 this.setVisible(true);
8418 this.anim({opacity: { to: (visible?1:0) }},
8419 this.preanim(arguments, 1),
8420 null, .35, 'easeIn', function(){
8422 if(visMode == El.DISPLAY){
8423 dom.style.display = "none";
8425 dom.style.visibility = "hidden";
8427 Roo.get(dom).setOpacity(1);
8435 * Returns true if display is not "none"
8438 isDisplayed : function() {
8439 return this.getStyle("display") != "none";
8443 * Toggles the element's visibility or display, depending on visibility mode.
8444 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8445 * @return {Roo.Element} this
8447 toggle : function(animate){
8448 this.setVisible(!this.isVisible(), this.preanim(arguments, 0));
8453 * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
8454 * @param {Boolean} value Boolean value to display the element using its default display, or a string to set the display directly
8455 * @return {Roo.Element} this
8457 setDisplayed : function(value) {
8458 if(typeof value == "boolean"){
8459 value = value ? this.originalDisplay : "none";
8461 this.setStyle("display", value);
8466 * Tries to focus the element. Any exceptions are caught and ignored.
8467 * @return {Roo.Element} this
8469 focus : function() {
8477 * Tries to blur the element. Any exceptions are caught and ignored.
8478 * @return {Roo.Element} this
8488 * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
8489 * @param {String/Array} className The CSS class to add, or an array of classes
8490 * @return {Roo.Element} this
8492 addClass : function(className){
8493 if(className instanceof Array){
8494 for(var i = 0, len = className.length; i < len; i++) {
8495 this.addClass(className[i]);
8498 if(className && !this.hasClass(className)){
8499 if (this.dom instanceof SVGElement) {
8500 this.dom.className.baseVal =this.dom.className.baseVal + " " + className;
8502 this.dom.className = this.dom.className + " " + className;
8510 * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
8511 * @param {String/Array} className The CSS class to add, or an array of classes
8512 * @return {Roo.Element} this
8514 radioClass : function(className){
8515 var siblings = this.dom.parentNode.childNodes;
8516 for(var i = 0; i < siblings.length; i++) {
8517 var s = siblings[i];
8518 if(s.nodeType == 1){
8519 Roo.get(s).removeClass(className);
8522 this.addClass(className);
8527 * Removes one or more CSS classes from the element.
8528 * @param {String/Array} className The CSS class to remove, or an array of classes
8529 * @return {Roo.Element} this
8531 removeClass : function(className){
8533 var cn = this.dom instanceof SVGElement ? this.dom.className.baseVal : this.dom.className;
8534 if(!className || !cn){
8537 if(className instanceof Array){
8538 for(var i = 0, len = className.length; i < len; i++) {
8539 this.removeClass(className[i]);
8542 if(this.hasClass(className)){
8543 var re = this.classReCache[className];
8545 re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
8546 this.classReCache[className] = re;
8548 if (this.dom instanceof SVGElement) {
8549 this.dom.className.baseVal = cn.replace(re, " ");
8551 this.dom.className = cn.replace(re, " ");
8562 * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
8563 * @param {String} className The CSS class to toggle
8564 * @return {Roo.Element} this
8566 toggleClass : function(className){
8567 if(this.hasClass(className)){
8568 this.removeClass(className);
8570 this.addClass(className);
8576 * Checks if the specified CSS class exists on this element's DOM node.
8577 * @param {String} className The CSS class to check for
8578 * @return {Boolean} True if the class exists, else false
8580 hasClass : function(className){
8581 if (this.dom instanceof SVGElement) {
8582 return className && (' '+this.dom.className.baseVal +' ').indexOf(' '+className+' ') != -1;
8584 return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
8588 * Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
8589 * @param {String} oldClassName The CSS class to replace
8590 * @param {String} newClassName The replacement CSS class
8591 * @return {Roo.Element} this
8593 replaceClass : function(oldClassName, newClassName){
8594 this.removeClass(oldClassName);
8595 this.addClass(newClassName);
8600 * Returns an object with properties matching the styles requested.
8601 * For example, el.getStyles('color', 'font-size', 'width') might return
8602 * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
8603 * @param {String} style1 A style name
8604 * @param {String} style2 A style name
8605 * @param {String} etc.
8606 * @return {Object} The style object
8608 getStyles : function(){
8609 var a = arguments, len = a.length, r = {};
8610 for(var i = 0; i < len; i++){
8611 r[a[i]] = this.getStyle(a[i]);
8617 * Normalizes currentStyle and computedStyle. This is not YUI getStyle, it is an optimised version.
8618 * @param {String} property The style property whose value is returned.
8619 * @return {String} The current value of the style property for this element.
8621 getStyle : function(){
8622 return view && view.getComputedStyle ?
8624 var el = this.dom, v, cs, camel;
8625 if(prop == 'float'){
8628 if(el.style && (v = el.style[prop])){
8631 if(cs = view.getComputedStyle(el, "")){
8632 if(!(camel = propCache[prop])){
8633 camel = propCache[prop] = prop.replace(camelRe, camelFn);
8640 var el = this.dom, v, cs, camel;
8641 if(prop == 'opacity'){
8642 if(typeof el.style.filter == 'string'){
8643 var m = el.style.filter.match(/alpha\(opacity=(.*)\)/i);
8645 var fv = parseFloat(m[1]);
8647 return fv ? fv / 100 : 0;
8652 }else if(prop == 'float'){
8653 prop = "styleFloat";
8655 if(!(camel = propCache[prop])){
8656 camel = propCache[prop] = prop.replace(camelRe, camelFn);
8658 if(v = el.style[camel]){
8661 if(cs = el.currentStyle){
8669 * Wrapper for setting style properties, also takes single object parameter of multiple styles.
8670 * @param {String/Object} property The style property to be set, or an object of multiple styles.
8671 * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
8672 * @return {Roo.Element} this
8674 setStyle : function(prop, value){
8675 if(typeof prop == "string"){
8677 if (prop == 'float') {
8678 this.setStyle(Roo.isIE ? 'styleFloat' : 'cssFloat', value);
8683 if(!(camel = propCache[prop])){
8684 camel = propCache[prop] = prop.replace(camelRe, camelFn);
8687 if(camel == 'opacity') {
8688 this.setOpacity(value);
8690 this.dom.style[camel] = value;
8693 for(var style in prop){
8694 if(typeof prop[style] != "function"){
8695 this.setStyle(style, prop[style]);
8703 * More flexible version of {@link #setStyle} for setting style properties.
8704 * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
8705 * a function which returns such a specification.
8706 * @return {Roo.Element} this
8708 applyStyles : function(style){
8709 Roo.DomHelper.applyStyles(this.dom, style);
8714 * 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).
8715 * @return {Number} The X position of the element
8718 return D.getX(this.dom);
8722 * 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).
8723 * @return {Number} The Y position of the element
8726 return D.getY(this.dom);
8730 * 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).
8731 * @return {Array} The XY position of the element
8734 return D.getXY(this.dom);
8738 * 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).
8739 * @param {Number} The X position of the element
8740 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8741 * @return {Roo.Element} this
8743 setX : function(x, animate){
8745 D.setX(this.dom, x);
8747 this.setXY([x, this.getY()], this.preanim(arguments, 1));
8753 * 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).
8754 * @param {Number} The Y position of the element
8755 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8756 * @return {Roo.Element} this
8758 setY : function(y, animate){
8760 D.setY(this.dom, y);
8762 this.setXY([this.getX(), y], this.preanim(arguments, 1));
8768 * Sets the element's left position directly using CSS style (instead of {@link #setX}).
8769 * @param {String} left The left CSS property value
8770 * @return {Roo.Element} this
8772 setLeft : function(left){
8773 this.setStyle("left", this.addUnits(left));
8778 * Sets the element's top position directly using CSS style (instead of {@link #setY}).
8779 * @param {String} top The top CSS property value
8780 * @return {Roo.Element} this
8782 setTop : function(top){
8783 this.setStyle("top", this.addUnits(top));
8788 * Sets the element's CSS right style.
8789 * @param {String} right The right CSS property value
8790 * @return {Roo.Element} this
8792 setRight : function(right){
8793 this.setStyle("right", this.addUnits(right));
8798 * Sets the element's CSS bottom style.
8799 * @param {String} bottom The bottom CSS property value
8800 * @return {Roo.Element} this
8802 setBottom : function(bottom){
8803 this.setStyle("bottom", this.addUnits(bottom));
8808 * Sets the position of the element in page coordinates, regardless of how the element is positioned.
8809 * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
8810 * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
8811 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8812 * @return {Roo.Element} this
8814 setXY : function(pos, animate){
8816 D.setXY(this.dom, pos);
8818 this.anim({points: {to: pos}}, this.preanim(arguments, 1), 'motion');
8824 * Sets the position of the element in page coordinates, regardless of how the element is positioned.
8825 * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
8826 * @param {Number} x X value for new position (coordinates are page-based)
8827 * @param {Number} y Y value for new position (coordinates are page-based)
8828 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8829 * @return {Roo.Element} this
8831 setLocation : function(x, y, animate){
8832 this.setXY([x, y], this.preanim(arguments, 2));
8837 * Sets the position of the element in page coordinates, regardless of how the element is positioned.
8838 * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
8839 * @param {Number} x X value for new position (coordinates are page-based)
8840 * @param {Number} y Y value for new position (coordinates are page-based)
8841 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8842 * @return {Roo.Element} this
8844 moveTo : function(x, y, animate){
8845 this.setXY([x, y], this.preanim(arguments, 2));
8850 * Returns the region of the given element.
8851 * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
8852 * @return {Region} A Roo.lib.Region containing "top, left, bottom, right" member data.
8854 getRegion : function(){
8855 return D.getRegion(this.dom);
8859 * Returns the offset height of the element
8860 * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
8861 * @return {Number} The element's height
8863 getHeight : function(contentHeight){
8864 var h = this.dom.offsetHeight || 0;
8865 return contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
8869 * Returns the offset width of the element
8870 * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
8871 * @return {Number} The element's width
8873 getWidth : function(contentWidth){
8874 var w = this.dom.offsetWidth || 0;
8875 return contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
8879 * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
8880 * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
8881 * if a height has not been set using CSS.
8884 getComputedHeight : function(){
8885 var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight);
8887 h = parseInt(this.getStyle('height'), 10) || 0;
8888 if(!this.isBorderBox()){
8889 h += this.getFrameWidth('tb');
8896 * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
8897 * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
8898 * if a width has not been set using CSS.
8901 getComputedWidth : function(){
8902 var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
8904 w = parseInt(this.getStyle('width'), 10) || 0;
8905 if(!this.isBorderBox()){
8906 w += this.getFrameWidth('lr');
8913 * Returns the size of the element.
8914 * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
8915 * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
8917 getSize : function(contentSize){
8918 return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
8922 * Returns the width and height of the viewport.
8923 * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
8925 getViewSize : function(){
8926 var d = this.dom, doc = document, aw = 0, ah = 0;
8927 if(d == doc || d == doc.body){
8928 return {width : D.getViewWidth(), height: D.getViewHeight()};
8931 width : d.clientWidth,
8932 height: d.clientHeight
8938 * Returns the value of the "value" attribute
8939 * @param {Boolean} asNumber true to parse the value as a number
8940 * @return {String/Number}
8942 getValue : function(asNumber){
8943 return asNumber ? parseInt(this.dom.value, 10) : this.dom.value;
8947 adjustWidth : function(width){
8948 if(typeof width == "number"){
8949 if(this.autoBoxAdjust && !this.isBorderBox()){
8950 width -= (this.getBorderWidth("lr") + this.getPadding("lr"));
8960 adjustHeight : function(height){
8961 if(typeof height == "number"){
8962 if(this.autoBoxAdjust && !this.isBorderBox()){
8963 height -= (this.getBorderWidth("tb") + this.getPadding("tb"));
8973 * Set the width of the element
8974 * @param {Number} width The new width
8975 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8976 * @return {Roo.Element} this
8978 setWidth : function(width, animate){
8979 width = this.adjustWidth(width);
8981 this.dom.style.width = this.addUnits(width);
8983 this.anim({width: {to: width}}, this.preanim(arguments, 1));
8989 * Set the height of the element
8990 * @param {Number} height The new height
8991 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8992 * @return {Roo.Element} this
8994 setHeight : function(height, animate){
8995 height = this.adjustHeight(height);
8997 this.dom.style.height = this.addUnits(height);
8999 this.anim({height: {to: height}}, this.preanim(arguments, 1));
9005 * Set the size of the element. If animation is true, both width an height will be animated concurrently.
9006 * @param {Number} width The new width
9007 * @param {Number} height The new height
9008 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9009 * @return {Roo.Element} this
9011 setSize : function(width, height, animate){
9012 if(typeof width == "object"){ // in case of object from getSize()
9013 height = width.height; width = width.width;
9015 width = this.adjustWidth(width); height = this.adjustHeight(height);
9017 this.dom.style.width = this.addUnits(width);
9018 this.dom.style.height = this.addUnits(height);
9020 this.anim({width: {to: width}, height: {to: height}}, this.preanim(arguments, 2));
9026 * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
9027 * @param {Number} x X value for new position (coordinates are page-based)
9028 * @param {Number} y Y value for new position (coordinates are page-based)
9029 * @param {Number} width The new width
9030 * @param {Number} height The new height
9031 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9032 * @return {Roo.Element} this
9034 setBounds : function(x, y, width, height, animate){
9036 this.setSize(width, height);
9037 this.setLocation(x, y);
9039 width = this.adjustWidth(width); height = this.adjustHeight(height);
9040 this.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},
9041 this.preanim(arguments, 4), 'motion');
9047 * 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.
9048 * @param {Roo.lib.Region} region The region to fill
9049 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9050 * @return {Roo.Element} this
9052 setRegion : function(region, animate){
9053 this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.preanim(arguments, 1));
9058 * Appends an event handler
9060 * @param {String} eventName The type of event to append
9061 * @param {Function} fn The method the event invokes
9062 * @param {Object} scope (optional) The scope (this object) of the fn
9063 * @param {Object} options (optional)An object with standard {@link Roo.EventManager#addListener} options
9065 addListener : function(eventName, fn, scope, options)
9067 if (eventName == 'dblclick') { // doublclick (touchstart) - faked on touch.
9068 this.addListener('touchstart', this.onTapHandler, this);
9071 // we need to handle a special case where dom element is a svg element.
9072 // in this case we do not actua
9077 if (this.dom instanceof SVGElement && !(this.dom instanceof SVGSVGElement)) {
9078 if (typeof(this.listeners[eventName]) == 'undefined') {
9079 this.listeners[eventName] = new Roo.util.Event(this, eventName);
9081 this.listeners[eventName].addListener(fn, scope, options);
9086 Roo.EventManager.on(this.dom, eventName, fn, scope || this, options);
9091 onTapHandler : function(event)
9093 if(!this.tapedTwice) {
9094 this.tapedTwice = true;
9096 setTimeout( function() {
9097 s.tapedTwice = false;
9101 event.preventDefault();
9102 var revent = new MouseEvent('dblclick', {
9108 this.dom.dispatchEvent(revent);
9109 //action on double tap goes below
9114 * Removes an event handler from this element
9115 * @param {String} eventName the type of event to remove
9116 * @param {Function} fn the method the event invokes
9117 * @param {Function} scope (needed for svg fake listeners)
9118 * @return {Roo.Element} this
9120 removeListener : function(eventName, fn, scope){
9121 Roo.EventManager.removeListener(this.dom, eventName, fn);
9122 if (typeof(this.listeners) == 'undefined' || typeof(this.listeners[eventName]) == 'undefined') {
9125 this.listeners[eventName].removeListener(fn, scope);
9130 * Removes all previous added listeners from this element
9131 * @return {Roo.Element} this
9133 removeAllListeners : function(){
9134 E.purgeElement(this.dom);
9135 this.listeners = {};
9139 relayEvent : function(eventName, observable){
9140 this.on(eventName, function(e){
9141 observable.fireEvent(eventName, e);
9147 * Set the opacity of the element
9148 * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
9149 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9150 * @return {Roo.Element} this
9152 setOpacity : function(opacity, animate){
9154 var s = this.dom.style;
9157 s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
9158 (opacity == 1 ? "" : "alpha(opacity=" + opacity * 100 + ")");
9160 s.opacity = opacity;
9163 this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
9169 * Gets the left X coordinate
9170 * @param {Boolean} local True to get the local css position instead of page coordinate
9173 getLeft : function(local){
9177 return parseInt(this.getStyle("left"), 10) || 0;
9182 * Gets the right X coordinate of the element (element X position + element width)
9183 * @param {Boolean} local True to get the local css position instead of page coordinate
9186 getRight : function(local){
9188 return this.getX() + this.getWidth();
9190 return (this.getLeft(true) + this.getWidth()) || 0;
9195 * Gets the top Y coordinate
9196 * @param {Boolean} local True to get the local css position instead of page coordinate
9199 getTop : function(local) {
9203 return parseInt(this.getStyle("top"), 10) || 0;
9208 * Gets the bottom Y coordinate of the element (element Y position + element height)
9209 * @param {Boolean} local True to get the local css position instead of page coordinate
9212 getBottom : function(local){
9214 return this.getY() + this.getHeight();
9216 return (this.getTop(true) + this.getHeight()) || 0;
9221 * Initializes positioning on this element. If a desired position is not passed, it will make the
9222 * the element positioned relative IF it is not already positioned.
9223 * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
9224 * @param {Number} zIndex (optional) The zIndex to apply
9225 * @param {Number} x (optional) Set the page X position
9226 * @param {Number} y (optional) Set the page Y position
9228 position : function(pos, zIndex, x, y){
9230 if(this.getStyle('position') == 'static'){
9231 this.setStyle('position', 'relative');
9234 this.setStyle("position", pos);
9237 this.setStyle("z-index", zIndex);
9239 if(x !== undefined && y !== undefined){
9241 }else if(x !== undefined){
9243 }else if(y !== undefined){
9249 * Clear positioning back to the default when the document was loaded
9250 * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
9251 * @return {Roo.Element} this
9253 clearPositioning : function(value){
9261 "position" : "static"
9267 * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
9268 * snapshot before performing an update and then restoring the element.
9271 getPositioning : function(){
9272 var l = this.getStyle("left");
9273 var t = this.getStyle("top");
9275 "position" : this.getStyle("position"),
9277 "right" : l ? "" : this.getStyle("right"),
9279 "bottom" : t ? "" : this.getStyle("bottom"),
9280 "z-index" : this.getStyle("z-index")
9285 * Gets the width of the border(s) for the specified side(s)
9286 * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
9287 * passing lr would get the border (l)eft width + the border (r)ight width.
9288 * @return {Number} The width of the sides passed added together
9290 getBorderWidth : function(side){
9291 return this.addStyles(side, El.borders);
9295 * Gets the width of the padding(s) for the specified side(s)
9296 * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
9297 * passing lr would get the padding (l)eft + the padding (r)ight.
9298 * @return {Number} The padding of the sides passed added together
9300 getPadding : function(side){
9301 return this.addStyles(side, El.paddings);
9305 * Set positioning with an object returned by getPositioning().
9306 * @param {Object} posCfg
9307 * @return {Roo.Element} this
9309 setPositioning : function(pc){
9310 this.applyStyles(pc);
9311 if(pc.right == "auto"){
9312 this.dom.style.right = "";
9314 if(pc.bottom == "auto"){
9315 this.dom.style.bottom = "";
9321 fixDisplay : function(){
9322 if(this.getStyle("display") == "none"){
9323 this.setStyle("visibility", "hidden");
9324 this.setStyle("display", this.originalDisplay); // first try reverting to default
9325 if(this.getStyle("display") == "none"){ // if that fails, default to block
9326 this.setStyle("display", "block");
9332 * Quick set left and top adding default units
9333 * @param {String} left The left CSS property value
9334 * @param {String} top The top CSS property value
9335 * @return {Roo.Element} this
9337 setLeftTop : function(left, top){
9338 this.dom.style.left = this.addUnits(left);
9339 this.dom.style.top = this.addUnits(top);
9344 * Move this element relative to its current position.
9345 * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
9346 * @param {Number} distance How far to move the element in pixels
9347 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9348 * @return {Roo.Element} this
9350 move : function(direction, distance, animate){
9351 var xy = this.getXY();
9352 direction = direction.toLowerCase();
9356 this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
9360 this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
9365 this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
9370 this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
9377 * Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
9378 * @return {Roo.Element} this
9381 if(!this.isClipped){
9382 this.isClipped = true;
9383 this.originalClip = {
9384 "o": this.getStyle("overflow"),
9385 "x": this.getStyle("overflow-x"),
9386 "y": this.getStyle("overflow-y")
9388 this.setStyle("overflow", "hidden");
9389 this.setStyle("overflow-x", "hidden");
9390 this.setStyle("overflow-y", "hidden");
9396 * Return clipping (overflow) to original clipping before clip() was called
9397 * @return {Roo.Element} this
9399 unclip : function(){
9401 this.isClipped = false;
9402 var o = this.originalClip;
9403 if(o.o){this.setStyle("overflow", o.o);}
9404 if(o.x){this.setStyle("overflow-x", o.x);}
9405 if(o.y){this.setStyle("overflow-y", o.y);}
9412 * Gets the x,y coordinates specified by the anchor position on the element.
9413 * @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo} for details on supported anchor positions.
9414 * @param {Object} size (optional) An object containing the size to use for calculating anchor position
9415 * {width: (target width), height: (target height)} (defaults to the element's current size)
9416 * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead of page coordinates
9417 * @return {Array} [x, y] An array containing the element's x and y coordinates
9419 getAnchorXY : function(anchor, local, s){
9420 //Passing a different size is useful for pre-calculating anchors,
9421 //especially for anchored animations that change the el size.
9423 var w, h, vp = false;
9426 if(d == document.body || d == document){
9428 w = D.getViewWidth(); h = D.getViewHeight();
9430 w = this.getWidth(); h = this.getHeight();
9433 w = s.width; h = s.height;
9435 var x = 0, y = 0, r = Math.round;
9436 switch((anchor || "tl").toLowerCase()){
9478 var sc = this.getScroll();
9479 return [x + sc.left, y + sc.top];
9481 //Add the element's offset xy
9482 var o = this.getXY();
9483 return [x+o[0], y+o[1]];
9487 * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
9488 * supported position values.
9489 * @param {String/HTMLElement/Roo.Element} element The element to align to.
9490 * @param {String} position The position to align to.
9491 * @param {Array} offsets (optional) Offset the positioning by [x, y]
9492 * @return {Array} [x, y]
9494 getAlignToXY : function(el, p, o)
9499 throw "Element.alignTo with an element that doesn't exist";
9501 var c = false; //constrain to viewport
9502 var p1 = "", p2 = "";
9509 }else if(p.indexOf("-") == -1){
9512 p = p.toLowerCase();
9513 var m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
9515 throw "Element.alignTo with an invalid alignment " + p;
9517 p1 = m[1]; p2 = m[2]; c = !!m[3];
9519 //Subtract the aligned el's internal xy from the target's offset xy
9520 //plus custom offset to get the aligned el's new offset xy
9521 var a1 = this.getAnchorXY(p1, true);
9522 var a2 = el.getAnchorXY(p2, false);
9523 var x = a2[0] - a1[0] + o[0];
9524 var y = a2[1] - a1[1] + o[1];
9526 //constrain the aligned el to viewport if necessary
9527 var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
9528 // 5px of margin for ie
9529 var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
9531 //If we are at a viewport boundary and the aligned el is anchored on a target border that is
9532 //perpendicular to the vp border, allow the aligned el to slide on that border,
9533 //otherwise swap the aligned el to the opposite border of the target.
9534 var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
9535 var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
9536 var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t") );
9537 var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
9540 var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
9541 var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
9543 if((x+w) > dw + scrollX){
9544 x = swapX ? r.left-w : dw+scrollX-w;
9547 x = swapX ? r.right : scrollX;
9549 if((y+h) > dh + scrollY){
9550 y = swapY ? r.top-h : dh+scrollY-h;
9553 y = swapY ? r.bottom : scrollY;
9560 getConstrainToXY : function(){
9561 var os = {top:0, left:0, bottom:0, right: 0};
9563 return function(el, local, offsets, proposedXY){
9565 offsets = offsets ? Roo.applyIf(offsets, os) : os;
9567 var vw, vh, vx = 0, vy = 0;
9568 if(el.dom == document.body || el.dom == document){
9569 vw = Roo.lib.Dom.getViewWidth();
9570 vh = Roo.lib.Dom.getViewHeight();
9572 vw = el.dom.clientWidth;
9573 vh = el.dom.clientHeight;
9575 var vxy = el.getXY();
9581 var s = el.getScroll();
9583 vx += offsets.left + s.left;
9584 vy += offsets.top + s.top;
9586 vw -= offsets.right;
9587 vh -= offsets.bottom;
9592 var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
9593 var x = xy[0], y = xy[1];
9594 var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
9596 // only move it if it needs it
9599 // first validate right/bottom
9608 // then make sure top/left isn't negative
9617 return moved ? [x, y] : false;
9622 adjustForConstraints : function(xy, parent, offsets){
9623 return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
9627 * Aligns this element with another element relative to the specified anchor points. If the other element is the
9628 * document it aligns it to the viewport.
9629 * The position parameter is optional, and can be specified in any one of the following formats:
9631 * <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
9632 * <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
9633 * The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
9634 * deprecated in favor of the newer two anchor syntax below</i>.</li>
9635 * <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
9636 * element's anchor point, and the second value is used as the target's anchor point.</li>
9638 * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
9639 * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
9640 * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
9641 * that specified in order to enforce the viewport constraints.
9642 * Following are all of the supported anchor positions:
9645 ----- -----------------------------
9646 tl The top left corner (default)
9647 t The center of the top edge
9648 tr The top right corner
9649 l The center of the left edge
9650 c In the center of the element
9651 r The center of the right edge
9652 bl The bottom left corner
9653 b The center of the bottom edge
9654 br The bottom right corner
9658 // align el to other-el using the default positioning ("tl-bl", non-constrained)
9659 el.alignTo("other-el");
9661 // align the top left corner of el with the top right corner of other-el (constrained to viewport)
9662 el.alignTo("other-el", "tr?");
9664 // align the bottom right corner of el with the center left edge of other-el
9665 el.alignTo("other-el", "br-l?");
9667 // align the center of el with the bottom left corner of other-el and
9668 // adjust the x position by -6 pixels (and the y position by 0)
9669 el.alignTo("other-el", "c-bl", [-6, 0]);
9671 * @param {String/HTMLElement/Roo.Element} element The element to align to.
9672 * @param {String} position The position to align to.
9673 * @param {Array} offsets (optional) Offset the positioning by [x, y]
9674 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9675 * @return {Roo.Element} this
9677 alignTo : function(element, position, offsets, animate){
9678 var xy = this.getAlignToXY(element, position, offsets);
9679 this.setXY(xy, this.preanim(arguments, 3));
9684 * Anchors an element to another element and realigns it when the window is resized.
9685 * @param {String/HTMLElement/Roo.Element} element The element to align to.
9686 * @param {String} position The position to align to.
9687 * @param {Array} offsets (optional) Offset the positioning by [x, y]
9688 * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
9689 * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
9690 * is a number, it is used as the buffer delay (defaults to 50ms).
9691 * @param {Function} callback The function to call after the animation finishes
9692 * @return {Roo.Element} this
9694 anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
9695 var action = function(){
9696 this.alignTo(el, alignment, offsets, animate);
9697 Roo.callback(callback, this);
9699 Roo.EventManager.onWindowResize(action, this);
9700 var tm = typeof monitorScroll;
9701 if(tm != 'undefined'){
9702 Roo.EventManager.on(window, 'scroll', action, this,
9703 {buffer: tm == 'number' ? monitorScroll : 50});
9705 action.call(this); // align immediately
9709 * Clears any opacity settings from this element. Required in some cases for IE.
9710 * @return {Roo.Element} this
9712 clearOpacity : function(){
9713 if (window.ActiveXObject) {
9714 if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
9715 this.dom.style.filter = "";
9718 this.dom.style.opacity = "";
9719 this.dom.style["-moz-opacity"] = "";
9720 this.dom.style["-khtml-opacity"] = "";
9726 * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
9727 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9728 * @return {Roo.Element} this
9730 hide : function(animate){
9731 this.setVisible(false, this.preanim(arguments, 0));
9736 * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
9737 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9738 * @return {Roo.Element} this
9740 show : function(animate){
9741 this.setVisible(true, this.preanim(arguments, 0));
9746 * @private Test if size has a unit, otherwise appends the default
9748 addUnits : function(size){
9749 return Roo.Element.addUnits(size, this.defaultUnit);
9753 * Temporarily enables offsets (width,height,x,y) for an element with display:none, use endMeasure() when done.
9754 * @return {Roo.Element} this
9756 beginMeasure : function(){
9758 if(el.offsetWidth || el.offsetHeight){
9759 return this; // offsets work already
9762 var p = this.dom, b = document.body; // start with this element
9763 while((!el.offsetWidth && !el.offsetHeight) && p && p.tagName && p != b){
9764 var pe = Roo.get(p);
9765 if(pe.getStyle('display') == 'none'){
9766 changed.push({el: p, visibility: pe.getStyle("visibility")});
9767 p.style.visibility = "hidden";
9768 p.style.display = "block";
9772 this._measureChanged = changed;
9778 * Restores displays to before beginMeasure was called
9779 * @return {Roo.Element} this
9781 endMeasure : function(){
9782 var changed = this._measureChanged;
9784 for(var i = 0, len = changed.length; i < len; i++) {
9786 r.el.style.visibility = r.visibility;
9787 r.el.style.display = "none";
9789 this._measureChanged = null;
9795 * Update the innerHTML of this element, optionally searching for and processing scripts
9796 * @param {String} html The new HTML
9797 * @param {Boolean} loadScripts (optional) true to look for and process scripts
9798 * @param {Function} callback For async script loading you can be noticed when the update completes
9799 * @return {Roo.Element} this
9801 update : function(html, loadScripts, callback){
9802 if(typeof html == "undefined"){
9805 if(loadScripts !== true){
9806 this.dom.innerHTML = html;
9807 if(typeof callback == "function"){
9815 html += '<span id="' + id + '"></span>';
9817 E.onAvailable(id, function(){
9818 var hd = document.getElementsByTagName("head")[0];
9819 var re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
9820 var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
9821 var typeRe = /\stype=([\'\"])(.*?)\1/i;
9824 while(match = re.exec(html)){
9825 var attrs = match[1];
9826 var srcMatch = attrs ? attrs.match(srcRe) : false;
9827 if(srcMatch && srcMatch[2]){
9828 var s = document.createElement("script");
9829 s.src = srcMatch[2];
9830 var typeMatch = attrs.match(typeRe);
9831 if(typeMatch && typeMatch[2]){
9832 s.type = typeMatch[2];
9835 }else if(match[2] && match[2].length > 0){
9836 if(window.execScript) {
9837 window.execScript(match[2]);
9845 window.eval(match[2]);
9849 var el = document.getElementById(id);
9850 if(el){el.parentNode.removeChild(el);}
9851 if(typeof callback == "function"){
9855 dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
9860 * Direct access to the UpdateManager update() method (takes the same parameters).
9861 * @param {String/Function} url The url for this request or a function to call to get the url
9862 * @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}
9863 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
9864 * @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.
9865 * @return {Roo.Element} this
9868 var um = this.getUpdateManager();
9869 um.update.apply(um, arguments);
9874 * Gets this element's UpdateManager
9875 * @return {Roo.UpdateManager} The UpdateManager
9877 getUpdateManager : function(){
9878 if(!this.updateManager){
9879 this.updateManager = new Roo.UpdateManager(this);
9881 return this.updateManager;
9885 * Disables text selection for this element (normalized across browsers)
9886 * @return {Roo.Element} this
9888 unselectable : function(){
9889 this.dom.unselectable = "on";
9890 this.swallowEvent("selectstart", true);
9891 this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
9892 this.addClass("x-unselectable");
9897 * Calculates the x, y to center this element on the screen
9898 * @return {Array} The x, y values [x, y]
9900 getCenterXY : function(){
9901 return this.getAlignToXY(document, 'c-c');
9905 * Centers the Element in either the viewport, or another Element.
9906 * @param {String/HTMLElement/Roo.Element} centerIn (optional) The element in which to center the element.
9908 center : function(centerIn){
9909 this.alignTo(centerIn || document, 'c-c');
9914 * Tests various css rules/browsers to determine if this element uses a border box
9917 isBorderBox : function(){
9918 return noBoxAdjust[this.dom.tagName.toLowerCase()] || Roo.isBorderBox;
9922 * Return a box {x, y, width, height} that can be used to set another elements
9923 * size/location to match this element.
9924 * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
9925 * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
9926 * @return {Object} box An object in the format {x, y, width, height}
9928 getBox : function(contentBox, local){
9933 var left = parseInt(this.getStyle("left"), 10) || 0;
9934 var top = parseInt(this.getStyle("top"), 10) || 0;
9937 var el = this.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
9939 bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
9941 var l = this.getBorderWidth("l")+this.getPadding("l");
9942 var r = this.getBorderWidth("r")+this.getPadding("r");
9943 var t = this.getBorderWidth("t")+this.getPadding("t");
9944 var b = this.getBorderWidth("b")+this.getPadding("b");
9945 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)};
9947 bx.right = bx.x + bx.width;
9948 bx.bottom = bx.y + bx.height;
9953 * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
9954 for more information about the sides.
9955 * @param {String} sides
9958 getFrameWidth : function(sides, onlyContentBox){
9959 return onlyContentBox && Roo.isBorderBox ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
9963 * 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.
9964 * @param {Object} box The box to fill {x, y, width, height}
9965 * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
9966 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9967 * @return {Roo.Element} this
9969 setBox : function(box, adjust, animate){
9970 var w = box.width, h = box.height;
9971 if((adjust && !this.autoBoxAdjust) && !this.isBorderBox()){
9972 w -= (this.getBorderWidth("lr") + this.getPadding("lr"));
9973 h -= (this.getBorderWidth("tb") + this.getPadding("tb"));
9975 this.setBounds(box.x, box.y, w, h, this.preanim(arguments, 2));
9980 * Forces the browser to repaint this element
9981 * @return {Roo.Element} this
9983 repaint : function(){
9985 this.addClass("x-repaint");
9986 setTimeout(function(){
9987 Roo.get(dom).removeClass("x-repaint");
9993 * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
9994 * then it returns the calculated width of the sides (see getPadding)
9995 * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
9996 * @return {Object/Number}
9998 getMargins : function(side){
10001 top: parseInt(this.getStyle("margin-top"), 10) || 0,
10002 left: parseInt(this.getStyle("margin-left"), 10) || 0,
10003 bottom: parseInt(this.getStyle("margin-bottom"), 10) || 0,
10004 right: parseInt(this.getStyle("margin-right"), 10) || 0
10007 return this.addStyles(side, El.margins);
10012 addStyles : function(sides, styles){
10014 for(var i = 0, len = sides.length; i < len; i++){
10015 v = this.getStyle(styles[sides.charAt(i)]);
10017 w = parseInt(v, 10);
10025 * Creates a proxy element of this element
10026 * @param {String/Object} config The class name of the proxy element or a DomHelper config object
10027 * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
10028 * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
10029 * @return {Roo.Element} The new proxy element
10031 createProxy : function(config, renderTo, matchBox){
10033 renderTo = Roo.getDom(renderTo);
10035 renderTo = document.body;
10037 config = typeof config == "object" ?
10038 config : {tag : "div", cls: config};
10039 var proxy = Roo.DomHelper.append(renderTo, config, true);
10041 proxy.setBox(this.getBox());
10047 * Puts a mask over this element to disable user interaction. Requires core.css.
10048 * This method can only be applied to elements which accept child nodes.
10049 * @param {String} msg (optional) A message to display in the mask
10050 * @param {String} msgCls (optional) A css class to apply to the msg element - use no-spinner to hide the spinner on bootstrap
10051 * @return {Element} The mask element
10053 mask : function(msg, msgCls)
10055 if(this.getStyle("position") == "static" && this.dom.tagName !== 'BODY'){
10056 this.setStyle("position", "relative");
10059 this._mask = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask"}, true);
10062 this.addClass("x-masked");
10063 this._mask.setDisplayed(true);
10067 var dom = this.dom;
10068 while (dom && dom.style) {
10069 if (!isNaN(parseInt(dom.style.zIndex))) {
10070 z = Math.max(z, parseInt(dom.style.zIndex));
10072 dom = dom.parentNode;
10074 // if we are masking the body - then it hides everything..
10075 if (this.dom == document.body) {
10077 this._mask.setWidth(Roo.lib.Dom.getDocumentWidth());
10078 this._mask.setHeight(Roo.lib.Dom.getDocumentHeight());
10081 if(typeof msg == 'string'){
10082 if(!this._maskMsg){
10083 this._maskMsg = Roo.DomHelper.append(this.dom, {
10084 cls: "roo-el-mask-msg",
10088 cls: 'fa fa-spinner fa-spin'
10096 var mm = this._maskMsg;
10097 mm.dom.className = msgCls ? "roo-el-mask-msg " + msgCls : "roo-el-mask-msg";
10098 if (mm.dom.lastChild) { // weird IE issue?
10099 mm.dom.lastChild.innerHTML = msg;
10101 mm.setDisplayed(true);
10103 mm.setStyle('z-index', z + 102);
10105 if(Roo.isIE && !(Roo.isIE7 && Roo.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
10106 this._mask.setHeight(this.getHeight());
10108 this._mask.setStyle('z-index', z + 100);
10114 * Removes a previously applied mask. If removeEl is true the mask overlay is destroyed, otherwise
10115 * it is cached for reuse.
10117 unmask : function(removeEl){
10119 if(removeEl === true){
10120 this._mask.remove();
10123 this._maskMsg.remove();
10124 delete this._maskMsg;
10127 this._mask.setDisplayed(false);
10129 this._maskMsg.setDisplayed(false);
10133 this.removeClass("x-masked");
10137 * Returns true if this element is masked
10138 * @return {Boolean}
10140 isMasked : function(){
10141 return this._mask && this._mask.isVisible();
10145 * Creates an iframe shim for this element to keep selects and other windowed objects from
10147 * @return {Roo.Element} The new shim element
10149 createShim : function(){
10150 var el = document.createElement('iframe');
10151 el.frameBorder = 'no';
10152 el.className = 'roo-shim';
10153 if(Roo.isIE && Roo.isSecure){
10154 el.src = Roo.SSL_SECURE_URL;
10156 var shim = Roo.get(this.dom.parentNode.insertBefore(el, this.dom));
10157 shim.autoBoxAdjust = false;
10162 * Removes this element from the DOM and deletes it from the cache
10164 remove : function(){
10165 if(this.dom.parentNode){
10166 this.dom.parentNode.removeChild(this.dom);
10168 delete El.cache[this.dom.id];
10172 * Sets up event handlers to add and remove a css class when the mouse is over this element
10173 * @param {String} className
10174 * @param {Boolean} preventFlicker (optional) If set to true, it prevents flickering by filtering
10175 * mouseout events for children elements
10176 * @return {Roo.Element} this
10178 addClassOnOver : function(className, preventFlicker){
10179 this.on("mouseover", function(){
10180 Roo.fly(this, '_internal').addClass(className);
10182 var removeFn = function(e){
10183 if(preventFlicker !== true || !e.within(this, true)){
10184 Roo.fly(this, '_internal').removeClass(className);
10187 this.on("mouseout", removeFn, this.dom);
10192 * Sets up event handlers to add and remove a css class when this element has the focus
10193 * @param {String} className
10194 * @return {Roo.Element} this
10196 addClassOnFocus : function(className){
10197 this.on("focus", function(){
10198 Roo.fly(this, '_internal').addClass(className);
10200 this.on("blur", function(){
10201 Roo.fly(this, '_internal').removeClass(className);
10206 * 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)
10207 * @param {String} className
10208 * @return {Roo.Element} this
10210 addClassOnClick : function(className){
10211 var dom = this.dom;
10212 this.on("mousedown", function(){
10213 Roo.fly(dom, '_internal').addClass(className);
10214 var d = Roo.get(document);
10215 var fn = function(){
10216 Roo.fly(dom, '_internal').removeClass(className);
10217 d.removeListener("mouseup", fn);
10219 d.on("mouseup", fn);
10225 * Stops the specified event from bubbling and optionally prevents the default action
10226 * @param {String} eventName
10227 * @param {Boolean} preventDefault (optional) true to prevent the default action too
10228 * @return {Roo.Element} this
10230 swallowEvent : function(eventName, preventDefault){
10231 var fn = function(e){
10232 e.stopPropagation();
10233 if(preventDefault){
10234 e.preventDefault();
10237 if(eventName instanceof Array){
10238 for(var i = 0, len = eventName.length; i < len; i++){
10239 this.on(eventName[i], fn);
10243 this.on(eventName, fn);
10250 fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate
10253 * Sizes this element to its parent element's dimensions performing
10254 * neccessary box adjustments.
10255 * @param {Boolean} monitorResize (optional) If true maintains the fit when the browser window is resized.
10256 * @param {String/HTMLElment/Element} targetParent (optional) The target parent, default to the parentNode.
10257 * @return {Roo.Element} this
10259 fitToParent : function(monitorResize, targetParent) {
10260 Roo.EventManager.removeResizeListener(this.fitToParentDelegate); // always remove previous fitToParent delegate from onWindowResize
10261 this.fitToParentDelegate = Roo.emptyFn; // remove reference to previous delegate
10262 if (monitorResize === true && !this.dom.parentNode) { // check if this Element still exists
10265 var p = Roo.get(targetParent || this.dom.parentNode);
10266 this.setSize(p.getComputedWidth() - p.getFrameWidth('lr'), p.getComputedHeight() - p.getFrameWidth('tb'));
10267 if (monitorResize === true) {
10268 this.fitToParentDelegate = this.fitToParent.createDelegate(this, [true, targetParent]);
10269 Roo.EventManager.onWindowResize(this.fitToParentDelegate);
10275 * Gets the next sibling, skipping text nodes
10276 * @return {HTMLElement} The next sibling or null
10278 getNextSibling : function(){
10279 var n = this.dom.nextSibling;
10280 while(n && n.nodeType != 1){
10287 * Gets the previous sibling, skipping text nodes
10288 * @return {HTMLElement} The previous sibling or null
10290 getPrevSibling : function(){
10291 var n = this.dom.previousSibling;
10292 while(n && n.nodeType != 1){
10293 n = n.previousSibling;
10300 * Appends the passed element(s) to this element
10301 * @param {String/HTMLElement/Array/Element/CompositeElement} el
10302 * @return {Roo.Element} this
10304 appendChild: function(el){
10311 * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
10312 * @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be
10313 * automatically generated with the specified attributes.
10314 * @param {HTMLElement} insertBefore (optional) a child element of this element
10315 * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
10316 * @return {Roo.Element} The new child element
10318 createChild: function(config, insertBefore, returnDom){
10319 config = config || {tag:'div'};
10321 return Roo.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
10323 return Roo.DomHelper[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config, returnDom !== true);
10327 * Appends this element to the passed element
10328 * @param {String/HTMLElement/Element} el The new parent element
10329 * @return {Roo.Element} this
10331 appendTo: function(el){
10332 el = Roo.getDom(el);
10333 el.appendChild(this.dom);
10338 * Inserts this element before the passed element in the DOM
10339 * @param {String/HTMLElement/Element} el The element to insert before
10340 * @return {Roo.Element} this
10342 insertBefore: function(el){
10343 el = Roo.getDom(el);
10344 el.parentNode.insertBefore(this.dom, el);
10349 * Inserts this element after the passed element in the DOM
10350 * @param {String/HTMLElement/Element} el The element to insert after
10351 * @return {Roo.Element} this
10353 insertAfter: function(el){
10354 el = Roo.getDom(el);
10355 el.parentNode.insertBefore(this.dom, el.nextSibling);
10360 * Inserts (or creates) an element (or DomHelper config) as the first child of the this element
10361 * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
10362 * @return {Roo.Element} The new child
10364 insertFirst: function(el, returnDom){
10366 if(typeof el == 'object' && !el.nodeType){ // dh config
10367 return this.createChild(el, this.dom.firstChild, returnDom);
10369 el = Roo.getDom(el);
10370 this.dom.insertBefore(el, this.dom.firstChild);
10371 return !returnDom ? Roo.get(el) : el;
10376 * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
10377 * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
10378 * @param {String} where (optional) 'before' or 'after' defaults to before
10379 * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
10380 * @return {Roo.Element} the inserted Element
10382 insertSibling: function(el, where, returnDom){
10383 where = where ? where.toLowerCase() : 'before';
10385 var rt, refNode = where == 'before' ? this.dom : this.dom.nextSibling;
10387 if(typeof el == 'object' && !el.nodeType){ // dh config
10388 if(where == 'after' && !this.dom.nextSibling){
10389 rt = Roo.DomHelper.append(this.dom.parentNode, el, !returnDom);
10391 rt = Roo.DomHelper[where == 'after' ? 'insertAfter' : 'insertBefore'](this.dom, el, !returnDom);
10395 rt = this.dom.parentNode.insertBefore(Roo.getDom(el),
10396 where == 'before' ? this.dom : this.dom.nextSibling);
10405 * Creates and wraps this element with another element
10406 * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
10407 * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
10408 * @return {HTMLElement/Element} The newly created wrapper element
10410 wrap: function(config, returnDom){
10412 config = {tag: "div"};
10414 var newEl = Roo.DomHelper.insertBefore(this.dom, config, !returnDom);
10415 newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
10420 * Replaces the passed element with this element
10421 * @param {String/HTMLElement/Element} el The element to replace
10422 * @return {Roo.Element} this
10424 replace: function(el){
10426 this.insertBefore(el);
10432 * Inserts an html fragment into this element
10433 * @param {String} where Where to insert the html in relation to the this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
10434 * @param {String} html The HTML fragment
10435 * @param {Boolean} returnEl True to return an Roo.Element
10436 * @return {HTMLElement/Roo.Element} The inserted node (or nearest related if more than 1 inserted)
10438 insertHtml : function(where, html, returnEl){
10439 var el = Roo.DomHelper.insertHtml(where, this.dom, html);
10440 return returnEl ? Roo.get(el) : el;
10444 * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
10445 * @param {Object} o The object with the attributes
10446 * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
10447 * @return {Roo.Element} this
10449 set : function(o, useSet){
10451 useSet = typeof useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
10452 for(var attr in o){
10453 if(attr == "style" || typeof o[attr] == "function") { continue; }
10455 el.className = o["cls"];
10458 el.setAttribute(attr, o[attr]);
10460 el[attr] = o[attr];
10465 Roo.DomHelper.applyStyles(el, o.style);
10471 * Convenience method for constructing a KeyMap
10472 * @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:
10473 * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
10474 * @param {Function} fn The function to call
10475 * @param {Object} scope (optional) The scope of the function
10476 * @return {Roo.KeyMap} The KeyMap created
10478 addKeyListener : function(key, fn, scope){
10480 if(typeof key != "object" || key instanceof Array){
10496 return new Roo.KeyMap(this, config);
10500 * Creates a KeyMap for this element
10501 * @param {Object} config The KeyMap config. See {@link Roo.KeyMap} for more details
10502 * @return {Roo.KeyMap} The KeyMap created
10504 addKeyMap : function(config){
10505 return new Roo.KeyMap(this, config);
10509 * Returns true if this element is scrollable.
10510 * @return {Boolean}
10512 isScrollable : function(){
10513 var dom = this.dom;
10514 return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
10518 * 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().
10519 * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
10520 * @param {Number} value The new scroll value
10521 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10522 * @return {Element} this
10525 scrollTo : function(side, value, animate){
10526 var prop = side.toLowerCase() == "left" ? "scrollLeft" : "scrollTop";
10527 if(!animate || !A){
10528 this.dom[prop] = value;
10530 var to = prop == "scrollLeft" ? [value, this.dom.scrollTop] : [this.dom.scrollLeft, value];
10531 this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
10537 * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
10538 * within this element's scrollable range.
10539 * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
10540 * @param {Number} distance How far to scroll the element in pixels
10541 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10542 * @return {Boolean} Returns true if a scroll was triggered or false if the element
10543 * was scrolled as far as it could go.
10545 scroll : function(direction, distance, animate){
10546 if(!this.isScrollable()){
10550 var l = el.scrollLeft, t = el.scrollTop;
10551 var w = el.scrollWidth, h = el.scrollHeight;
10552 var cw = el.clientWidth, ch = el.clientHeight;
10553 direction = direction.toLowerCase();
10554 var scrolled = false;
10555 var a = this.preanim(arguments, 2);
10560 var v = Math.min(l + distance, w-cw);
10561 this.scrollTo("left", v, a);
10568 var v = Math.max(l - distance, 0);
10569 this.scrollTo("left", v, a);
10577 var v = Math.max(t - distance, 0);
10578 this.scrollTo("top", v, a);
10586 var v = Math.min(t + distance, h-ch);
10587 this.scrollTo("top", v, a);
10596 * Translates the passed page coordinates into left/top css values for this element
10597 * @param {Number/Array} x The page x or an array containing [x, y]
10598 * @param {Number} y The page y
10599 * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
10601 translatePoints : function(x, y){
10602 if(typeof x == 'object' || x instanceof Array){
10603 y = x[1]; x = x[0];
10605 var p = this.getStyle('position');
10606 var o = this.getXY();
10608 var l = parseInt(this.getStyle('left'), 10);
10609 var t = parseInt(this.getStyle('top'), 10);
10612 l = (p == "relative") ? 0 : this.dom.offsetLeft;
10615 t = (p == "relative") ? 0 : this.dom.offsetTop;
10618 return {left: (x - o[0] + l), top: (y - o[1] + t)};
10622 * Returns the current scroll position of the element.
10623 * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
10625 getScroll : function(){
10626 var d = this.dom, doc = document;
10627 if(d == doc || d == doc.body){
10628 var l = window.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0;
10629 var t = window.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop || 0;
10630 return {left: l, top: t};
10632 return {left: d.scrollLeft, top: d.scrollTop};
10637 * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
10638 * are convert to standard 6 digit hex color.
10639 * @param {String} attr The css attribute
10640 * @param {String} defaultValue The default value to use when a valid color isn't found
10641 * @param {String} prefix (optional) defaults to #. Use an empty string when working with
10644 getColor : function(attr, defaultValue, prefix){
10645 var v = this.getStyle(attr);
10646 if(!v || v == "transparent" || v == "inherit") {
10647 return defaultValue;
10649 var color = typeof prefix == "undefined" ? "#" : prefix;
10650 if(v.substr(0, 4) == "rgb("){
10651 var rvs = v.slice(4, v.length -1).split(",");
10652 for(var i = 0; i < 3; i++){
10653 var h = parseInt(rvs[i]).toString(16);
10660 if(v.substr(0, 1) == "#"){
10661 if(v.length == 4) {
10662 for(var i = 1; i < 4; i++){
10663 var c = v.charAt(i);
10666 }else if(v.length == 7){
10667 color += v.substr(1);
10671 return(color.length > 5 ? color.toLowerCase() : defaultValue);
10675 * Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a
10676 * gradient background, rounded corners and a 4-way shadow.
10677 * @param {String} class (optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box').
10678 * Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
10679 * so if you supply an alternate base class, make sure you also supply all of the necessary rules.
10680 * @return {Roo.Element} this
10682 boxWrap : function(cls){
10683 cls = cls || 'x-box';
10684 var el = Roo.get(this.insertHtml('beforeBegin', String.format('<div class="{0}">'+El.boxMarkup+'</div>', cls)));
10685 el.child('.'+cls+'-mc').dom.appendChild(this.dom);
10690 * Returns the value of a namespaced attribute from the element's underlying DOM node.
10691 * @param {String} namespace The namespace in which to look for the attribute
10692 * @param {String} name The attribute name
10693 * @return {String} The attribute value
10695 getAttributeNS : Roo.isIE ? function(ns, name){
10697 var type = typeof d[ns+":"+name];
10698 if(type != 'undefined' && type != 'unknown'){
10699 return d[ns+":"+name];
10702 } : function(ns, name){
10704 return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
10709 * Sets or Returns the value the dom attribute value
10710 * @param {String|Object} name The attribute name (or object to set multiple attributes)
10711 * @param {String} value (optional) The value to set the attribute to
10712 * @return {String} The attribute value
10714 attr : function(name){
10715 if (arguments.length > 1) {
10716 this.dom.setAttribute(name, arguments[1]);
10717 return arguments[1];
10719 if (typeof(name) == 'object') {
10720 for(var i in name) {
10721 this.attr(i, name[i]);
10727 if (!this.dom.hasAttribute(name)) {
10730 return this.dom.getAttribute(name);
10737 var ep = El.prototype;
10740 * Appends an event handler (Shorthand for addListener)
10741 * @param {String} eventName The type of event to append
10742 * @param {Function} fn The method the event invokes
10743 * @param {Object} scope (optional) The scope (this object) of the fn
10744 * @param {Object} options (optional)An object with standard {@link Roo.EventManager#addListener} options
10747 ep.on = ep.addListener;
10748 // backwards compat
10749 ep.mon = ep.addListener;
10752 * Removes an event handler from this element (shorthand for removeListener)
10753 * @param {String} eventName the type of event to remove
10754 * @param {Function} fn the method the event invokes
10755 * @return {Roo.Element} this
10758 ep.un = ep.removeListener;
10761 * true to automatically adjust width and height settings for box-model issues (default to true)
10763 ep.autoBoxAdjust = true;
10766 El.unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;
10769 El.addUnits = function(v, defaultUnit){
10770 if(v === "" || v == "auto"){
10773 if(v === undefined){
10776 if(typeof v == "number" || !El.unitPattern.test(v)){
10777 return v + (defaultUnit || 'px');
10782 // special markup used throughout Roo when box wrapping elements
10783 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>';
10785 * Visibility mode constant - Use visibility to hide element
10791 * Visibility mode constant - Use display to hide element
10797 El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
10798 El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
10799 El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};
10811 * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
10812 * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
10813 * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
10814 * @return {Element} The Element object
10817 El.get = function(el){
10819 if(!el){ return null; }
10820 if(typeof el == "string"){ // element id
10821 if(!(elm = document.getElementById(el))){
10824 if(ex = El.cache[el]){
10827 ex = El.cache[el] = new El(elm);
10830 }else if(el.tagName){ // dom element
10834 if(ex = El.cache[id]){
10837 ex = El.cache[id] = new El(el);
10840 }else if(el instanceof El){
10842 el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
10843 // catch case where it hasn't been appended
10844 El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
10847 }else if(el.isComposite){
10849 }else if(el instanceof Array){
10850 return El.select(el);
10851 }else if(el == document){
10852 // create a bogus element object representing the document object
10854 var f = function(){};
10855 f.prototype = El.prototype;
10857 docEl.dom = document;
10865 El.uncache = function(el){
10866 for(var i = 0, a = arguments, len = a.length; i < len; i++) {
10868 delete El.cache[a[i].id || a[i]];
10874 // Garbage collection - uncache elements/purge listeners on orphaned elements
10875 // so we don't hold a reference and cause the browser to retain them
10876 El.garbageCollect = function(){
10877 if(!Roo.enableGarbageCollector){
10878 clearInterval(El.collectorThread);
10881 for(var eid in El.cache){
10882 var el = El.cache[eid], d = el.dom;
10883 // -------------------------------------------------------
10884 // Determining what is garbage:
10885 // -------------------------------------------------------
10887 // dom node is null, definitely garbage
10888 // -------------------------------------------------------
10890 // no parentNode == direct orphan, definitely garbage
10891 // -------------------------------------------------------
10892 // !d.offsetParent && !document.getElementById(eid)
10893 // display none elements have no offsetParent so we will
10894 // also try to look it up by it's id. However, check
10895 // offsetParent first so we don't do unneeded lookups.
10896 // This enables collection of elements that are not orphans
10897 // directly, but somewhere up the line they have an orphan
10899 // -------------------------------------------------------
10900 if(!d || !d.parentNode || (!d.offsetParent && !document.getElementById(eid))){
10901 delete El.cache[eid];
10902 if(d && Roo.enableListenerCollection){
10908 El.collectorThreadId = setInterval(El.garbageCollect, 30000);
10912 El.Flyweight = function(dom){
10915 El.Flyweight.prototype = El.prototype;
10917 El._flyweights = {};
10919 * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
10920 * the dom node can be overwritten by other code.
10921 * @param {String/HTMLElement} el The dom node or id
10922 * @param {String} named (optional) Allows for creation of named reusable flyweights to
10923 * prevent conflicts (e.g. internally Roo uses "_internal")
10925 * @return {Element} The shared Element object
10927 El.fly = function(el, named){
10928 named = named || '_global';
10929 el = Roo.getDom(el);
10933 if(!El._flyweights[named]){
10934 El._flyweights[named] = new El.Flyweight();
10936 El._flyweights[named].dom = el;
10937 return El._flyweights[named];
10941 * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
10942 * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
10943 * Shorthand of {@link Roo.Element#get}
10944 * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
10945 * @return {Element} The Element object
10951 * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
10952 * the dom node can be overwritten by other code.
10953 * Shorthand of {@link Roo.Element#fly}
10954 * @param {String/HTMLElement} el The dom node or id
10955 * @param {String} named (optional) Allows for creation of named reusable flyweights to
10956 * prevent conflicts (e.g. internally Roo uses "_internal")
10958 * @return {Element} The shared Element object
10964 // speedy lookup for elements never to box adjust
10965 var noBoxAdjust = Roo.isStrict ? {
10968 input:1, select:1, textarea:1
10970 if(Roo.isIE || Roo.isGecko){
10971 noBoxAdjust['button'] = 1;
10975 Roo.EventManager.on(window, 'unload', function(){
10977 delete El._flyweights;
10985 Roo.Element.selectorFunction = Roo.DomQuery.select;
10988 Roo.Element.select = function(selector, unique, root){
10990 if(typeof selector == "string"){
10991 els = Roo.Element.selectorFunction(selector, root);
10992 }else if(selector.length !== undefined){
10995 throw "Invalid selector";
10997 if(unique === true){
10998 return new Roo.CompositeElement(els);
11000 return new Roo.CompositeElementLite(els);
11004 * Selects elements based on the passed CSS selector to enable working on them as 1.
11005 * @param {String/Array} selector The CSS selector or an array of elements
11006 * @param {Boolean} unique (optional) true to create a unique Roo.Element for each element (defaults to a shared flyweight object)
11007 * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
11008 * @return {CompositeElementLite/CompositeElement}
11012 Roo.select = Roo.Element.select;
11029 * Ext JS Library 1.1.1
11030 * Copyright(c) 2006-2007, Ext JS, LLC.
11032 * Originally Released Under LGPL - original licence link has changed is not relivant.
11035 * <script type="text/javascript">
11040 //Notifies Element that fx methods are available
11041 Roo.enableFx = true;
11045 * <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied
11046 * to the {@link Roo.Element} interface when included, so all effects calls should be performed via Element.
11047 * Conversely, since the effects are not actually defined in Element, Roo.Fx <b>must</b> be included in order for the
11048 * Element effects to work.</p><br/>
11050 * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
11051 * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
11052 * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
11053 * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason,
11054 * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
11055 * expected results and should be done with care.</p><br/>
11057 * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
11058 * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p>
11061 ----- -----------------------------
11062 tl The top left corner
11063 t The center of the top edge
11064 tr The top right corner
11065 l The center of the left edge
11066 r The center of the right edge
11067 bl The bottom left corner
11068 b The center of the bottom edge
11069 br The bottom right corner
11071 * <b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
11072 * below are common options that can be passed to any Fx method.</b>
11073 * @cfg {Function} callback A function called when the effect is finished
11074 * @cfg {Object} scope The scope of the effect function
11075 * @cfg {String} easing A valid Easing value for the effect
11076 * @cfg {String} afterCls A css class to apply after the effect
11077 * @cfg {Number} duration The length of time (in seconds) that the effect should last
11078 * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
11079 * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to
11080 * effects that end with the element being visually hidden, ignored otherwise)
11081 * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or
11082 * a function which returns such a specification that will be applied to the Element after the effect finishes
11083 * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
11084 * @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
11085 * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
11089 * Slides the element into view. An anchor point can be optionally passed to set the point of
11090 * origin for the slide effect. This function automatically handles wrapping the element with
11091 * a fixed-size container if needed. See the Fx class overview for valid anchor point options.
11094 // default: slide the element in from the top
11097 // custom: slide the element in from the right with a 2-second duration
11098 el.slideIn('r', { duration: 2 });
11100 // common config options shown with default values
11106 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
11107 * @param {Object} options (optional) Object literal with any of the Fx config options
11108 * @return {Roo.Element} The Element
11110 slideIn : function(anchor, o){
11111 var el = this.getFxEl();
11114 el.queueFx(o, function(){
11116 anchor = anchor || "t";
11118 // fix display to visibility
11121 // restore values after effect
11122 var r = this.getFxRestore();
11123 var b = this.getBox();
11124 // fixed size for slide
11128 var wrap = this.fxWrap(r.pos, o, "hidden");
11130 var st = this.dom.style;
11131 st.visibility = "visible";
11132 st.position = "absolute";
11134 // clear out temp styles after slide and unwrap
11135 var after = function(){
11136 el.fxUnwrap(wrap, r.pos, o);
11137 st.width = r.width;
11138 st.height = r.height;
11141 // time to calc the positions
11142 var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};
11144 switch(anchor.toLowerCase()){
11146 wrap.setSize(b.width, 0);
11147 st.left = st.bottom = "0";
11151 wrap.setSize(0, b.height);
11152 st.right = st.top = "0";
11156 wrap.setSize(0, b.height);
11157 wrap.setX(b.right);
11158 st.left = st.top = "0";
11159 a = {width: bw, points: pt};
11162 wrap.setSize(b.width, 0);
11163 wrap.setY(b.bottom);
11164 st.left = st.top = "0";
11165 a = {height: bh, points: pt};
11168 wrap.setSize(0, 0);
11169 st.right = st.bottom = "0";
11170 a = {width: bw, height: bh};
11173 wrap.setSize(0, 0);
11174 wrap.setY(b.y+b.height);
11175 st.right = st.top = "0";
11176 a = {width: bw, height: bh, points: pt};
11179 wrap.setSize(0, 0);
11180 wrap.setXY([b.right, b.bottom]);
11181 st.left = st.top = "0";
11182 a = {width: bw, height: bh, points: pt};
11185 wrap.setSize(0, 0);
11186 wrap.setX(b.x+b.width);
11187 st.left = st.bottom = "0";
11188 a = {width: bw, height: bh, points: pt};
11191 this.dom.style.visibility = "visible";
11194 arguments.callee.anim = wrap.fxanim(a,
11204 * Slides the element out of view. An anchor point can be optionally passed to set the end point
11205 * for the slide effect. When the effect is completed, the element will be hidden (visibility =
11206 * 'hidden') but block elements will still take up space in the document. The element must be removed
11207 * from the DOM using the 'remove' config option if desired. This function automatically handles
11208 * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
11211 // default: slide the element out to the top
11214 // custom: slide the element out to the right with a 2-second duration
11215 el.slideOut('r', { duration: 2 });
11217 // common config options shown with default values
11225 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
11226 * @param {Object} options (optional) Object literal with any of the Fx config options
11227 * @return {Roo.Element} The Element
11229 slideOut : function(anchor, o){
11230 var el = this.getFxEl();
11233 el.queueFx(o, function(){
11235 anchor = anchor || "t";
11237 // restore values after effect
11238 var r = this.getFxRestore();
11240 var b = this.getBox();
11241 // fixed size for slide
11245 var wrap = this.fxWrap(r.pos, o, "visible");
11247 var st = this.dom.style;
11248 st.visibility = "visible";
11249 st.position = "absolute";
11253 var after = function(){
11255 el.setDisplayed(false);
11260 el.fxUnwrap(wrap, r.pos, o);
11262 st.width = r.width;
11263 st.height = r.height;
11268 var a, zero = {to: 0};
11269 switch(anchor.toLowerCase()){
11271 st.left = st.bottom = "0";
11272 a = {height: zero};
11275 st.right = st.top = "0";
11279 st.left = st.top = "0";
11280 a = {width: zero, points: {to:[b.right, b.y]}};
11283 st.left = st.top = "0";
11284 a = {height: zero, points: {to:[b.x, b.bottom]}};
11287 st.right = st.bottom = "0";
11288 a = {width: zero, height: zero};
11291 st.right = st.top = "0";
11292 a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
11295 st.left = st.top = "0";
11296 a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
11299 st.left = st.bottom = "0";
11300 a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
11304 arguments.callee.anim = wrap.fxanim(a,
11314 * Fades the element out while slowly expanding it in all directions. When the effect is completed, the
11315 * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
11316 * The element must be removed from the DOM using the 'remove' config option if desired.
11322 // common config options shown with default values
11330 * @param {Object} options (optional) Object literal with any of the Fx config options
11331 * @return {Roo.Element} The Element
11333 puff : function(o){
11334 var el = this.getFxEl();
11337 el.queueFx(o, function(){
11338 this.clearOpacity();
11341 // restore values after effect
11342 var r = this.getFxRestore();
11343 var st = this.dom.style;
11345 var after = function(){
11347 el.setDisplayed(false);
11354 el.setPositioning(r.pos);
11355 st.width = r.width;
11356 st.height = r.height;
11361 var width = this.getWidth();
11362 var height = this.getHeight();
11364 arguments.callee.anim = this.fxanim({
11365 width : {to: this.adjustWidth(width * 2)},
11366 height : {to: this.adjustHeight(height * 2)},
11367 points : {by: [-(width * .5), -(height * .5)]},
11369 fontSize: {to:200, unit: "%"}
11380 * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
11381 * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
11382 * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
11388 // all config options shown with default values
11396 * @param {Object} options (optional) Object literal with any of the Fx config options
11397 * @return {Roo.Element} The Element
11399 switchOff : function(o){
11400 var el = this.getFxEl();
11403 el.queueFx(o, function(){
11404 this.clearOpacity();
11407 // restore values after effect
11408 var r = this.getFxRestore();
11409 var st = this.dom.style;
11411 var after = function(){
11413 el.setDisplayed(false);
11419 el.setPositioning(r.pos);
11420 st.width = r.width;
11421 st.height = r.height;
11426 this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
11427 this.clearOpacity();
11431 points:{by:[0, this.getHeight() * .5]}
11432 }, o, 'motion', 0.3, 'easeIn', after);
11433 }).defer(100, this);
11440 * Highlights the Element by setting a color (applies to the background-color by default, but can be
11441 * changed using the "attr" config option) and then fading back to the original color. If no original
11442 * color is available, you should provide the "endColor" config option which will be cleared after the animation.
11445 // default: highlight background to yellow
11448 // custom: highlight foreground text to blue for 2 seconds
11449 el.highlight("0000ff", { attr: 'color', duration: 2 });
11451 // common config options shown with default values
11452 el.highlight("ffff9c", {
11453 attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
11454 endColor: (current color) or "ffffff",
11459 * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
11460 * @param {Object} options (optional) Object literal with any of the Fx config options
11461 * @return {Roo.Element} The Element
11463 highlight : function(color, o){
11464 var el = this.getFxEl();
11467 el.queueFx(o, function(){
11468 color = color || "ffff9c";
11469 attr = o.attr || "backgroundColor";
11471 this.clearOpacity();
11474 var origColor = this.getColor(attr);
11475 var restoreColor = this.dom.style[attr];
11476 endColor = (o.endColor || origColor) || "ffffff";
11478 var after = function(){
11479 el.dom.style[attr] = restoreColor;
11484 a[attr] = {from: color, to: endColor};
11485 arguments.callee.anim = this.fxanim(a,
11495 * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
11498 // default: a single light blue ripple
11501 // custom: 3 red ripples lasting 3 seconds total
11502 el.frame("ff0000", 3, { duration: 3 });
11504 // common config options shown with default values
11505 el.frame("C3DAF9", 1, {
11506 duration: 1 //duration of entire animation (not each individual ripple)
11507 // Note: Easing is not configurable and will be ignored if included
11510 * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
11511 * @param {Number} count (optional) The number of ripples to display (defaults to 1)
11512 * @param {Object} options (optional) Object literal with any of the Fx config options
11513 * @return {Roo.Element} The Element
11515 frame : function(color, count, o){
11516 var el = this.getFxEl();
11519 el.queueFx(o, function(){
11520 color = color || "#C3DAF9";
11521 if(color.length == 6){
11522 color = "#" + color;
11524 count = count || 1;
11525 duration = o.duration || 1;
11528 var b = this.getBox();
11529 var animFn = function(){
11530 var proxy = this.createProxy({
11533 visbility:"hidden",
11534 position:"absolute",
11535 "z-index":"35000", // yee haw
11536 border:"0px solid " + color
11539 var scale = Roo.isBorderBox ? 2 : 1;
11541 top:{from:b.y, to:b.y - 20},
11542 left:{from:b.x, to:b.x - 20},
11543 borderWidth:{from:0, to:10},
11544 opacity:{from:1, to:0},
11545 height:{from:b.height, to:(b.height + (20*scale))},
11546 width:{from:b.width, to:(b.width + (20*scale))}
11547 }, duration, function(){
11551 animFn.defer((duration/2)*1000, this);
11562 * Creates a pause before any subsequent queued effects begin. If there are
11563 * no effects queued after the pause it will have no effect.
11568 * @param {Number} seconds The length of time to pause (in seconds)
11569 * @return {Roo.Element} The Element
11571 pause : function(seconds){
11572 var el = this.getFxEl();
11575 el.queueFx(o, function(){
11576 setTimeout(function(){
11578 }, seconds * 1000);
11584 * Fade an element in (from transparent to opaque). The ending opacity can be specified
11585 * using the "endOpacity" config option.
11588 // default: fade in from opacity 0 to 100%
11591 // custom: fade in from opacity 0 to 75% over 2 seconds
11592 el.fadeIn({ endOpacity: .75, duration: 2});
11594 // common config options shown with default values
11596 endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
11601 * @param {Object} options (optional) Object literal with any of the Fx config options
11602 * @return {Roo.Element} The Element
11604 fadeIn : function(o){
11605 var el = this.getFxEl();
11607 el.queueFx(o, function(){
11608 this.setOpacity(0);
11610 this.dom.style.visibility = 'visible';
11611 var to = o.endOpacity || 1;
11612 arguments.callee.anim = this.fxanim({opacity:{to:to}},
11613 o, null, .5, "easeOut", function(){
11615 this.clearOpacity();
11624 * Fade an element out (from opaque to transparent). The ending opacity can be specified
11625 * using the "endOpacity" config option.
11628 // default: fade out from the element's current opacity to 0
11631 // custom: fade out from the element's current opacity to 25% over 2 seconds
11632 el.fadeOut({ endOpacity: .25, duration: 2});
11634 // common config options shown with default values
11636 endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
11643 * @param {Object} options (optional) Object literal with any of the Fx config options
11644 * @return {Roo.Element} The Element
11646 fadeOut : function(o){
11647 var el = this.getFxEl();
11649 el.queueFx(o, function(){
11650 arguments.callee.anim = this.fxanim({opacity:{to:o.endOpacity || 0}},
11651 o, null, .5, "easeOut", function(){
11652 if(this.visibilityMode == Roo.Element.DISPLAY || o.useDisplay){
11653 this.dom.style.display = "none";
11655 this.dom.style.visibility = "hidden";
11657 this.clearOpacity();
11665 * Animates the transition of an element's dimensions from a starting height/width
11666 * to an ending height/width.
11669 // change height and width to 100x100 pixels
11670 el.scale(100, 100);
11672 // common config options shown with default values. The height and width will default to
11673 // the element's existing values if passed as null.
11676 [element's height], {
11681 * @param {Number} width The new width (pass undefined to keep the original width)
11682 * @param {Number} height The new height (pass undefined to keep the original height)
11683 * @param {Object} options (optional) Object literal with any of the Fx config options
11684 * @return {Roo.Element} The Element
11686 scale : function(w, h, o){
11687 this.shift(Roo.apply({}, o, {
11695 * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
11696 * Any of these properties not specified in the config object will not be changed. This effect
11697 * requires that at least one new dimension, position or opacity setting must be passed in on
11698 * the config object in order for the function to have any effect.
11701 // slide the element horizontally to x position 200 while changing the height and opacity
11702 el.shift({ x: 200, height: 50, opacity: .8 });
11704 // common config options shown with default values.
11706 width: [element's width],
11707 height: [element's height],
11708 x: [element's x position],
11709 y: [element's y position],
11710 opacity: [element's opacity],
11715 * @param {Object} options Object literal with any of the Fx config options
11716 * @return {Roo.Element} The Element
11718 shift : function(o){
11719 var el = this.getFxEl();
11721 el.queueFx(o, function(){
11722 var a = {}, w = o.width, h = o.height, x = o.x, y = o.y, op = o.opacity;
11723 if(w !== undefined){
11724 a.width = {to: this.adjustWidth(w)};
11726 if(h !== undefined){
11727 a.height = {to: this.adjustHeight(h)};
11729 if(x !== undefined || y !== undefined){
11731 x !== undefined ? x : this.getX(),
11732 y !== undefined ? y : this.getY()
11735 if(op !== undefined){
11736 a.opacity = {to: op};
11738 if(o.xy !== undefined){
11739 a.points = {to: o.xy};
11741 arguments.callee.anim = this.fxanim(a,
11742 o, 'motion', .35, "easeOut", function(){
11750 * Slides the element while fading it out of view. An anchor point can be optionally passed to set the
11751 * ending point of the effect.
11754 // default: slide the element downward while fading out
11757 // custom: slide the element out to the right with a 2-second duration
11758 el.ghost('r', { duration: 2 });
11760 // common config options shown with default values
11768 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
11769 * @param {Object} options (optional) Object literal with any of the Fx config options
11770 * @return {Roo.Element} The Element
11772 ghost : function(anchor, o){
11773 var el = this.getFxEl();
11776 el.queueFx(o, function(){
11777 anchor = anchor || "b";
11779 // restore values after effect
11780 var r = this.getFxRestore();
11781 var w = this.getWidth(),
11782 h = this.getHeight();
11784 var st = this.dom.style;
11786 var after = function(){
11788 el.setDisplayed(false);
11794 el.setPositioning(r.pos);
11795 st.width = r.width;
11796 st.height = r.height;
11801 var a = {opacity: {to: 0}, points: {}}, pt = a.points;
11802 switch(anchor.toLowerCase()){
11829 arguments.callee.anim = this.fxanim(a,
11839 * Ensures that all effects queued after syncFx is called on the element are
11840 * run concurrently. This is the opposite of {@link #sequenceFx}.
11841 * @return {Roo.Element} The Element
11843 syncFx : function(){
11844 this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
11853 * Ensures that all effects queued after sequenceFx is called on the element are
11854 * run in sequence. This is the opposite of {@link #syncFx}.
11855 * @return {Roo.Element} The Element
11857 sequenceFx : function(){
11858 this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
11860 concurrent : false,
11867 nextFx : function(){
11868 var ef = this.fxQueue[0];
11875 * Returns true if the element has any effects actively running or queued, else returns false.
11876 * @return {Boolean} True if element has active effects, else false
11878 hasActiveFx : function(){
11879 return this.fxQueue && this.fxQueue[0];
11883 * Stops any running effects and clears the element's internal effects queue if it contains
11884 * any additional effects that haven't started yet.
11885 * @return {Roo.Element} The Element
11887 stopFx : function(){
11888 if(this.hasActiveFx()){
11889 var cur = this.fxQueue[0];
11890 if(cur && cur.anim && cur.anim.isAnimated()){
11891 this.fxQueue = [cur]; // clear out others
11892 cur.anim.stop(true);
11899 beforeFx : function(o){
11900 if(this.hasActiveFx() && !o.concurrent){
11911 * Returns true if the element is currently blocking so that no other effect can be queued
11912 * until this effect is finished, else returns false if blocking is not set. This is commonly
11913 * used to ensure that an effect initiated by a user action runs to completion prior to the
11914 * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
11915 * @return {Boolean} True if blocking, else false
11917 hasFxBlock : function(){
11918 var q = this.fxQueue;
11919 return q && q[0] && q[0].block;
11923 queueFx : function(o, fn){
11927 if(!this.hasFxBlock()){
11928 Roo.applyIf(o, this.fxDefaults);
11930 var run = this.beforeFx(o);
11931 fn.block = o.block;
11932 this.fxQueue.push(fn);
11944 fxWrap : function(pos, o, vis){
11946 if(!o.wrap || !(wrap = Roo.get(o.wrap))){
11949 wrapXY = this.getXY();
11951 var div = document.createElement("div");
11952 div.style.visibility = vis;
11953 wrap = Roo.get(this.dom.parentNode.insertBefore(div, this.dom));
11954 wrap.setPositioning(pos);
11955 if(wrap.getStyle("position") == "static"){
11956 wrap.position("relative");
11958 this.clearPositioning('auto');
11960 wrap.dom.appendChild(this.dom);
11962 wrap.setXY(wrapXY);
11969 fxUnwrap : function(wrap, pos, o){
11970 this.clearPositioning();
11971 this.setPositioning(pos);
11973 wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
11979 getFxRestore : function(){
11980 var st = this.dom.style;
11981 return {pos: this.getPositioning(), width: st.width, height : st.height};
11985 afterFx : function(o){
11987 this.applyStyles(o.afterStyle);
11990 this.addClass(o.afterCls);
11992 if(o.remove === true){
11995 Roo.callback(o.callback, o.scope, [this]);
11997 this.fxQueue.shift();
12003 getFxEl : function(){ // support for composite element fx
12004 return Roo.get(this.dom);
12008 fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
12009 animType = animType || 'run';
12011 var anim = Roo.lib.Anim[animType](
12013 (opt.duration || defaultDur) || .35,
12014 (opt.easing || defaultEase) || 'easeOut',
12016 Roo.callback(cb, this);
12025 // backwords compat
12026 Roo.Fx.resize = Roo.Fx.scale;
12028 //When included, Roo.Fx is automatically applied to Element so that all basic
12029 //effects are available directly via the Element API
12030 Roo.apply(Roo.Element.prototype, Roo.Fx);/*
12032 * Ext JS Library 1.1.1
12033 * Copyright(c) 2006-2007, Ext JS, LLC.
12035 * Originally Released Under LGPL - original licence link has changed is not relivant.
12038 * <script type="text/javascript">
12043 * @class Roo.CompositeElement
12044 * Standard composite class. Creates a Roo.Element for every element in the collection.
12046 * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
12047 * actions will be performed on all the elements in this collection.</b>
12049 * All methods return <i>this</i> and can be chained.
12051 var els = Roo.select("#some-el div.some-class", true);
12052 // or select directly from an existing element
12053 var el = Roo.get('some-el');
12054 el.select('div.some-class', true);
12056 els.setWidth(100); // all elements become 100 width
12057 els.hide(true); // all elements fade out and hide
12059 els.setWidth(100).hide(true);
12062 Roo.CompositeElement = function(els){
12063 this.elements = [];
12064 this.addElements(els);
12066 Roo.CompositeElement.prototype = {
12068 addElements : function(els){
12072 if(typeof els == "string"){
12073 els = Roo.Element.selectorFunction(els);
12075 var yels = this.elements;
12076 var index = yels.length-1;
12077 for(var i = 0, len = els.length; i < len; i++) {
12078 yels[++index] = Roo.get(els[i]);
12084 * Clears this composite and adds the elements returned by the passed selector.
12085 * @param {String/Array} els A string CSS selector, an array of elements or an element
12086 * @return {CompositeElement} this
12088 fill : function(els){
12089 this.elements = [];
12095 * Filters this composite to only elements that match the passed selector.
12096 * @param {String} selector A string CSS selector
12097 * @param {Boolean} inverse return inverse filter (not matches)
12098 * @return {CompositeElement} this
12100 filter : function(selector, inverse){
12102 inverse = inverse || false;
12103 this.each(function(el){
12104 var match = inverse ? !el.is(selector) : el.is(selector);
12106 els[els.length] = el.dom;
12113 invoke : function(fn, args){
12114 var els = this.elements;
12115 for(var i = 0, len = els.length; i < len; i++) {
12116 Roo.Element.prototype[fn].apply(els[i], args);
12121 * Adds elements to this composite.
12122 * @param {String/Array} els A string CSS selector, an array of elements or an element
12123 * @return {CompositeElement} this
12125 add : function(els){
12126 if(typeof els == "string"){
12127 this.addElements(Roo.Element.selectorFunction(els));
12128 }else if(els.length !== undefined){
12129 this.addElements(els);
12131 this.addElements([els]);
12136 * Calls the passed function passing (el, this, index) for each element in this composite.
12137 * @param {Function} fn The function to call
12138 * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
12139 * @return {CompositeElement} this
12141 each : function(fn, scope){
12142 var els = this.elements;
12143 for(var i = 0, len = els.length; i < len; i++){
12144 if(fn.call(scope || els[i], els[i], this, i) === false) {
12152 * Returns the Element object at the specified index
12153 * @param {Number} index
12154 * @return {Roo.Element}
12156 item : function(index){
12157 return this.elements[index] || null;
12161 * Returns the first Element
12162 * @return {Roo.Element}
12164 first : function(){
12165 return this.item(0);
12169 * Returns the last Element
12170 * @return {Roo.Element}
12173 return this.item(this.elements.length-1);
12177 * Returns the number of elements in this composite
12180 getCount : function(){
12181 return this.elements.length;
12185 * Returns true if this composite contains the passed element
12188 contains : function(el){
12189 return this.indexOf(el) !== -1;
12193 * Returns true if this composite contains the passed element
12196 indexOf : function(el){
12197 return this.elements.indexOf(Roo.get(el));
12202 * Removes the specified element(s).
12203 * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
12204 * or an array of any of those.
12205 * @param {Boolean} removeDom (optional) True to also remove the element from the document
12206 * @return {CompositeElement} this
12208 removeElement : function(el, removeDom){
12209 if(el instanceof Array){
12210 for(var i = 0, len = el.length; i < len; i++){
12211 this.removeElement(el[i]);
12215 var index = typeof el == 'number' ? el : this.indexOf(el);
12218 var d = this.elements[index];
12222 d.parentNode.removeChild(d);
12225 this.elements.splice(index, 1);
12231 * Replaces the specified element with the passed element.
12232 * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
12234 * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
12235 * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
12236 * @return {CompositeElement} this
12238 replaceElement : function(el, replacement, domReplace){
12239 var index = typeof el == 'number' ? el : this.indexOf(el);
12242 this.elements[index].replaceWith(replacement);
12244 this.elements.splice(index, 1, Roo.get(replacement))
12251 * Removes all elements.
12253 clear : function(){
12254 this.elements = [];
12258 Roo.CompositeElement.createCall = function(proto, fnName){
12259 if(!proto[fnName]){
12260 proto[fnName] = function(){
12261 return this.invoke(fnName, arguments);
12265 for(var fnName in Roo.Element.prototype){
12266 if(typeof Roo.Element.prototype[fnName] == "function"){
12267 Roo.CompositeElement.createCall(Roo.CompositeElement.prototype, fnName);
12273 * Ext JS Library 1.1.1
12274 * Copyright(c) 2006-2007, Ext JS, LLC.
12276 * Originally Released Under LGPL - original licence link has changed is not relivant.
12279 * <script type="text/javascript">
12283 * @class Roo.CompositeElementLite
12284 * @extends Roo.CompositeElement
12285 * Flyweight composite class. Reuses the same Roo.Element for element operations.
12287 var els = Roo.select("#some-el div.some-class");
12288 // or select directly from an existing element
12289 var el = Roo.get('some-el');
12290 el.select('div.some-class');
12292 els.setWidth(100); // all elements become 100 width
12293 els.hide(true); // all elements fade out and hide
12295 els.setWidth(100).hide(true);
12296 </code></pre><br><br>
12297 * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
12298 * actions will be performed on all the elements in this collection.</b>
12300 Roo.CompositeElementLite = function(els){
12301 Roo.CompositeElementLite.superclass.constructor.call(this, els);
12302 this.el = new Roo.Element.Flyweight();
12304 Roo.extend(Roo.CompositeElementLite, Roo.CompositeElement, {
12305 addElements : function(els){
12307 if(els instanceof Array){
12308 this.elements = this.elements.concat(els);
12310 var yels = this.elements;
12311 var index = yels.length-1;
12312 for(var i = 0, len = els.length; i < len; i++) {
12313 yels[++index] = els[i];
12319 invoke : function(fn, args){
12320 var els = this.elements;
12322 for(var i = 0, len = els.length; i < len; i++) {
12324 Roo.Element.prototype[fn].apply(el, args);
12329 * Returns a flyweight Element of the dom element object at the specified index
12330 * @param {Number} index
12331 * @return {Roo.Element}
12333 item : function(index){
12334 if(!this.elements[index]){
12337 this.el.dom = this.elements[index];
12341 // fixes scope with flyweight
12342 addListener : function(eventName, handler, scope, opt){
12343 var els = this.elements;
12344 for(var i = 0, len = els.length; i < len; i++) {
12345 Roo.EventManager.on(els[i], eventName, handler, scope || els[i], opt);
12351 * Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
12352 * passed is the flyweight (shared) Roo.Element instance, so if you require a
12353 * a reference to the dom node, use el.dom.</b>
12354 * @param {Function} fn The function to call
12355 * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
12356 * @return {CompositeElement} this
12358 each : function(fn, scope){
12359 var els = this.elements;
12361 for(var i = 0, len = els.length; i < len; i++){
12363 if(fn.call(scope || el, el, this, i) === false){
12370 indexOf : function(el){
12371 return this.elements.indexOf(Roo.getDom(el));
12374 replaceElement : function(el, replacement, domReplace){
12375 var index = typeof el == 'number' ? el : this.indexOf(el);
12377 replacement = Roo.getDom(replacement);
12379 var d = this.elements[index];
12380 d.parentNode.insertBefore(replacement, d);
12381 d.parentNode.removeChild(d);
12383 this.elements.splice(index, 1, replacement);
12388 Roo.CompositeElementLite.prototype.on = Roo.CompositeElementLite.prototype.addListener;
12392 * Ext JS Library 1.1.1
12393 * Copyright(c) 2006-2007, Ext JS, LLC.
12395 * Originally Released Under LGPL - original licence link has changed is not relivant.
12398 * <script type="text/javascript">
12404 * @class Roo.data.Connection
12405 * @extends Roo.util.Observable
12406 * The class encapsulates a connection to the page's originating domain, allowing requests to be made
12407 * either to a configured URL, or to a URL specified at request time.
12409 * Requests made by this class are asynchronous, and will return immediately. No data from
12410 * the server will be available to the statement immediately following the {@link #request} call.
12411 * To process returned data, use a callback in the request options object, or an event listener.
12413 * Note: If you are doing a file upload, you will not get a normal response object sent back to
12414 * your callback or event handler. Since the upload is handled via in IFRAME, there is no XMLHttpRequest.
12415 * The response object is created using the innerHTML of the IFRAME's document as the responseText
12416 * property and, if present, the IFRAME's XML document as the responseXML property.
12418 * This means that a valid XML or HTML document must be returned. If JSON data is required, it is suggested
12419 * that it be placed either inside a <textarea> in an HTML document and retrieved from the responseText
12420 * using a regex, or inside a CDATA section in an XML document and retrieved from the responseXML using
12421 * standard DOM methods.
12423 * @param {Object} config a configuration object.
12425 Roo.data.Connection = function(config){
12426 Roo.apply(this, config);
12429 * @event beforerequest
12430 * Fires before a network request is made to retrieve a data object.
12431 * @param {Connection} conn This Connection object.
12432 * @param {Object} options The options config object passed to the {@link #request} method.
12434 "beforerequest" : true,
12436 * @event requestcomplete
12437 * Fires if the request was successfully completed.
12438 * @param {Connection} conn This Connection object.
12439 * @param {Object} response The XHR object containing the response data.
12440 * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
12441 * @param {Object} options The options config object passed to the {@link #request} method.
12443 "requestcomplete" : true,
12445 * @event requestexception
12446 * Fires if an error HTTP status was returned from the server.
12447 * See {@link http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html} for details of HTTP status codes.
12448 * @param {Connection} conn This Connection object.
12449 * @param {Object} response The XHR object containing the response data.
12450 * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
12451 * @param {Object} options The options config object passed to the {@link #request} method.
12453 "requestexception" : true
12455 Roo.data.Connection.superclass.constructor.call(this);
12458 Roo.extend(Roo.data.Connection, Roo.util.Observable, {
12460 * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
12463 * @cfg {Object} extraParams (Optional) An object containing properties which are used as
12464 * extra parameters to each request made by this object. (defaults to undefined)
12467 * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
12468 * to each request made by this object. (defaults to undefined)
12471 * @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)
12474 * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
12478 * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
12484 * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
12487 disableCaching: true,
12490 * Sends an HTTP request to a remote server.
12491 * @param {Object} options An object which may contain the following properties:<ul>
12492 * <li><b>url</b> {String} (Optional) The URL to which to send the request. Defaults to configured URL</li>
12493 * <li><b>params</b> {Object/String/Function} (Optional) An object containing properties which are used as parameters to the
12494 * request, a url encoded string or a function to call to get either.</li>
12495 * <li><b>method</b> {String} (Optional) The HTTP method to use for the request. Defaults to the configured method, or
12496 * if no method was configured, "GET" if no parameters are being sent, and "POST" if parameters are being sent.</li>
12497 * <li><b>callback</b> {Function} (Optional) The function to be called upon receipt of the HTTP response.
12498 * The callback is called regardless of success or failure and is passed the following parameters:<ul>
12499 * <li>options {Object} The parameter to the request call.</li>
12500 * <li>success {Boolean} True if the request succeeded.</li>
12501 * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
12503 * <li><b>success</b> {Function} (Optional) The function to be called upon success of the request.
12504 * The callback is passed the following parameters:<ul>
12505 * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
12506 * <li>options {Object} The parameter to the request call.</li>
12508 * <li><b>failure</b> {Function} (Optional) The function to be called upon failure of the request.
12509 * The callback is passed the following parameters:<ul>
12510 * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
12511 * <li>options {Object} The parameter to the request call.</li>
12513 * <li><b>scope</b> {Object} (Optional) The scope in which to execute the callbacks: The "this" object
12514 * for the callback function. Defaults to the browser window.</li>
12515 * <li><b>form</b> {Object/String} (Optional) A form object or id to pull parameters from.</li>
12516 * <li><b>isUpload</b> {Boolean} (Optional) True if the form object is a file upload (will usually be automatically detected).</li>
12517 * <li><b>headers</b> {Object} (Optional) Request headers to set for the request.</li>
12518 * <li><b>xmlData</b> {Object} (Optional) XML document to use for the post. Note: This will be used instead of
12519 * params for the post data. Any params will be appended to the URL.</li>
12520 * <li><b>disableCaching</b> {Boolean} (Optional) True to add a unique cache-buster param to GET requests.</li>
12522 * @return {Number} transactionId
12524 request : function(o){
12525 if(this.fireEvent("beforerequest", this, o) !== false){
12528 if(typeof p == "function"){
12529 p = p.call(o.scope||window, o);
12531 if(typeof p == "object"){
12532 p = Roo.urlEncode(o.params);
12534 if(this.extraParams){
12535 var extras = Roo.urlEncode(this.extraParams);
12536 p = p ? (p + '&' + extras) : extras;
12539 var url = o.url || this.url;
12540 if(typeof url == 'function'){
12541 url = url.call(o.scope||window, o);
12545 var form = Roo.getDom(o.form);
12546 url = url || form.action;
12548 var enctype = form.getAttribute("enctype");
12551 return this.doFormDataUpload(o, url);
12554 if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
12555 return this.doFormUpload(o, p, url);
12557 var f = Roo.lib.Ajax.serializeForm(form);
12558 p = p ? (p + '&' + f) : f;
12561 if (!o.form && o.formData) {
12562 o.formData = o.formData === true ? new FormData() : o.formData;
12563 for (var k in o.params) {
12564 o.formData.append(k,o.params[k]);
12567 return this.doFormDataUpload(o, url);
12571 var hs = o.headers;
12572 if(this.defaultHeaders){
12573 hs = Roo.apply(hs || {}, this.defaultHeaders);
12580 success: this.handleResponse,
12581 failure: this.handleFailure,
12583 argument: {options: o},
12584 timeout : o.timeout || this.timeout
12587 var method = o.method||this.method||(p ? "POST" : "GET");
12589 if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
12590 url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
12593 if(typeof o.autoAbort == 'boolean'){ // options gets top priority
12597 }else if(this.autoAbort !== false){
12601 if((method == 'GET' && p) || o.xmlData){
12602 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
12605 Roo.lib.Ajax.useDefaultHeader = typeof(o.headers) == 'undefined' || typeof(o.headers['Content-Type']) == 'undefined';
12606 this.transId = Roo.lib.Ajax.request(method, url, cb, p, o);
12607 Roo.lib.Ajax.useDefaultHeader == true;
12608 return this.transId;
12610 Roo.callback(o.callback, o.scope, [o, null, null]);
12616 * Determine whether this object has a request outstanding.
12617 * @param {Number} transactionId (Optional) defaults to the last transaction
12618 * @return {Boolean} True if there is an outstanding request.
12620 isLoading : function(transId){
12622 return Roo.lib.Ajax.isCallInProgress(transId);
12624 return this.transId ? true : false;
12629 * Aborts any outstanding request.
12630 * @param {Number} transactionId (Optional) defaults to the last transaction
12632 abort : function(transId){
12633 if(transId || this.isLoading()){
12634 Roo.lib.Ajax.abort(transId || this.transId);
12639 handleResponse : function(response){
12640 this.transId = false;
12641 var options = response.argument.options;
12642 response.argument = options ? options.argument : null;
12643 this.fireEvent("requestcomplete", this, response, options);
12644 Roo.callback(options.success, options.scope, [response, options]);
12645 Roo.callback(options.callback, options.scope, [options, true, response]);
12649 handleFailure : function(response, e){
12650 this.transId = false;
12651 var options = response.argument.options;
12652 response.argument = options ? options.argument : null;
12653 this.fireEvent("requestexception", this, response, options, e);
12654 Roo.callback(options.failure, options.scope, [response, options]);
12655 Roo.callback(options.callback, options.scope, [options, false, response]);
12659 doFormUpload : function(o, ps, url){
12661 var frame = document.createElement('iframe');
12664 frame.className = 'x-hidden';
12666 frame.src = Roo.SSL_SECURE_URL;
12668 document.body.appendChild(frame);
12671 document.frames[id].name = id;
12674 var form = Roo.getDom(o.form);
12676 form.method = 'POST';
12677 form.enctype = form.encoding = 'multipart/form-data';
12683 if(ps){ // add dynamic params
12685 ps = Roo.urlDecode(ps, false);
12687 if(ps.hasOwnProperty(k)){
12688 hd = document.createElement('input');
12689 hd.type = 'hidden';
12692 form.appendChild(hd);
12699 var r = { // bogus response object
12704 r.argument = o ? o.argument : null;
12709 doc = frame.contentWindow.document;
12711 doc = (frame.contentDocument || window.frames[id].document);
12713 if(doc && doc.body){
12714 r.responseText = doc.body.innerHTML;
12716 if(doc && doc.XMLDocument){
12717 r.responseXML = doc.XMLDocument;
12719 r.responseXML = doc;
12726 Roo.EventManager.removeListener(frame, 'load', cb, this);
12728 this.fireEvent("requestcomplete", this, r, o);
12729 Roo.callback(o.success, o.scope, [r, o]);
12730 Roo.callback(o.callback, o.scope, [o, true, r]);
12732 setTimeout(function(){document.body.removeChild(frame);}, 100);
12735 Roo.EventManager.on(frame, 'load', cb, this);
12738 if(hiddens){ // remove dynamic params
12739 for(var i = 0, len = hiddens.length; i < len; i++){
12740 form.removeChild(hiddens[i]);
12744 // this is a 'formdata version???'
12747 doFormDataUpload : function(o, url)
12751 var form = Roo.getDom(o.form);
12752 form.enctype = form.encoding = 'multipart/form-data';
12753 formData = o.formData === true ? new FormData(form) : o.formData;
12755 formData = o.formData === true ? new FormData() : o.formData;
12760 success: this.handleResponse,
12761 failure: this.handleFailure,
12763 argument: {options: o},
12764 timeout : o.timeout || this.timeout
12767 if(typeof o.autoAbort == 'boolean'){ // options gets top priority
12771 }else if(this.autoAbort !== false){
12775 //Roo.lib.Ajax.defaultPostHeader = null;
12776 Roo.lib.Ajax.useDefaultHeader = false;
12777 this.transId = Roo.lib.Ajax.request( "POST", url, cb, formData, o);
12778 Roo.lib.Ajax.useDefaultHeader = true;
12786 * Ext JS Library 1.1.1
12787 * Copyright(c) 2006-2007, Ext JS, LLC.
12789 * Originally Released Under LGPL - original licence link has changed is not relivant.
12792 * <script type="text/javascript">
12796 * Global Ajax request class.
12799 * @extends Roo.data.Connection
12802 * @cfg {String} url The default URL to be used for requests to the server. (defaults to undefined)
12803 * @cfg {Object} extraParams An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined)
12804 * @cfg {Object} defaultHeaders An object containing request headers which are added to each request made by this object. (defaults to undefined)
12805 * @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)
12806 * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
12807 * @cfg {Boolean} autoAbort (Optional) Whether a new request should abort any pending requests. (defaults to false)
12808 * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
12810 Roo.Ajax = new Roo.data.Connection({
12819 * Serialize the passed form into a url encoded string
12821 * @param {String/HTMLElement} form
12824 serializeForm : function(form){
12825 return Roo.lib.Ajax.serializeForm(form);
12829 * Ext JS Library 1.1.1
12830 * Copyright(c) 2006-2007, Ext JS, LLC.
12832 * Originally Released Under LGPL - original licence link has changed is not relivant.
12835 * <script type="text/javascript">
12840 * @class Roo.UpdateManager
12841 * @extends Roo.util.Observable
12842 * Provides AJAX-style update for Element object.<br><br>
12845 * // Get it from a Roo.Element object
12846 * var el = Roo.get("foo");
12847 * var mgr = el.getUpdateManager();
12848 * mgr.update("http://myserver.com/index.php", "param1=1&param2=2");
12850 * mgr.formUpdate("myFormId", "http://myserver.com/index.php");
12852 * // or directly (returns the same UpdateManager instance)
12853 * var mgr = new Roo.UpdateManager("myElementId");
12854 * mgr.startAutoRefresh(60, "http://myserver.com/index.php");
12855 * mgr.on("update", myFcnNeedsToKnow);
12857 // short handed call directly from the element object
12858 Roo.get("foo").load({
12862 text: "Loading Foo..."
12866 * Create new UpdateManager directly.
12867 * @param {String/HTMLElement/Roo.Element} el The element to update
12868 * @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).
12870 Roo.UpdateManager = function(el, forceNew){
12872 if(!forceNew && el.updateManager){
12873 return el.updateManager;
12876 * The Element object
12877 * @type Roo.Element
12881 * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
12884 this.defaultUrl = null;
12888 * @event beforeupdate
12889 * Fired before an update is made, return false from your handler and the update is cancelled.
12890 * @param {Roo.Element} el
12891 * @param {String/Object/Function} url
12892 * @param {String/Object} params
12894 "beforeupdate": true,
12897 * Fired after successful update is made.
12898 * @param {Roo.Element} el
12899 * @param {Object} oResponseObject The response Object
12904 * Fired on update failure.
12905 * @param {Roo.Element} el
12906 * @param {Object} oResponseObject The response Object
12910 var d = Roo.UpdateManager.defaults;
12912 * Blank page URL to use with SSL file uploads (Defaults to Roo.UpdateManager.defaults.sslBlankUrl or "about:blank").
12915 this.sslBlankUrl = d.sslBlankUrl;
12917 * Whether to append unique parameter on get request to disable caching (Defaults to Roo.UpdateManager.defaults.disableCaching or false).
12920 this.disableCaching = d.disableCaching;
12922 * Text for loading indicator (Defaults to Roo.UpdateManager.defaults.indicatorText or '<div class="loading-indicator">Loading...</div>').
12925 this.indicatorText = d.indicatorText;
12927 * Whether to show indicatorText when loading (Defaults to Roo.UpdateManager.defaults.showLoadIndicator or true).
12930 this.showLoadIndicator = d.showLoadIndicator;
12932 * Timeout for requests or form posts in seconds (Defaults to Roo.UpdateManager.defaults.timeout or 30 seconds).
12935 this.timeout = d.timeout;
12938 * True to process scripts in the output (Defaults to Roo.UpdateManager.defaults.loadScripts (false)).
12941 this.loadScripts = d.loadScripts;
12944 * Transaction object of current executing transaction
12946 this.transaction = null;
12951 this.autoRefreshProcId = null;
12953 * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
12956 this.refreshDelegate = this.refresh.createDelegate(this);
12958 * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
12961 this.updateDelegate = this.update.createDelegate(this);
12963 * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
12966 this.formUpdateDelegate = this.formUpdate.createDelegate(this);
12970 this.successDelegate = this.processSuccess.createDelegate(this);
12974 this.failureDelegate = this.processFailure.createDelegate(this);
12976 if(!this.renderer){
12978 * The renderer for this UpdateManager. Defaults to {@link Roo.UpdateManager.BasicRenderer}.
12980 this.renderer = new Roo.UpdateManager.BasicRenderer();
12983 Roo.UpdateManager.superclass.constructor.call(this);
12986 Roo.extend(Roo.UpdateManager, Roo.util.Observable, {
12988 * Get the Element this UpdateManager is bound to
12989 * @return {Roo.Element} The element
12991 getEl : function(){
12995 * Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise it uses GET.
12996 * @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:
12999 url: "your-url.php",<br/>
13000 params: {param1: "foo", param2: "bar"}, // or a URL encoded string<br/>
13001 callback: yourFunction,<br/>
13002 scope: yourObject, //(optional scope) <br/>
13003 discardUrl: false, <br/>
13004 nocache: false,<br/>
13005 text: "Loading...",<br/>
13007 scripts: false<br/>
13010 * The only required property is url. The optional properties nocache, text and scripts
13011 * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this UpdateManager instance.
13012 * @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}
13013 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
13014 * @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.
13016 update : function(url, params, callback, discardUrl){
13017 if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
13018 var method = this.method,
13020 if(typeof url == "object"){ // must be config object
13023 params = params || cfg.params;
13024 callback = callback || cfg.callback;
13025 discardUrl = discardUrl || cfg.discardUrl;
13026 if(callback && cfg.scope){
13027 callback = callback.createDelegate(cfg.scope);
13029 if(typeof cfg.method != "undefined"){method = cfg.method;};
13030 if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
13031 if(typeof cfg.text != "undefined"){this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
13032 if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
13033 if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
13035 this.showLoading();
13037 this.defaultUrl = url;
13039 if(typeof url == "function"){
13040 url = url.call(this);
13043 method = method || (params ? "POST" : "GET");
13044 if(method == "GET"){
13045 url = this.prepareUrl(url);
13048 var o = Roo.apply(cfg ||{}, {
13051 success: this.successDelegate,
13052 failure: this.failureDelegate,
13053 callback: undefined,
13054 timeout: (this.timeout*1000),
13055 argument: {"url": url, "form": null, "callback": callback, "params": params}
13057 Roo.log("updated manager called with timeout of " + o.timeout);
13058 this.transaction = Roo.Ajax.request(o);
13063 * 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.
13064 * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
13065 * @param {String/HTMLElement} form The form Id or form element
13066 * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
13067 * @param {Boolean} reset (optional) Whether to try to reset the form after the update
13068 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
13070 formUpdate : function(form, url, reset, callback){
13071 if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
13072 if(typeof url == "function"){
13073 url = url.call(this);
13075 form = Roo.getDom(form);
13076 this.transaction = Roo.Ajax.request({
13079 success: this.successDelegate,
13080 failure: this.failureDelegate,
13081 timeout: (this.timeout*1000),
13082 argument: {"url": url, "form": form, "callback": callback, "reset": reset}
13084 this.showLoading.defer(1, this);
13089 * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
13090 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
13092 refresh : function(callback){
13093 if(this.defaultUrl == null){
13096 this.update(this.defaultUrl, null, callback, true);
13100 * Set this element to auto refresh.
13101 * @param {Number} interval How often to update (in seconds).
13102 * @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)
13103 * @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}
13104 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
13105 * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
13107 startAutoRefresh : function(interval, url, params, callback, refreshNow){
13109 this.update(url || this.defaultUrl, params, callback, true);
13111 if(this.autoRefreshProcId){
13112 clearInterval(this.autoRefreshProcId);
13114 this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
13118 * Stop auto refresh on this element.
13120 stopAutoRefresh : function(){
13121 if(this.autoRefreshProcId){
13122 clearInterval(this.autoRefreshProcId);
13123 delete this.autoRefreshProcId;
13127 isAutoRefreshing : function(){
13128 return this.autoRefreshProcId ? true : false;
13131 * Called to update the element to "Loading" state. Override to perform custom action.
13133 showLoading : function(){
13134 if(this.showLoadIndicator){
13135 this.el.update(this.indicatorText);
13140 * Adds unique parameter to query string if disableCaching = true
13143 prepareUrl : function(url){
13144 if(this.disableCaching){
13145 var append = "_dc=" + (new Date().getTime());
13146 if(url.indexOf("?") !== -1){
13147 url += "&" + append;
13149 url += "?" + append;
13158 processSuccess : function(response){
13159 this.transaction = null;
13160 if(response.argument.form && response.argument.reset){
13161 try{ // put in try/catch since some older FF releases had problems with this
13162 response.argument.form.reset();
13165 if(this.loadScripts){
13166 this.renderer.render(this.el, response, this,
13167 this.updateComplete.createDelegate(this, [response]));
13169 this.renderer.render(this.el, response, this);
13170 this.updateComplete(response);
13174 updateComplete : function(response){
13175 this.fireEvent("update", this.el, response);
13176 if(typeof response.argument.callback == "function"){
13177 response.argument.callback(this.el, true, response);
13184 processFailure : function(response){
13185 this.transaction = null;
13186 this.fireEvent("failure", this.el, response);
13187 if(typeof response.argument.callback == "function"){
13188 response.argument.callback(this.el, false, response);
13193 * Set the content renderer for this UpdateManager. See {@link Roo.UpdateManager.BasicRenderer#render} for more details.
13194 * @param {Object} renderer The object implementing the render() method
13196 setRenderer : function(renderer){
13197 this.renderer = renderer;
13200 getRenderer : function(){
13201 return this.renderer;
13205 * Set the defaultUrl used for updates
13206 * @param {String/Function} defaultUrl The url or a function to call to get the url
13208 setDefaultUrl : function(defaultUrl){
13209 this.defaultUrl = defaultUrl;
13213 * Aborts the executing transaction
13215 abort : function(){
13216 if(this.transaction){
13217 Roo.Ajax.abort(this.transaction);
13222 * Returns true if an update is in progress
13223 * @return {Boolean}
13225 isUpdating : function(){
13226 if(this.transaction){
13227 return Roo.Ajax.isLoading(this.transaction);
13234 * @class Roo.UpdateManager.defaults
13235 * @static (not really - but it helps the doc tool)
13236 * The defaults collection enables customizing the default properties of UpdateManager
13238 Roo.UpdateManager.defaults = {
13240 * Timeout for requests or form posts in seconds (Defaults 30 seconds).
13246 * True to process scripts by default (Defaults to false).
13249 loadScripts : false,
13252 * Blank page URL to use with SSL file uploads (Defaults to "javascript:false").
13255 sslBlankUrl : (Roo.SSL_SECURE_URL || "javascript:false"),
13257 * Whether to append unique parameter on get request to disable caching (Defaults to false).
13260 disableCaching : false,
13262 * Whether to show indicatorText when loading (Defaults to true).
13265 showLoadIndicator : true,
13267 * Text for loading indicator (Defaults to '<div class="loading-indicator">Loading...</div>').
13270 indicatorText : '<div class="loading-indicator">Loading...</div>'
13274 * Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
13276 * <pre><code>Roo.UpdateManager.updateElement("my-div", "stuff.php");</code></pre>
13277 * @param {String/HTMLElement/Roo.Element} el The element to update
13278 * @param {String} url The url
13279 * @param {String/Object} params (optional) Url encoded param string or an object of name/value pairs
13280 * @param {Object} options (optional) A config object with any of the UpdateManager properties you want to set - for example: {disableCaching:true, indicatorText: "Loading data..."}
13283 * @member Roo.UpdateManager
13285 Roo.UpdateManager.updateElement = function(el, url, params, options){
13286 var um = Roo.get(el, true).getUpdateManager();
13287 Roo.apply(um, options);
13288 um.update(url, params, options ? options.callback : null);
13290 // alias for backwards compat
13291 Roo.UpdateManager.update = Roo.UpdateManager.updateElement;
13293 * @class Roo.UpdateManager.BasicRenderer
13294 * Default Content renderer. Updates the elements innerHTML with the responseText.
13296 Roo.UpdateManager.BasicRenderer = function(){};
13298 Roo.UpdateManager.BasicRenderer.prototype = {
13300 * This is called when the transaction is completed and it's time to update the element - The BasicRenderer
13301 * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
13302 * create an object with a "render(el, response)" method and pass it to setRenderer on the UpdateManager.
13303 * @param {Roo.Element} el The element being rendered
13304 * @param {Object} response The YUI Connect response object
13305 * @param {UpdateManager} updateManager The calling update manager
13306 * @param {Function} callback A callback that will need to be called if loadScripts is true on the UpdateManager
13308 render : function(el, response, updateManager, callback){
13309 el.update(response.responseText, updateManager.loadScripts, callback);
13315 * (c)) Alan Knowles
13321 * @class Roo.DomTemplate
13322 * @extends Roo.Template
13323 * An effort at a dom based template engine..
13325 * Similar to XTemplate, except it uses dom parsing to create the template..
13327 * Supported features:
13332 {a_variable} - output encoded.
13333 {a_variable.format:("Y-m-d")} - call a method on the variable
13334 {a_variable:raw} - unencoded output
13335 {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
13336 {a_variable:this.method_on_template(...)} - call a method on the template object.
13341 <div roo-for="a_variable or condition.."></div>
13342 <div roo-if="a_variable or condition"></div>
13343 <div roo-exec="some javascript"></div>
13344 <div roo-name="named_template"></div>
13349 Roo.DomTemplate = function()
13351 Roo.DomTemplate.superclass.constructor.apply(this, arguments);
13358 Roo.extend(Roo.DomTemplate, Roo.Template, {
13360 * id counter for sub templates.
13364 * flag to indicate if dom parser is inside a pre,
13365 * it will strip whitespace if not.
13370 * The various sub templates
13378 * basic tag replacing syntax
13381 * // you can fake an object call by doing this
13385 re : /(\{|\%7B)([\w-\.]+)(?:\:([\w\.]*)(?:\(([^)]*?)?\))?)?(\}|\%7D)/g,
13386 //re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
13388 iterChild : function (node, method) {
13390 var oldPre = this.inPre;
13391 if (node.tagName == 'PRE') {
13394 for( var i = 0; i < node.childNodes.length; i++) {
13395 method.call(this, node.childNodes[i]);
13397 this.inPre = oldPre;
13403 * compile the template
13405 * This is not recursive, so I'm not sure how nested templates are really going to be handled..
13408 compile: function()
13412 // covert the html into DOM...
13416 doc = document.implementation.createHTMLDocument("");
13417 doc.documentElement.innerHTML = this.html ;
13418 div = doc.documentElement;
13420 // old IE... - nasty -- it causes all sorts of issues.. with
13421 // images getting pulled from server..
13422 div = document.createElement('div');
13423 div.innerHTML = this.html;
13425 //doc.documentElement.innerHTML = htmlBody
13431 this.iterChild(div, function(n) {_t.compileNode(n, true); });
13433 var tpls = this.tpls;
13435 // create a top level template from the snippet..
13437 //Roo.log(div.innerHTML);
13444 body : div.innerHTML,
13457 Roo.each(tpls, function(tp){
13458 this.compileTpl(tp);
13459 this.tpls[tp.id] = tp;
13462 this.master = tpls[0];
13468 compileNode : function(node, istop) {
13473 // skip anything not a tag..
13474 if (node.nodeType != 1) {
13475 if (node.nodeType == 3 && !this.inPre) {
13476 // reduce white space..
13477 node.nodeValue = node.nodeValue.replace(/\s+/g, ' ');
13500 case (node.hasAttribute('roo-for')): tpl.attr = 'for'; break;
13501 case (node.hasAttribute('roo-if')): tpl.attr = 'if'; break;
13502 case (node.hasAttribute('roo-name')): tpl.attr = 'name'; break;
13503 case (node.hasAttribute('roo-exec')): tpl.attr = 'exec'; break;
13509 // just itterate children..
13510 this.iterChild(node,this.compileNode);
13513 tpl.uid = this.id++;
13514 tpl.value = node.getAttribute('roo-' + tpl.attr);
13515 node.removeAttribute('roo-'+ tpl.attr);
13516 if (tpl.attr != 'name') {
13517 var placeholder = document.createTextNode('{domtpl' + tpl.uid + '}');
13518 node.parentNode.replaceChild(placeholder, node);
13521 var placeholder = document.createElement('span');
13522 placeholder.className = 'roo-tpl-' + tpl.value;
13523 node.parentNode.replaceChild(placeholder, node);
13526 // parent now sees '{domtplXXXX}
13527 this.iterChild(node,this.compileNode);
13529 // we should now have node body...
13530 var div = document.createElement('div');
13531 div.appendChild(node);
13533 // this has the unfortunate side effect of converting tagged attributes
13534 // eg. href="{...}" into %7C...%7D
13535 // this has been fixed by searching for those combo's although it's a bit hacky..
13538 tpl.body = div.innerHTML;
13545 switch (tpl.value) {
13546 case '.': tpl.forCall = new Function('values', 'parent', 'with(values){ return values; }'); break;
13547 case '..': tpl.forCall= new Function('values', 'parent', 'with(values){ return parent; }'); break;
13548 default: tpl.forCall= new Function('values', 'parent', 'with(values){ return '+tpl.value+'; }');
13553 tpl.execCall = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
13557 tpl.ifCall = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
13561 tpl.id = tpl.value; // replace non characters???
13567 this.tpls.push(tpl);
13577 * Compile a segment of the template into a 'sub-template'
13583 compileTpl : function(tpl)
13585 var fm = Roo.util.Format;
13586 var useF = this.disableFormats !== true;
13588 var sep = Roo.isGecko ? "+\n" : ",\n";
13590 var undef = function(str) {
13591 Roo.debug && Roo.log("Property not found :" + str);
13595 //Roo.log(tpl.body);
13599 var fn = function(m, lbrace, name, format, args)
13602 //Roo.log(arguments);
13603 args = args ? args.replace(/\\'/g,"'") : args;
13604 //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
13605 if (typeof(format) == 'undefined') {
13606 format = 'htmlEncode';
13608 if (format == 'raw' ) {
13612 if(name.substr(0, 6) == 'domtpl'){
13613 return "'"+ sep +'this.applySubTemplate('+name.substr(6)+', values, parent)'+sep+"'";
13616 // build an array of options to determine if value is undefined..
13618 // basically get 'xxxx.yyyy' then do
13619 // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
13620 // (function () { Roo.log("Property not found"); return ''; })() :
13625 Roo.each(name.split('.'), function(st) {
13626 lookfor += (lookfor.length ? '.': '') + st;
13627 udef_ar.push( "(typeof(" + lookfor + ") == 'undefined')" );
13630 var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
13633 if(format && useF){
13635 args = args ? ',' + args : "";
13637 if(format.substr(0, 5) != "this."){
13638 format = "fm." + format + '(';
13640 format = 'this.call("'+ format.substr(5) + '", ';
13644 return "'"+ sep + udef_st + format + name + args + "))"+sep+"'";
13647 if (args && args.length) {
13648 // called with xxyx.yuu:(test,test)
13650 return "'"+ sep + udef_st + name + '(' + args + "))"+sep+"'";
13652 // raw.. - :raw modifier..
13653 return "'"+ sep + udef_st + name + ")"+sep+"'";
13657 // branched to use + in gecko and [].join() in others
13659 body = "tpl.compiled = function(values, parent){ with(values) { return '" +
13660 tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
13663 body = ["tpl.compiled = function(values, parent){ with (values) { return ['"];
13664 body.push(tpl.body.replace(/(\r\n|\n)/g,
13665 '\\n').replace(/'/g, "\\'").replace(this.re, fn));
13666 body.push("'].join('');};};");
13667 body = body.join('');
13670 Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
13672 /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef */
13679 * same as applyTemplate, except it's done to one of the subTemplates
13680 * when using named templates, you can do:
13682 * var str = pl.applySubTemplate('your-name', values);
13685 * @param {Number} id of the template
13686 * @param {Object} values to apply to template
13687 * @param {Object} parent (normaly the instance of this object)
13689 applySubTemplate : function(id, values, parent)
13693 var t = this.tpls[id];
13697 if(t.ifCall && !t.ifCall.call(this, values, parent)){
13698 Roo.debug && Roo.log('if call on ' + t.value + ' return false');
13702 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-if="' + t.value + '" - ' + e.toString());
13709 if(t.execCall && t.execCall.call(this, values, parent)){
13713 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
13719 var vs = t.forCall ? t.forCall.call(this, values, parent) : values;
13720 parent = t.target ? values : parent;
13721 if(t.forCall && vs instanceof Array){
13723 for(var i = 0, len = vs.length; i < len; i++){
13725 buf[buf.length] = t.compiled.call(this, vs[i], parent);
13727 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
13729 //Roo.log(t.compiled);
13733 return buf.join('');
13736 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
13741 return t.compiled.call(this, vs, parent);
13743 Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
13745 //Roo.log(t.compiled);
13753 applyTemplate : function(values){
13754 return this.master.compiled.call(this, values, {});
13755 //var s = this.subs;
13758 apply : function(){
13759 return this.applyTemplate.apply(this, arguments);
13764 Roo.DomTemplate.from = function(el){
13765 el = Roo.getDom(el);
13766 return new Roo.Domtemplate(el.value || el.innerHTML);
13769 * Ext JS Library 1.1.1
13770 * Copyright(c) 2006-2007, Ext JS, LLC.
13772 * Originally Released Under LGPL - original licence link has changed is not relivant.
13775 * <script type="text/javascript">
13779 * @class Roo.util.DelayedTask
13780 * Provides a convenient method of performing setTimeout where a new
13781 * timeout cancels the old timeout. An example would be performing validation on a keypress.
13782 * You can use this class to buffer
13783 * the keypress events for a certain number of milliseconds, and perform only if they stop
13784 * for that amount of time.
13785 * @constructor The parameters to this constructor serve as defaults and are not required.
13786 * @param {Function} fn (optional) The default function to timeout
13787 * @param {Object} scope (optional) The default scope of that timeout
13788 * @param {Array} args (optional) The default Array of arguments
13790 Roo.util.DelayedTask = function(fn, scope, args){
13791 var id = null, d, t;
13793 var call = function(){
13794 var now = new Date().getTime();
13798 fn.apply(scope, args || []);
13802 * Cancels any pending timeout and queues a new one
13803 * @param {Number} delay The milliseconds to delay
13804 * @param {Function} newFn (optional) Overrides function passed to constructor
13805 * @param {Object} newScope (optional) Overrides scope passed to constructor
13806 * @param {Array} newArgs (optional) Overrides args passed to constructor
13808 this.delay = function(delay, newFn, newScope, newArgs){
13809 if(id && delay != d){
13813 t = new Date().getTime();
13815 scope = newScope || scope;
13816 args = newArgs || args;
13818 id = setInterval(call, d);
13823 * Cancel the last queued timeout
13825 this.cancel = function(){
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">
13842 * @class Roo.util.TaskRunner
13843 * Manage background tasks - not sure why this is better that setInterval?
13848 Roo.util.TaskRunner = function(interval){
13849 interval = interval || 10;
13850 var tasks = [], removeQueue = [];
13852 var running = false;
13854 var stopThread = function(){
13860 var startThread = function(){
13863 id = setInterval(runTasks, interval);
13867 var removeTask = function(task){
13868 removeQueue.push(task);
13874 var runTasks = function(){
13875 if(removeQueue.length > 0){
13876 for(var i = 0, len = removeQueue.length; i < len; i++){
13877 tasks.remove(removeQueue[i]);
13880 if(tasks.length < 1){
13885 var now = new Date().getTime();
13886 for(var i = 0, len = tasks.length; i < len; ++i){
13888 var itime = now - t.taskRunTime;
13889 if(t.interval <= itime){
13890 var rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]);
13891 t.taskRunTime = now;
13892 if(rt === false || t.taskRunCount === t.repeat){
13897 if(t.duration && t.duration <= (now - t.taskStartTime)){
13904 * Queues a new task.
13905 * @param {Object} task
13907 * Task property : interval = how frequent to run.
13908 * Task object should implement
13910 * Task object may implement
13911 * function onStop()
13913 this.start = function(task){
13915 task.taskStartTime = new Date().getTime();
13916 task.taskRunTime = 0;
13917 task.taskRunCount = 0;
13923 * @param {Object} task
13925 this.stop = function(task){
13932 this.stopAll = function(){
13934 for(var i = 0, len = tasks.length; i < len; i++){
13935 if(tasks[i].onStop){
13944 Roo.TaskMgr = new Roo.util.TaskRunner();/*
13946 * Ext JS Library 1.1.1
13947 * Copyright(c) 2006-2007, Ext JS, LLC.
13949 * Originally Released Under LGPL - original licence link has changed is not relivant.
13952 * <script type="text/javascript">
13957 * @class Roo.util.MixedCollection
13958 * @extends Roo.util.Observable
13959 * A Collection class that maintains both numeric indexes and keys and exposes events.
13961 * @param {Boolean} allowFunctions True if the addAll function should add function references to the
13962 * collection (defaults to false)
13963 * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection
13964 * and return the key value for that item. This is used when available to look up the key on items that
13965 * were passed without an explicit key parameter to a MixedCollection method. Passing this parameter is
13966 * equivalent to providing an implementation for the {@link #getKey} method.
13968 Roo.util.MixedCollection = function(allowFunctions, keyFn){
13976 * Fires when the collection is cleared.
13981 * Fires when an item is added to the collection.
13982 * @param {Number} index The index at which the item was added.
13983 * @param {Object} o The item added.
13984 * @param {String} key The key associated with the added item.
13989 * Fires when an item is replaced in the collection.
13990 * @param {String} key he key associated with the new added.
13991 * @param {Object} old The item being replaced.
13992 * @param {Object} new The new item.
13997 * Fires when an item is removed from the collection.
13998 * @param {Object} o The item being removed.
13999 * @param {String} key (optional) The key associated with the removed item.
14004 this.allowFunctions = allowFunctions === true;
14006 this.getKey = keyFn;
14008 Roo.util.MixedCollection.superclass.constructor.call(this);
14011 Roo.extend(Roo.util.MixedCollection, Roo.util.Observable, {
14012 allowFunctions : false,
14015 * Adds an item to the collection.
14016 * @param {String} key The key to associate with the item
14017 * @param {Object} o The item to add.
14018 * @return {Object} The item added.
14020 add : function(key, o){
14021 if(arguments.length == 1){
14023 key = this.getKey(o);
14025 if(typeof key == "undefined" || key === null){
14027 this.items.push(o);
14028 this.keys.push(null);
14030 var old = this.map[key];
14032 return this.replace(key, o);
14035 this.items.push(o);
14037 this.keys.push(key);
14039 this.fireEvent("add", this.length-1, o, key);
14044 * MixedCollection has a generic way to fetch keys if you implement getKey.
14047 var mc = new Roo.util.MixedCollection();
14048 mc.add(someEl.dom.id, someEl);
14049 mc.add(otherEl.dom.id, otherEl);
14053 var mc = new Roo.util.MixedCollection();
14054 mc.getKey = function(el){
14060 // or via the constructor
14061 var mc = new Roo.util.MixedCollection(false, function(el){
14067 * @param o {Object} The item for which to find the key.
14068 * @return {Object} The key for the passed item.
14070 getKey : function(o){
14075 * Replaces an item in the collection.
14076 * @param {String} key The key associated with the item to replace, or the item to replace.
14077 * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate with that key.
14078 * @return {Object} The new item.
14080 replace : function(key, o){
14081 if(arguments.length == 1){
14083 key = this.getKey(o);
14085 var old = this.item(key);
14086 if(typeof key == "undefined" || key === null || typeof old == "undefined"){
14087 return this.add(key, o);
14089 var index = this.indexOfKey(key);
14090 this.items[index] = o;
14092 this.fireEvent("replace", key, old, o);
14097 * Adds all elements of an Array or an Object to the collection.
14098 * @param {Object/Array} objs An Object containing properties which will be added to the collection, or
14099 * an Array of values, each of which are added to the collection.
14101 addAll : function(objs){
14102 if(arguments.length > 1 || objs instanceof Array){
14103 var args = arguments.length > 1 ? arguments : objs;
14104 for(var i = 0, len = args.length; i < len; i++){
14108 for(var key in objs){
14109 if(this.allowFunctions || typeof objs[key] != "function"){
14110 this.add(key, objs[key]);
14117 * Executes the specified function once for every item in the collection, passing each
14118 * item as the first and only parameter. returning false from the function will stop the iteration.
14119 * @param {Function} fn The function to execute for each item.
14120 * @param {Object} scope (optional) The scope in which to execute the function.
14122 each : function(fn, scope){
14123 var items = [].concat(this.items); // each safe for removal
14124 for(var i = 0, len = items.length; i < len; i++){
14125 if(fn.call(scope || items[i], items[i], i, len) === false){
14132 * Executes the specified function once for every key in the collection, passing each
14133 * key, and its associated item as the first two parameters.
14134 * @param {Function} fn The function to execute for each item.
14135 * @param {Object} scope (optional) The scope in which to execute the function.
14137 eachKey : function(fn, scope){
14138 for(var i = 0, len = this.keys.length; i < len; i++){
14139 fn.call(scope || window, this.keys[i], this.items[i], i, len);
14144 * Returns the first item in the collection which elicits a true return value from the
14145 * passed selection function.
14146 * @param {Function} fn The selection function to execute for each item.
14147 * @param {Object} scope (optional) The scope in which to execute the function.
14148 * @return {Object} The first item in the collection which returned true from the selection function.
14150 find : function(fn, scope){
14151 for(var i = 0, len = this.items.length; i < len; i++){
14152 if(fn.call(scope || window, this.items[i], this.keys[i])){
14153 return this.items[i];
14160 * Inserts an item at the specified index in the collection.
14161 * @param {Number} index The index to insert the item at.
14162 * @param {String} key The key to associate with the new item, or the item itself.
14163 * @param {Object} o (optional) If the second parameter was a key, the new item.
14164 * @return {Object} The item inserted.
14166 insert : function(index, key, o){
14167 if(arguments.length == 2){
14169 key = this.getKey(o);
14171 if(index >= this.length){
14172 return this.add(key, o);
14175 this.items.splice(index, 0, o);
14176 if(typeof key != "undefined" && key != null){
14179 this.keys.splice(index, 0, key);
14180 this.fireEvent("add", index, o, key);
14185 * Removed an item from the collection.
14186 * @param {Object} o The item to remove.
14187 * @return {Object} The item removed.
14189 remove : function(o){
14190 return this.removeAt(this.indexOf(o));
14194 * Remove an item from a specified index in the collection.
14195 * @param {Number} index The index within the collection of the item to remove.
14197 removeAt : function(index){
14198 if(index < this.length && index >= 0){
14200 var o = this.items[index];
14201 this.items.splice(index, 1);
14202 var key = this.keys[index];
14203 if(typeof key != "undefined"){
14204 delete this.map[key];
14206 this.keys.splice(index, 1);
14207 this.fireEvent("remove", o, key);
14212 * Removed an item associated with the passed key fom the collection.
14213 * @param {String} key The key of the item to remove.
14215 removeKey : function(key){
14216 return this.removeAt(this.indexOfKey(key));
14220 * Returns the number of items in the collection.
14221 * @return {Number} the number of items in the collection.
14223 getCount : function(){
14224 return this.length;
14228 * Returns index within the collection of the passed Object.
14229 * @param {Object} o The item to find the index of.
14230 * @return {Number} index of the item.
14232 indexOf : function(o){
14233 if(!this.items.indexOf){
14234 for(var i = 0, len = this.items.length; i < len; i++){
14235 if(this.items[i] == o) {
14241 return this.items.indexOf(o);
14246 * Returns index within the collection of the passed key.
14247 * @param {String} key The key to find the index of.
14248 * @return {Number} index of the key.
14250 indexOfKey : function(key){
14251 if(!this.keys.indexOf){
14252 for(var i = 0, len = this.keys.length; i < len; i++){
14253 if(this.keys[i] == key) {
14259 return this.keys.indexOf(key);
14264 * Returns the item associated with the passed key OR index. Key has priority over index.
14265 * @param {String/Number} key The key or index of the item.
14266 * @return {Object} The item associated with the passed key.
14268 item : function(key){
14269 if (key === 'length') {
14272 var item = typeof this.map[key] != "undefined" ? this.map[key] : this.items[key];
14273 return typeof item != 'function' || this.allowFunctions ? item : null; // for prototype!
14277 * Returns the item at the specified index.
14278 * @param {Number} index The index of the item.
14281 itemAt : function(index){
14282 return this.items[index];
14286 * Returns the item associated with the passed key.
14287 * @param {String/Number} key The key of the item.
14288 * @return {Object} The item associated with the passed key.
14290 key : function(key){
14291 return this.map[key];
14295 * Returns true if the collection contains the passed Object as an item.
14296 * @param {Object} o The Object to look for in the collection.
14297 * @return {Boolean} True if the collection contains the Object as an item.
14299 contains : function(o){
14300 return this.indexOf(o) != -1;
14304 * Returns true if the collection contains the passed Object as a key.
14305 * @param {String} key The key to look for in the collection.
14306 * @return {Boolean} True if the collection contains the Object as a key.
14308 containsKey : function(key){
14309 return typeof this.map[key] != "undefined";
14313 * Removes all items from the collection.
14315 clear : function(){
14320 this.fireEvent("clear");
14324 * Returns the first item in the collection.
14325 * @return {Object} the first item in the collection..
14327 first : function(){
14328 return this.items[0];
14332 * Returns the last item in the collection.
14333 * @return {Object} the last item in the collection..
14336 return this.items[this.length-1];
14339 _sort : function(property, dir, fn){
14340 var dsc = String(dir).toUpperCase() == "DESC" ? -1 : 1;
14341 fn = fn || function(a, b){
14344 var c = [], k = this.keys, items = this.items;
14345 for(var i = 0, len = items.length; i < len; i++){
14346 c[c.length] = {key: k[i], value: items[i], index: i};
14348 c.sort(function(a, b){
14349 var v = fn(a[property], b[property]) * dsc;
14351 v = (a.index < b.index ? -1 : 1);
14355 for(var i = 0, len = c.length; i < len; i++){
14356 items[i] = c[i].value;
14359 this.fireEvent("sort", this);
14363 * Sorts this collection with the passed comparison function
14364 * @param {String} direction (optional) "ASC" or "DESC"
14365 * @param {Function} fn (optional) comparison function
14367 sort : function(dir, fn){
14368 this._sort("value", dir, fn);
14372 * Sorts this collection by keys
14373 * @param {String} direction (optional) "ASC" or "DESC"
14374 * @param {Function} fn (optional) a comparison function (defaults to case insensitive string)
14376 keySort : function(dir, fn){
14377 this._sort("key", dir, fn || function(a, b){
14378 return String(a).toUpperCase()-String(b).toUpperCase();
14383 * Returns a range of items in this collection
14384 * @param {Number} startIndex (optional) defaults to 0
14385 * @param {Number} endIndex (optional) default to the last item
14386 * @return {Array} An array of items
14388 getRange : function(start, end){
14389 var items = this.items;
14390 if(items.length < 1){
14393 start = start || 0;
14394 end = Math.min(typeof end == "undefined" ? this.length-1 : end, this.length-1);
14397 for(var i = start; i <= end; i++) {
14398 r[r.length] = items[i];
14401 for(var i = start; i >= end; i--) {
14402 r[r.length] = items[i];
14409 * Filter the <i>objects</i> in this collection by a specific property.
14410 * Returns a new collection that has been filtered.
14411 * @param {String} property A property on your objects
14412 * @param {String/RegExp} value Either string that the property values
14413 * should start with or a RegExp to test against the property
14414 * @return {MixedCollection} The new filtered collection
14416 filter : function(property, value){
14417 if(!value.exec){ // not a regex
14418 value = String(value);
14419 if(value.length == 0){
14420 return this.clone();
14422 value = new RegExp("^" + Roo.escapeRe(value), "i");
14424 return this.filterBy(function(o){
14425 return o && value.test(o[property]);
14430 * Filter by a function. * Returns a new collection that has been filtered.
14431 * The passed function will be called with each
14432 * object in the collection. If the function returns true, the value is included
14433 * otherwise it is filtered.
14434 * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)
14435 * @param {Object} scope (optional) The scope of the function (defaults to this)
14436 * @return {MixedCollection} The new filtered collection
14438 filterBy : function(fn, scope){
14439 var r = new Roo.util.MixedCollection();
14440 r.getKey = this.getKey;
14441 var k = this.keys, it = this.items;
14442 for(var i = 0, len = it.length; i < len; i++){
14443 if(fn.call(scope||this, it[i], k[i])){
14444 r.add(k[i], it[i]);
14451 * Creates a duplicate of this collection
14452 * @return {MixedCollection}
14454 clone : function(){
14455 var r = new Roo.util.MixedCollection();
14456 var k = this.keys, it = this.items;
14457 for(var i = 0, len = it.length; i < len; i++){
14458 r.add(k[i], it[i]);
14460 r.getKey = this.getKey;
14465 * Returns the item associated with the passed key or index.
14467 * @param {String/Number} key The key or index of the item.
14468 * @return {Object} The item associated with the passed key.
14470 Roo.util.MixedCollection.prototype.get = Roo.util.MixedCollection.prototype.item;/*
14472 * Ext JS Library 1.1.1
14473 * Copyright(c) 2006-2007, Ext JS, LLC.
14475 * Originally Released Under LGPL - original licence link has changed is not relivant.
14478 * <script type="text/javascript">
14481 * @class Roo.util.JSON
14482 * Modified version of Douglas Crockford"s json.js that doesn"t
14483 * mess with the Object prototype
14484 * http://www.json.org/js.html
14487 Roo.util.JSON = new (function(){
14488 var useHasOwn = {}.hasOwnProperty ? true : false;
14490 // crashes Safari in some instances
14491 //var validRE = /^("(\\.|[^"\\\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/;
14493 var pad = function(n) {
14494 return n < 10 ? "0" + n : n;
14507 var encodeString = function(s){
14508 if (/["\\\x00-\x1f]/.test(s)) {
14509 return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
14514 c = b.charCodeAt();
14516 Math.floor(c / 16).toString(16) +
14517 (c % 16).toString(16);
14520 return '"' + s + '"';
14523 var encodeArray = function(o){
14524 var a = ["["], b, i, l = o.length, v;
14525 for (i = 0; i < l; i += 1) {
14527 switch (typeof v) {
14536 a.push(v === null ? "null" : Roo.util.JSON.encode(v));
14544 var encodeDate = function(o){
14545 return '"' + o.getFullYear() + "-" +
14546 pad(o.getMonth() + 1) + "-" +
14547 pad(o.getDate()) + "T" +
14548 pad(o.getHours()) + ":" +
14549 pad(o.getMinutes()) + ":" +
14550 pad(o.getSeconds()) + '"';
14554 * Encodes an Object, Array or other value
14555 * @param {Mixed} o The variable to encode
14556 * @return {String} The JSON string
14558 this.encode = function(o)
14560 // should this be extended to fully wrap stringify..
14562 if(typeof o == "undefined" || o === null){
14564 }else if(o instanceof Array){
14565 return encodeArray(o);
14566 }else if(o instanceof Date){
14567 return encodeDate(o);
14568 }else if(typeof o == "string"){
14569 return encodeString(o);
14570 }else if(typeof o == "number"){
14571 return isFinite(o) ? String(o) : "null";
14572 }else if(typeof o == "boolean"){
14575 var a = ["{"], b, i, v;
14577 if(!useHasOwn || o.hasOwnProperty(i)) {
14579 switch (typeof v) {
14588 a.push(this.encode(i), ":",
14589 v === null ? "null" : this.encode(v));
14600 * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError.
14601 * @param {String} json The JSON string
14602 * @return {Object} The resulting object
14604 this.decode = function(json){
14606 return /** eval:var:json */ eval("(" + json + ')');
14610 * Shorthand for {@link Roo.util.JSON#encode}
14611 * @member Roo encode
14613 Roo.encode = typeof(JSON) != 'undefined' && JSON.stringify ? JSON.stringify : Roo.util.JSON.encode;
14615 * Shorthand for {@link Roo.util.JSON#decode}
14616 * @member Roo decode
14618 Roo.decode = typeof(JSON) != 'undefined' && JSON.parse ? JSON.parse : Roo.util.JSON.decode;
14621 * Ext JS Library 1.1.1
14622 * Copyright(c) 2006-2007, Ext JS, LLC.
14624 * Originally Released Under LGPL - original licence link has changed is not relivant.
14627 * <script type="text/javascript">
14631 * @class Roo.util.Format
14632 * Reusable data formatting functions
14635 Roo.util.Format = function(){
14636 var trimRe = /^\s+|\s+$/g;
14639 * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length
14640 * @param {String} value The string to truncate
14641 * @param {Number} length The maximum length to allow before truncating
14642 * @return {String} The converted text
14644 ellipsis : function(value, len){
14645 if(value && value.length > len){
14646 return value.substr(0, len-3)+"...";
14652 * Checks a reference and converts it to empty string if it is undefined
14653 * @param {Mixed} value Reference to check
14654 * @return {Mixed} Empty string if converted, otherwise the original value
14656 undef : function(value){
14657 return typeof value != "undefined" ? value : "";
14661 * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
14662 * @param {String} value The string to encode
14663 * @return {String} The encoded text
14665 htmlEncode : function(value){
14666 return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);
14670 * Convert certain characters (&, <, >, and ') from their HTML character equivalents.
14671 * @param {String} value The string to decode
14672 * @return {String} The decoded text
14674 htmlDecode : function(value){
14675 return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"');
14679 * Trims any whitespace from either side of a string
14680 * @param {String} value The text to trim
14681 * @return {String} The trimmed text
14683 trim : function(value){
14684 return String(value).replace(trimRe, "");
14688 * Returns a substring from within an original string
14689 * @param {String} value The original text
14690 * @param {Number} start The start index of the substring
14691 * @param {Number} length The length of the substring
14692 * @return {String} The substring
14694 substr : function(value, start, length){
14695 return String(value).substr(start, length);
14699 * Converts a string to all lower case letters
14700 * @param {String} value The text to convert
14701 * @return {String} The converted text
14703 lowercase : function(value){
14704 return String(value).toLowerCase();
14708 * Converts a string to all upper case letters
14709 * @param {String} value The text to convert
14710 * @return {String} The converted text
14712 uppercase : function(value){
14713 return String(value).toUpperCase();
14717 * Converts the first character only of a string to upper case
14718 * @param {String} value The text to convert
14719 * @return {String} The converted text
14721 capitalize : function(value){
14722 return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
14726 call : function(value, fn){
14727 if(arguments.length > 2){
14728 var args = Array.prototype.slice.call(arguments, 2);
14729 args.unshift(value);
14731 return /** eval:var:value */ eval(fn).apply(window, args);
14733 /** eval:var:value */
14734 return /** eval:var:value */ eval(fn).call(window, value);
14740 * safer version of Math.toFixed..??/
14741 * @param {Number/String} value The numeric value to format
14742 * @param {Number/String} value Decimal places
14743 * @return {String} The formatted currency string
14745 toFixed : function(v, n)
14747 // why not use to fixed - precision is buggered???
14749 return Math.round(v-0);
14751 var fact = Math.pow(10,n+1);
14752 v = (Math.round((v-0)*fact))/fact;
14753 var z = (''+fact).substring(2);
14754 if (v == Math.floor(v)) {
14755 return Math.floor(v) + '.' + z;
14758 // now just padd decimals..
14759 var ps = String(v).split('.');
14760 var fd = (ps[1] + z);
14761 var r = fd.substring(0,n);
14762 var rm = fd.substring(n);
14764 return ps[0] + '.' + r;
14766 r*=1; // turn it into a number;
14768 if (String(r).length != n) {
14771 r = String(r).substring(1); // chop the end off.
14774 return ps[0] + '.' + r;
14779 * Format a number as US currency
14780 * @param {Number/String} value The numeric value to format
14781 * @return {String} The formatted currency string
14783 usMoney : function(v){
14784 return '$' + Roo.util.Format.number(v);
14789 * eventually this should probably emulate php's number_format
14790 * @param {Number/String} value The numeric value to format
14791 * @param {Number} decimals number of decimal places
14792 * @param {String} delimiter for thousands (default comma)
14793 * @return {String} The formatted currency string
14795 number : function(v, decimals, thousandsDelimiter)
14797 // multiply and round.
14798 decimals = typeof(decimals) == 'undefined' ? 2 : decimals;
14799 thousandsDelimiter = typeof(thousandsDelimiter) == 'undefined' ? ',' : thousandsDelimiter;
14801 var mul = Math.pow(10, decimals);
14802 var zero = String(mul).substring(1);
14803 v = (Math.round((v-0)*mul))/mul;
14805 // if it's '0' number.. then
14807 //v = (v == Math.floor(v)) ? v + "." + zero : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
14809 var ps = v.split('.');
14812 var r = /(\d+)(\d{3})/;
14815 if(thousandsDelimiter.length != 0) {
14816 whole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsDelimiter );
14821 (decimals ? ('.'+ ps[1] + zero.substring(ps[1].length)) : '') :
14822 // does not have decimals
14823 (decimals ? ('.' + zero) : '');
14826 return whole + sub ;
14830 * Parse a value into a formatted date using the specified format pattern.
14831 * @param {Mixed} value The value to format
14832 * @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')
14833 * @return {String} The formatted date string
14835 date : function(v, format){
14839 if(!(v instanceof Date)){
14840 v = new Date(Date.parse(v));
14842 return v.dateFormat(format || Roo.util.Format.defaults.date);
14846 * Returns a date rendering function that can be reused to apply a date format multiple times efficiently
14847 * @param {String} format Any valid date format string
14848 * @return {Function} The date formatting function
14850 dateRenderer : function(format){
14851 return function(v){
14852 return Roo.util.Format.date(v, format);
14857 stripTagsRE : /<\/?[^>]+>/gi,
14860 * Strips all HTML tags
14861 * @param {Mixed} value The text from which to strip tags
14862 * @return {String} The stripped text
14864 stripTags : function(v){
14865 return !v ? v : String(v).replace(this.stripTagsRE, "");
14869 * Size in Mb,Gb etc.
14870 * @param {Number} value The number to be formated
14871 * @param {number} decimals how many decimal places
14872 * @return {String} the formated string
14874 size : function(value, decimals)
14876 var sizes = ['b', 'k', 'M', 'G', 'T'];
14880 var i = parseInt(Math.floor(Math.log(value) / Math.log(1024)));
14881 return Roo.util.Format.number(value/ Math.pow(1024, i) ,decimals) + sizes[i];
14888 Roo.util.Format.defaults = {
14892 * Ext JS Library 1.1.1
14893 * Copyright(c) 2006-2007, Ext JS, LLC.
14895 * Originally Released Under LGPL - original licence link has changed is not relivant.
14898 * <script type="text/javascript">
14905 * @class Roo.MasterTemplate
14906 * @extends Roo.Template
14907 * Provides a template that can have child templates. The syntax is:
14909 var t = new Roo.MasterTemplate(
14910 '<select name="{name}">',
14911 '<tpl name="options"><option value="{value:trim}">{text:ellipsis(10)}</option></tpl>',
14914 t.add('options', {value: 'foo', text: 'bar'});
14915 // or you can add multiple child elements in one shot
14916 t.addAll('options', [
14917 {value: 'foo', text: 'bar'},
14918 {value: 'foo2', text: 'bar2'},
14919 {value: 'foo3', text: 'bar3'}
14921 // then append, applying the master template values
14922 t.append('my-form', {name: 'my-select'});
14924 * A name attribute for the child template is not required if you have only one child
14925 * template or you want to refer to them by index.
14927 Roo.MasterTemplate = function(){
14928 Roo.MasterTemplate.superclass.constructor.apply(this, arguments);
14929 this.originalHtml = this.html;
14931 var m, re = this.subTemplateRe;
14934 while(m = re.exec(this.html)){
14935 var name = m[1], content = m[2];
14940 tpl : new Roo.Template(content)
14943 st[name] = st[subIndex];
14945 st[subIndex].tpl.compile();
14946 st[subIndex].tpl.call = this.call.createDelegate(this);
14949 this.subCount = subIndex;
14952 Roo.extend(Roo.MasterTemplate, Roo.Template, {
14954 * The regular expression used to match sub templates
14958 subTemplateRe : /<tpl(?:\sname="([\w-]+)")?>((?:.|\n)*?)<\/tpl>/gi,
14961 * Applies the passed values to a child template.
14962 * @param {String/Number} name (optional) The name or index of the child template
14963 * @param {Array/Object} values The values to be applied to the template
14964 * @return {MasterTemplate} this
14966 add : function(name, values){
14967 if(arguments.length == 1){
14968 values = arguments[0];
14971 var s = this.subs[name];
14972 s.buffer[s.buffer.length] = s.tpl.apply(values);
14977 * Applies all the passed values to a child template.
14978 * @param {String/Number} name (optional) The name or index of the child template
14979 * @param {Array} values The values to be applied to the template, this should be an array of objects.
14980 * @param {Boolean} reset (optional) True to reset the template first
14981 * @return {MasterTemplate} this
14983 fill : function(name, values, reset){
14985 if(a.length == 1 || (a.length == 2 && typeof a[1] == "boolean")){
14993 for(var i = 0, len = values.length; i < len; i++){
14994 this.add(name, values[i]);
15000 * Resets the template for reuse
15001 * @return {MasterTemplate} this
15003 reset : function(){
15005 for(var i = 0; i < this.subCount; i++){
15011 applyTemplate : function(values){
15013 var replaceIndex = -1;
15014 this.html = this.originalHtml.replace(this.subTemplateRe, function(m, name){
15015 return s[++replaceIndex].buffer.join("");
15017 return Roo.MasterTemplate.superclass.applyTemplate.call(this, values);
15020 apply : function(){
15021 return this.applyTemplate.apply(this, arguments);
15024 compile : function(){return this;}
15028 * Alias for fill().
15031 Roo.MasterTemplate.prototype.addAll = Roo.MasterTemplate.prototype.fill;
15033 * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML. e.g.
15034 * var tpl = Roo.MasterTemplate.from('element-id');
15035 * @param {String/HTMLElement} el
15036 * @param {Object} config
15039 Roo.MasterTemplate.from = function(el, config){
15040 el = Roo.getDom(el);
15041 return new Roo.MasterTemplate(el.value || el.innerHTML, config || '');
15044 * Ext JS Library 1.1.1
15045 * Copyright(c) 2006-2007, Ext JS, LLC.
15047 * Originally Released Under LGPL - original licence link has changed is not relivant.
15050 * <script type="text/javascript">
15055 * @class Roo.util.CSS
15056 * Utility class for manipulating CSS rules
15060 Roo.util.CSS = function(){
15062 var doc = document;
15064 var camelRe = /(-[a-z])/gi;
15065 var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
15069 * Very simple dynamic creation of stylesheets from a text blob of rules. The text will wrapped in a style
15070 * tag and appended to the HEAD of the document.
15071 * @param {String|Object} cssText The text containing the css rules
15072 * @param {String} id An id to add to the stylesheet for later removal
15073 * @return {StyleSheet}
15075 createStyleSheet : function(cssText, id){
15077 var head = doc.getElementsByTagName("head")[0];
15078 var nrules = doc.createElement("style");
15079 nrules.setAttribute("type", "text/css");
15081 nrules.setAttribute("id", id);
15083 if (typeof(cssText) != 'string') {
15084 // support object maps..
15085 // not sure if this a good idea..
15086 // perhaps it should be merged with the general css handling
15087 // and handle js style props.
15088 var cssTextNew = [];
15089 for(var n in cssText) {
15091 for(var k in cssText[n]) {
15092 citems.push( k + ' : ' +cssText[n][k] + ';' );
15094 cssTextNew.push( n + ' { ' + citems.join(' ') + '} ');
15097 cssText = cssTextNew.join("\n");
15103 head.appendChild(nrules);
15104 ss = nrules.styleSheet;
15105 ss.cssText = cssText;
15108 nrules.appendChild(doc.createTextNode(cssText));
15110 nrules.cssText = cssText;
15112 head.appendChild(nrules);
15113 ss = nrules.styleSheet ? nrules.styleSheet : (nrules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
15115 this.cacheStyleSheet(ss);
15120 * Removes a style or link tag by id
15121 * @param {String} id The id of the tag
15123 removeStyleSheet : function(id){
15124 var existing = doc.getElementById(id);
15126 existing.parentNode.removeChild(existing);
15131 * Dynamically swaps an existing stylesheet reference for a new one
15132 * @param {String} id The id of an existing link tag to remove
15133 * @param {String} url The href of the new stylesheet to include
15135 swapStyleSheet : function(id, url){
15136 this.removeStyleSheet(id);
15137 var ss = doc.createElement("link");
15138 ss.setAttribute("rel", "stylesheet");
15139 ss.setAttribute("type", "text/css");
15140 ss.setAttribute("id", id);
15141 ss.setAttribute("href", url);
15142 doc.getElementsByTagName("head")[0].appendChild(ss);
15146 * Refresh the rule cache if you have dynamically added stylesheets
15147 * @return {Object} An object (hash) of rules indexed by selector
15149 refreshCache : function(){
15150 return this.getRules(true);
15154 cacheStyleSheet : function(stylesheet){
15158 try{// try catch for cross domain access issue
15159 var ssRules = stylesheet.cssRules || stylesheet.rules;
15160 for(var j = ssRules.length-1; j >= 0; --j){
15161 rules[ssRules[j].selectorText] = ssRules[j];
15167 * Gets all css rules for the document
15168 * @param {Boolean} refreshCache true to refresh the internal cache
15169 * @return {Object} An object (hash) of rules indexed by selector
15171 getRules : function(refreshCache){
15172 if(rules == null || refreshCache){
15174 var ds = doc.styleSheets;
15175 for(var i =0, len = ds.length; i < len; i++){
15177 this.cacheStyleSheet(ds[i]);
15185 * Gets an an individual CSS rule by selector(s)
15186 * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
15187 * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
15188 * @return {CSSRule} The CSS rule or null if one is not found
15190 getRule : function(selector, refreshCache){
15191 var rs = this.getRules(refreshCache);
15192 if(!(selector instanceof Array)){
15193 return rs[selector];
15195 for(var i = 0; i < selector.length; i++){
15196 if(rs[selector[i]]){
15197 return rs[selector[i]];
15205 * Updates a rule property
15206 * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
15207 * @param {String} property The css property
15208 * @param {String} value The new value for the property
15209 * @return {Boolean} true If a rule was found and updated
15211 updateRule : function(selector, property, value){
15212 if(!(selector instanceof Array)){
15213 var rule = this.getRule(selector);
15215 rule.style[property.replace(camelRe, camelFn)] = value;
15219 for(var i = 0; i < selector.length; i++){
15220 if(this.updateRule(selector[i], property, value)){
15230 * Ext JS Library 1.1.1
15231 * Copyright(c) 2006-2007, Ext JS, LLC.
15233 * Originally Released Under LGPL - original licence link has changed is not relivant.
15236 * <script type="text/javascript">
15242 * @class Roo.util.ClickRepeater
15243 * @extends Roo.util.Observable
15245 * A wrapper class which can be applied to any element. Fires a "click" event while the
15246 * mouse is pressed. The interval between firings may be specified in the config but
15247 * defaults to 10 milliseconds.
15249 * Optionally, a CSS class may be applied to the element during the time it is pressed.
15251 * @cfg {String/HTMLElement/Element} el The element to act as a button.
15252 * @cfg {Number} delay The initial delay before the repeating event begins firing.
15253 * Similar to an autorepeat key delay.
15254 * @cfg {Number} interval The interval between firings of the "click" event. Default 10 ms.
15255 * @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
15256 * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
15257 * "interval" and "delay" are ignored. "immediate" is honored.
15258 * @cfg {Boolean} preventDefault True to prevent the default click event
15259 * @cfg {Boolean} stopDefault True to stop the default click event
15262 * 2007-02-02 jvs Original code contributed by Nige "Animal" White
15263 * 2007-02-02 jvs Renamed to ClickRepeater
15264 * 2007-02-03 jvs Modifications for FF Mac and Safari
15267 * @param {String/HTMLElement/Element} el The element to listen on
15268 * @param {Object} config
15270 Roo.util.ClickRepeater = function(el, config)
15272 this.el = Roo.get(el);
15273 this.el.unselectable();
15275 Roo.apply(this, config);
15280 * Fires when the mouse button is depressed.
15281 * @param {Roo.util.ClickRepeater} this
15283 "mousedown" : true,
15286 * Fires on a specified interval during the time the element is pressed.
15287 * @param {Roo.util.ClickRepeater} this
15292 * Fires when the mouse key is released.
15293 * @param {Roo.util.ClickRepeater} this
15298 this.el.on("mousedown", this.handleMouseDown, this);
15299 if(this.preventDefault || this.stopDefault){
15300 this.el.on("click", function(e){
15301 if(this.preventDefault){
15302 e.preventDefault();
15304 if(this.stopDefault){
15310 // allow inline handler
15312 this.on("click", this.handler, this.scope || this);
15315 Roo.util.ClickRepeater.superclass.constructor.call(this);
15318 Roo.extend(Roo.util.ClickRepeater, Roo.util.Observable, {
15321 preventDefault : true,
15322 stopDefault : false,
15326 handleMouseDown : function(){
15327 clearTimeout(this.timer);
15329 if(this.pressClass){
15330 this.el.addClass(this.pressClass);
15332 this.mousedownTime = new Date();
15334 Roo.get(document).on("mouseup", this.handleMouseUp, this);
15335 this.el.on("mouseout", this.handleMouseOut, this);
15337 this.fireEvent("mousedown", this);
15338 this.fireEvent("click", this);
15340 this.timer = this.click.defer(this.delay || this.interval, this);
15344 click : function(){
15345 this.fireEvent("click", this);
15346 this.timer = this.click.defer(this.getInterval(), this);
15350 getInterval: function(){
15351 if(!this.accelerate){
15352 return this.interval;
15354 var pressTime = this.mousedownTime.getElapsed();
15355 if(pressTime < 500){
15357 }else if(pressTime < 1700){
15359 }else if(pressTime < 2600){
15361 }else if(pressTime < 3500){
15363 }else if(pressTime < 4400){
15365 }else if(pressTime < 5300){
15367 }else if(pressTime < 6200){
15375 handleMouseOut : function(){
15376 clearTimeout(this.timer);
15377 if(this.pressClass){
15378 this.el.removeClass(this.pressClass);
15380 this.el.on("mouseover", this.handleMouseReturn, this);
15384 handleMouseReturn : function(){
15385 this.el.un("mouseover", this.handleMouseReturn);
15386 if(this.pressClass){
15387 this.el.addClass(this.pressClass);
15393 handleMouseUp : function(){
15394 clearTimeout(this.timer);
15395 this.el.un("mouseover", this.handleMouseReturn);
15396 this.el.un("mouseout", this.handleMouseOut);
15397 Roo.get(document).un("mouseup", this.handleMouseUp);
15398 this.el.removeClass(this.pressClass);
15399 this.fireEvent("mouseup", this);
15402 * @class Roo.util.Clipboard
15408 Roo.util.Clipboard = {
15410 * Writes a string to the clipboard - using the Clipboard API if https, otherwise using text area.
15411 * @param {String} text to copy to clipboard
15413 write : function(text) {
15414 // navigator clipboard api needs a secure context (https)
15415 if (navigator.clipboard && window.isSecureContext) {
15416 // navigator clipboard api method'
15417 navigator.clipboard.writeText(text);
15420 // text area method
15421 var ta = document.createElement("textarea");
15423 // make the textarea out of viewport
15424 ta.style.position = "fixed";
15425 ta.style.left = "-999999px";
15426 ta.style.top = "-999999px";
15427 document.body.appendChild(ta);
15430 document.execCommand('copy');
15440 * Ext JS Library 1.1.1
15441 * Copyright(c) 2006-2007, Ext JS, LLC.
15443 * Originally Released Under LGPL - original licence link has changed is not relivant.
15446 * <script type="text/javascript">
15451 * @class Roo.KeyNav
15452 * <p>Provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind
15453 * navigation keys to function calls that will get called when the keys are pressed, providing an easy
15454 * way to implement custom navigation schemes for any UI component.</p>
15455 * <p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
15456 * pageUp, pageDown, del, home, end. Usage:</p>
15458 var nav = new Roo.KeyNav("my-element", {
15459 "left" : function(e){
15460 this.moveLeft(e.ctrlKey);
15462 "right" : function(e){
15463 this.moveRight(e.ctrlKey);
15465 "enter" : function(e){
15472 * @param {String/HTMLElement/Roo.Element} el The element to bind to
15473 * @param {Object} config The config
15475 Roo.KeyNav = function(el, config){
15476 this.el = Roo.get(el);
15477 Roo.apply(this, config);
15478 if(!this.disabled){
15479 this.disabled = true;
15484 Roo.KeyNav.prototype = {
15486 * @cfg {Boolean} disabled
15487 * True to disable this KeyNav instance (defaults to false)
15491 * @cfg {String} defaultEventAction
15492 * The method to call on the {@link Roo.EventObject} after this KeyNav intercepts a key. Valid values are
15493 * {@link Roo.EventObject#stopEvent}, {@link Roo.EventObject#preventDefault} and
15494 * {@link Roo.EventObject#stopPropagation} (defaults to 'stopEvent')
15496 defaultEventAction: "stopEvent",
15498 * @cfg {Boolean} forceKeyDown
15499 * Handle the keydown event instead of keypress (defaults to false). KeyNav automatically does this for IE since
15500 * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
15501 * handle keydown instead of keypress.
15503 forceKeyDown : false,
15506 prepareEvent : function(e){
15507 var k = e.getKey();
15508 var h = this.keyToHandler[k];
15509 //if(h && this[h]){
15510 // e.stopPropagation();
15512 if(Roo.isSafari && h && k >= 37 && k <= 40){
15518 relay : function(e){
15519 var k = e.getKey();
15520 var h = this.keyToHandler[k];
15522 if(this.doRelay(e, this[h], h) !== true){
15523 e[this.defaultEventAction]();
15529 doRelay : function(e, h, hname){
15530 return h.call(this.scope || this, e);
15533 // possible handlers
15547 // quick lookup hash
15564 * Enable this KeyNav
15566 enable: function(){
15568 // ie won't do special keys on keypress, no one else will repeat keys with keydown
15569 // the EventObject will normalize Safari automatically
15570 if(this.forceKeyDown || Roo.isIE || Roo.isAir){
15571 this.el.on("keydown", this.relay, this);
15573 this.el.on("keydown", this.prepareEvent, this);
15574 this.el.on("keypress", this.relay, this);
15576 this.disabled = false;
15581 * Disable this KeyNav
15583 disable: function(){
15584 if(!this.disabled){
15585 if(this.forceKeyDown || Roo.isIE || Roo.isAir){
15586 this.el.un("keydown", this.relay);
15588 this.el.un("keydown", this.prepareEvent);
15589 this.el.un("keypress", this.relay);
15591 this.disabled = true;
15596 * Ext JS Library 1.1.1
15597 * Copyright(c) 2006-2007, Ext JS, LLC.
15599 * Originally Released Under LGPL - original licence link has changed is not relivant.
15602 * <script type="text/javascript">
15607 * @class Roo.KeyMap
15608 * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
15609 * The constructor accepts the same config object as defined by {@link #addBinding}.
15610 * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
15611 * combination it will call the function with this signature (if the match is a multi-key
15612 * combination the callback will still be called only once): (String key, Roo.EventObject e)
15613 * A KeyMap can also handle a string representation of keys.<br />
15616 // map one key by key code
15617 var map = new Roo.KeyMap("my-element", {
15618 key: 13, // or Roo.EventObject.ENTER
15623 // map multiple keys to one action by string
15624 var map = new Roo.KeyMap("my-element", {
15630 // map multiple keys to multiple actions by strings and array of codes
15631 var map = new Roo.KeyMap("my-element", [
15634 fn: function(){ alert("Return was pressed"); }
15637 fn: function(){ alert('a, b or c was pressed'); }
15642 fn: function(){ alert('Control + shift + tab was pressed.'); }
15646 * <b>Note: A KeyMap starts enabled</b>
15648 * @param {String/HTMLElement/Roo.Element} el The element to bind to
15649 * @param {Object} config The config (see {@link #addBinding})
15650 * @param {String} eventName (optional) The event to bind to (defaults to "keydown")
15652 Roo.KeyMap = function(el, config, eventName){
15653 this.el = Roo.get(el);
15654 this.eventName = eventName || "keydown";
15655 this.bindings = [];
15657 this.addBinding(config);
15662 Roo.KeyMap.prototype = {
15664 * True to stop the event from bubbling and prevent the default browser action if the
15665 * key was handled by the KeyMap (defaults to false)
15671 * Add a new binding to this KeyMap. The following config object properties are supported:
15673 Property Type Description
15674 ---------- --------------- ----------------------------------------------------------------------
15675 key String/Array A single keycode or an array of keycodes to handle
15676 shift Boolean True to handle key only when shift is pressed (defaults to false)
15677 ctrl Boolean True to handle key only when ctrl is pressed (defaults to false)
15678 alt Boolean True to handle key only when alt is pressed (defaults to false)
15679 fn Function The function to call when KeyMap finds the expected key combination
15680 scope Object The scope of the callback function
15686 var map = new Roo.KeyMap(document, {
15687 key: Roo.EventObject.ENTER,
15692 //Add a new binding to the existing KeyMap later
15700 * @param {Object/Array} config A single KeyMap config or an array of configs
15702 addBinding : function(config){
15703 if(config instanceof Array){
15704 for(var i = 0, len = config.length; i < len; i++){
15705 this.addBinding(config[i]);
15709 var keyCode = config.key,
15710 shift = config.shift,
15711 ctrl = config.ctrl,
15714 scope = config.scope;
15715 if(typeof keyCode == "string"){
15717 var keyString = keyCode.toUpperCase();
15718 for(var j = 0, len = keyString.length; j < len; j++){
15719 ks.push(keyString.charCodeAt(j));
15723 var keyArray = keyCode instanceof Array;
15724 var handler = function(e){
15725 if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
15726 var k = e.getKey();
15728 for(var i = 0, len = keyCode.length; i < len; i++){
15729 if(keyCode[i] == k){
15730 if(this.stopEvent){
15733 fn.call(scope || window, k, e);
15739 if(this.stopEvent){
15742 fn.call(scope || window, k, e);
15747 this.bindings.push(handler);
15751 * Shorthand for adding a single key listener
15752 * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the
15753 * following options:
15754 * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
15755 * @param {Function} fn The function to call
15756 * @param {Object} scope (optional) The scope of the function
15758 on : function(key, fn, scope){
15759 var keyCode, shift, ctrl, alt;
15760 if(typeof key == "object" && !(key instanceof Array)){
15779 handleKeyDown : function(e){
15780 if(this.enabled){ //just in case
15781 var b = this.bindings;
15782 for(var i = 0, len = b.length; i < len; i++){
15783 b[i].call(this, e);
15789 * Returns true if this KeyMap is enabled
15790 * @return {Boolean}
15792 isEnabled : function(){
15793 return this.enabled;
15797 * Enables this KeyMap
15799 enable: function(){
15801 this.el.on(this.eventName, this.handleKeyDown, this);
15802 this.enabled = true;
15807 * Disable this KeyMap
15809 disable: function(){
15811 this.el.removeListener(this.eventName, this.handleKeyDown, this);
15812 this.enabled = false;
15817 * Ext JS Library 1.1.1
15818 * Copyright(c) 2006-2007, Ext JS, LLC.
15820 * Originally Released Under LGPL - original licence link has changed is not relivant.
15823 * <script type="text/javascript">
15828 * @class Roo.util.TextMetrics
15829 * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
15830 * wide, in pixels, a given block of text will be.
15833 Roo.util.TextMetrics = function(){
15837 * Measures the size of the specified text
15838 * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
15839 * that can affect the size of the rendered text
15840 * @param {String} text The text to measure
15841 * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
15842 * in order to accurately measure the text height
15843 * @return {Object} An object containing the text's size {width: (width), height: (height)}
15845 measure : function(el, text, fixedWidth){
15847 shared = Roo.util.TextMetrics.Instance(el, fixedWidth);
15850 shared.setFixedWidth(fixedWidth || 'auto');
15851 return shared.getSize(text);
15855 * Return a unique TextMetrics instance that can be bound directly to an element and reused. This reduces
15856 * the overhead of multiple calls to initialize the style properties on each measurement.
15857 * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
15858 * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
15859 * in order to accurately measure the text height
15860 * @return {Roo.util.TextMetrics.Instance} instance The new instance
15862 createInstance : function(el, fixedWidth){
15863 return Roo.util.TextMetrics.Instance(el, fixedWidth);
15869 * @class Roo.util.TextMetrics.Instance
15870 * Instance of TextMetrics Calcuation
15872 * Create a new TextMetrics Instance
15873 * @param {Object} bindto
15874 * @param {Boolean} fixedWidth
15877 Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth)
15879 var ml = new Roo.Element(document.createElement('div'));
15880 document.body.appendChild(ml.dom);
15881 ml.position('absolute');
15882 ml.setLeftTop(-1000, -1000);
15886 ml.setWidth(fixedWidth);
15891 * Returns the size of the specified text based on the internal element's style and width properties
15892 * @param {String} text The text to measure
15893 * @return {Object} An object containing the text's size {width: (width), height: (height)}
15895 getSize : function(text){
15897 var s = ml.getSize();
15903 * Binds this TextMetrics instance to an element from which to copy existing CSS styles
15904 * that can affect the size of the rendered text
15905 * @param {String/HTMLElement} el The element, dom node or id
15907 bind : function(el){
15909 Roo.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
15914 * Sets a fixed width on the internal measurement element. If the text will be multiline, you have
15915 * to set a fixed width in order to accurately measure the text height.
15916 * @param {Number} width The width to set on the element
15918 setFixedWidth : function(width){
15919 ml.setWidth(width);
15923 * Returns the measured width of the specified text
15924 * @param {String} text The text to measure
15925 * @return {Number} width The width in pixels
15927 getWidth : function(text){
15928 ml.dom.style.width = 'auto';
15929 return this.getSize(text).width;
15933 * Returns the measured height of the specified text. For multiline text, be sure to call
15934 * {@link #setFixedWidth} if necessary.
15935 * @param {String} text The text to measure
15936 * @return {Number} height The height in pixels
15938 getHeight : function(text){
15939 return this.getSize(text).height;
15943 instance.bind(bindTo);
15948 // backwards compat
15949 Roo.Element.measureText = Roo.util.TextMetrics.measure;/*
15951 * Ext JS Library 1.1.1
15952 * Copyright(c) 2006-2007, Ext JS, LLC.
15954 * Originally Released Under LGPL - original licence link has changed is not relivant.
15957 * <script type="text/javascript">
15961 * @class Roo.state.Provider
15962 * Abstract base class for state provider implementations. This class provides methods
15963 * for encoding and decoding <b>typed</b> variables including dates and defines the
15964 * Provider interface.
15966 Roo.state.Provider = function(){
15968 * @event statechange
15969 * Fires when a state change occurs.
15970 * @param {Provider} this This state provider
15971 * @param {String} key The state key which was changed
15972 * @param {String} value The encoded value for the state
15975 "statechange": true
15978 Roo.state.Provider.superclass.constructor.call(this);
15980 Roo.extend(Roo.state.Provider, Roo.util.Observable, {
15982 * Returns the current value for a key
15983 * @param {String} name The key name
15984 * @param {Mixed} defaultValue A default value to return if the key's value is not found
15985 * @return {Mixed} The state data
15987 get : function(name, defaultValue){
15988 return typeof this.state[name] == "undefined" ?
15989 defaultValue : this.state[name];
15993 * Clears a value from the state
15994 * @param {String} name The key name
15996 clear : function(name){
15997 delete this.state[name];
15998 this.fireEvent("statechange", this, name, null);
16002 * Sets the value for a key
16003 * @param {String} name The key name
16004 * @param {Mixed} value The value to set
16006 set : function(name, value){
16007 this.state[name] = value;
16008 this.fireEvent("statechange", this, name, value);
16012 * Decodes a string previously encoded with {@link #encodeValue}.
16013 * @param {String} value The value to decode
16014 * @return {Mixed} The decoded value
16016 decodeValue : function(cookie){
16017 var re = /^(a|n|d|b|s|o)\:(.*)$/;
16018 var matches = re.exec(unescape(cookie));
16019 if(!matches || !matches[1]) {
16020 return; // non state cookie
16022 var type = matches[1];
16023 var v = matches[2];
16026 return parseFloat(v);
16028 return new Date(Date.parse(v));
16033 var values = v.split("^");
16034 for(var i = 0, len = values.length; i < len; i++){
16035 all.push(this.decodeValue(values[i]));
16040 var values = v.split("^");
16041 for(var i = 0, len = values.length; i < len; i++){
16042 var kv = values[i].split("=");
16043 all[kv[0]] = this.decodeValue(kv[1]);
16052 * Encodes a value including type information. Decode with {@link #decodeValue}.
16053 * @param {Mixed} value The value to encode
16054 * @return {String} The encoded value
16056 encodeValue : function(v){
16058 if(typeof v == "number"){
16060 }else if(typeof v == "boolean"){
16061 enc = "b:" + (v ? "1" : "0");
16062 }else if(v instanceof Date){
16063 enc = "d:" + v.toGMTString();
16064 }else if(v instanceof Array){
16066 for(var i = 0, len = v.length; i < len; i++){
16067 flat += this.encodeValue(v[i]);
16073 }else if(typeof v == "object"){
16076 if(typeof v[key] != "function"){
16077 flat += key + "=" + this.encodeValue(v[key]) + "^";
16080 enc = "o:" + flat.substring(0, flat.length-1);
16084 return escape(enc);
16090 * Ext JS Library 1.1.1
16091 * Copyright(c) 2006-2007, Ext JS, LLC.
16093 * Originally Released Under LGPL - original licence link has changed is not relivant.
16096 * <script type="text/javascript">
16099 * @class Roo.state.Manager
16100 * This is the global state manager. By default all components that are "state aware" check this class
16101 * for state information if you don't pass them a custom state provider. In order for this class
16102 * to be useful, it must be initialized with a provider when your application initializes.
16104 // in your initialization function
16106 Roo.state.Manager.setProvider(new Roo.state.CookieProvider());
16108 // supposed you have a {@link Roo.BorderLayout}
16109 var layout = new Roo.BorderLayout(...);
16110 layout.restoreState();
16111 // or a {Roo.BasicDialog}
16112 var dialog = new Roo.BasicDialog(...);
16113 dialog.restoreState();
16117 Roo.state.Manager = function(){
16118 var provider = new Roo.state.Provider();
16122 * Configures the default state provider for your application
16123 * @param {Provider} stateProvider The state provider to set
16125 setProvider : function(stateProvider){
16126 provider = stateProvider;
16130 * Returns the current value for a key
16131 * @param {String} name The key name
16132 * @param {Mixed} defaultValue The default value to return if the key lookup does not match
16133 * @return {Mixed} The state data
16135 get : function(key, defaultValue){
16136 return provider.get(key, defaultValue);
16140 * Sets the value for a key
16141 * @param {String} name The key name
16142 * @param {Mixed} value The state data
16144 set : function(key, value){
16145 provider.set(key, value);
16149 * Clears a value from the state
16150 * @param {String} name The key name
16152 clear : function(key){
16153 provider.clear(key);
16157 * Gets the currently configured state provider
16158 * @return {Provider} The state provider
16160 getProvider : function(){
16167 * Ext JS Library 1.1.1
16168 * Copyright(c) 2006-2007, Ext JS, LLC.
16170 * Originally Released Under LGPL - original licence link has changed is not relivant.
16173 * <script type="text/javascript">
16176 * @class Roo.state.CookieProvider
16177 * @extends Roo.state.Provider
16178 * The default Provider implementation which saves state via cookies.
16181 var cp = new Roo.state.CookieProvider({
16183 expires: new Date(new Date().getTime()+(1000*60*60*24*30)); //30 days
16184 domain: "roojs.com"
16186 Roo.state.Manager.setProvider(cp);
16188 * @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
16189 * @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
16190 * @cfg {String} domain The domain to save the cookie for. Note that you cannot specify a different domain than
16191 * your page is on, but you can specify a sub-domain, or simply the domain itself like 'roojs.com' to include
16192 * all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
16193 * domain the page is running on including the 'www' like 'www.roojs.com')
16194 * @cfg {Boolean} secure True if the site is using SSL (defaults to false)
16196 * Create a new CookieProvider
16197 * @param {Object} config The configuration object
16199 Roo.state.CookieProvider = function(config){
16200 Roo.state.CookieProvider.superclass.constructor.call(this);
16202 this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
16203 this.domain = null;
16204 this.secure = false;
16205 Roo.apply(this, config);
16206 this.state = this.readCookies();
16209 Roo.extend(Roo.state.CookieProvider, Roo.state.Provider, {
16211 set : function(name, value){
16212 if(typeof value == "undefined" || value === null){
16216 this.setCookie(name, value);
16217 Roo.state.CookieProvider.superclass.set.call(this, name, value);
16221 clear : function(name){
16222 this.clearCookie(name);
16223 Roo.state.CookieProvider.superclass.clear.call(this, name);
16227 readCookies : function(){
16229 var c = document.cookie + ";";
16230 var re = /\s?(.*?)=(.*?);/g;
16232 while((matches = re.exec(c)) != null){
16233 var name = matches[1];
16234 var value = matches[2];
16235 if(name && name.substring(0,3) == "ys-"){
16236 cookies[name.substr(3)] = this.decodeValue(value);
16243 setCookie : function(name, value){
16244 document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
16245 ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
16246 ((this.path == null) ? "" : ("; path=" + this.path)) +
16247 ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
16248 ((this.secure == true) ? "; secure" : "");
16252 clearCookie : function(name){
16253 document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
16254 ((this.path == null) ? "" : ("; path=" + this.path)) +
16255 ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
16256 ((this.secure == true) ? "; secure" : "");
16260 * Ext JS Library 1.1.1
16261 * Copyright(c) 2006-2007, Ext JS, LLC.
16263 * Originally Released Under LGPL - original licence link has changed is not relivant.
16266 * <script type="text/javascript">
16271 * @class Roo.ComponentMgr
16272 * Provides a common registry of all components on a page so that they can be easily accessed by component id (see {@link Roo.getCmp}).
16275 Roo.ComponentMgr = function(){
16276 var all = new Roo.util.MixedCollection();
16280 * Registers a component.
16281 * @param {Roo.Component} c The component
16283 register : function(c){
16288 * Unregisters a component.
16289 * @param {Roo.Component} c The component
16291 unregister : function(c){
16296 * Returns a component by id
16297 * @param {String} id The component id
16299 get : function(id){
16300 return all.get(id);
16304 * Registers a function that will be called when a specified component is added to ComponentMgr
16305 * @param {String} id The component id
16306 * @param {Funtction} fn The callback function
16307 * @param {Object} scope The scope of the callback
16309 onAvailable : function(id, fn, scope){
16310 all.on("add", function(index, o){
16312 fn.call(scope || o, o);
16313 all.un("add", fn, scope);
16320 * Ext JS Library 1.1.1
16321 * Copyright(c) 2006-2007, Ext JS, LLC.
16323 * Originally Released Under LGPL - original licence link has changed is not relivant.
16326 * <script type="text/javascript">
16330 * @class Roo.Component
16331 * @extends Roo.util.Observable
16332 * Base class for all major Roo components. All subclasses of Component can automatically participate in the standard
16333 * Roo component lifecycle of creation, rendering and destruction. They also have automatic support for basic hide/show
16334 * and enable/disable behavior. Component allows any subclass to be lazy-rendered into any {@link Roo.Container} and
16335 * to be automatically registered with the {@link Roo.ComponentMgr} so that it can be referenced at any time via {@link Roo.getCmp}.
16336 * All visual components (widgets) that require rendering into a layout should subclass Component.
16338 * @param {Roo.Element/String/Object} config The configuration options. If an element is passed, it is set as the internal
16339 * 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
16340 * and is used as the component id. Otherwise, it is assumed to be a standard config object and is applied to the component.
16342 Roo.Component = function(config){
16343 config = config || {};
16344 if(config.tagName || config.dom || typeof config == "string"){ // element object
16345 config = {el: config, id: config.id || config};
16347 this.initialConfig = config;
16349 Roo.apply(this, config);
16353 * Fires after the component is disabled.
16354 * @param {Roo.Component} this
16359 * Fires after the component is enabled.
16360 * @param {Roo.Component} this
16364 * @event beforeshow
16365 * Fires before the component is shown. Return false to stop the show.
16366 * @param {Roo.Component} this
16371 * Fires after the component is shown.
16372 * @param {Roo.Component} this
16376 * @event beforehide
16377 * Fires before the component is hidden. Return false to stop the hide.
16378 * @param {Roo.Component} this
16383 * Fires after the component is hidden.
16384 * @param {Roo.Component} this
16388 * @event beforerender
16389 * Fires before the component is rendered. Return false to stop the render.
16390 * @param {Roo.Component} this
16392 beforerender : true,
16395 * Fires after the component is rendered.
16396 * @param {Roo.Component} this
16400 * @event beforedestroy
16401 * Fires before the component is destroyed. Return false to stop the destroy.
16402 * @param {Roo.Component} this
16404 beforedestroy : true,
16407 * Fires after the component is destroyed.
16408 * @param {Roo.Component} this
16413 this.id = "roo-comp-" + (++Roo.Component.AUTO_ID);
16415 Roo.ComponentMgr.register(this);
16416 Roo.Component.superclass.constructor.call(this);
16417 this.initComponent();
16418 if(this.renderTo){ // not supported by all components yet. use at your own risk!
16419 this.render(this.renderTo);
16420 delete this.renderTo;
16425 Roo.Component.AUTO_ID = 1000;
16427 Roo.extend(Roo.Component, Roo.util.Observable, {
16429 * @scope Roo.Component.prototype
16431 * true if this component is hidden. Read-only.
16436 * true if this component is disabled. Read-only.
16441 * true if this component has been rendered. Read-only.
16445 /** @cfg {String} disableClass
16446 * CSS class added to the component when it is disabled (defaults to "x-item-disabled").
16448 disabledClass : "x-item-disabled",
16449 /** @cfg {Boolean} allowDomMove
16450 * Whether the component can move the Dom node when rendering (defaults to true).
16452 allowDomMove : true,
16453 /** @cfg {String} hideMode (display|visibility)
16454 * How this component should hidden. Supported values are
16455 * "visibility" (css visibility), "offsets" (negative offset position) and
16456 * "display" (css display) - defaults to "display".
16458 hideMode: 'display',
16461 ctype : "Roo.Component",
16464 * @cfg {String} actionMode
16465 * which property holds the element that used for hide() / show() / disable() / enable()
16466 * default is 'el' for forms you probably want to set this to fieldEl
16471 getActionEl : function(){
16472 return this[this.actionMode];
16475 initComponent : Roo.emptyFn,
16477 * If this is a lazy rendering component, render it to its container element.
16478 * @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.
16480 render : function(container, position){
16486 if(this.fireEvent("beforerender", this) === false){
16490 if(!container && this.el){
16491 this.el = Roo.get(this.el);
16492 container = this.el.dom.parentNode;
16493 this.allowDomMove = false;
16495 this.container = Roo.get(container);
16496 this.rendered = true;
16497 if(position !== undefined){
16498 if(typeof position == 'number'){
16499 position = this.container.dom.childNodes[position];
16501 position = Roo.getDom(position);
16504 this.onRender(this.container, position || null);
16506 this.el.addClass(this.cls);
16510 this.el.applyStyles(this.style);
16513 this.fireEvent("render", this);
16514 this.afterRender(this.container);
16527 // default function is not really useful
16528 onRender : function(ct, position){
16530 this.el = Roo.get(this.el);
16531 if(this.allowDomMove !== false){
16532 ct.dom.insertBefore(this.el.dom, position);
16538 getAutoCreate : function(){
16539 var cfg = typeof this.autoCreate == "object" ?
16540 this.autoCreate : Roo.apply({}, this.defaultAutoCreate);
16541 if(this.id && !cfg.id){
16548 afterRender : Roo.emptyFn,
16551 * Destroys this component by purging any event listeners, removing the component's element from the DOM,
16552 * removing the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.
16554 destroy : function(){
16555 if(this.fireEvent("beforedestroy", this) !== false){
16556 this.purgeListeners();
16557 this.beforeDestroy();
16559 this.el.removeAllListeners();
16561 if(this.actionMode == "container"){
16562 this.container.remove();
16566 Roo.ComponentMgr.unregister(this);
16567 this.fireEvent("destroy", this);
16572 beforeDestroy : function(){
16577 onDestroy : function(){
16582 * Returns the underlying {@link Roo.Element}.
16583 * @return {Roo.Element} The element
16585 getEl : function(){
16590 * Returns the id of this component.
16593 getId : function(){
16598 * Try to focus this component.
16599 * @param {Boolean} selectText True to also select the text in this component (if applicable)
16600 * @return {Roo.Component} this
16602 focus : function(selectText){
16605 if(selectText === true){
16606 this.el.dom.select();
16621 * Disable this component.
16622 * @return {Roo.Component} this
16624 disable : function(){
16628 this.disabled = true;
16629 this.fireEvent("disable", this);
16634 onDisable : function(){
16635 this.getActionEl().addClass(this.disabledClass);
16636 this.el.dom.disabled = true;
16640 * Enable this component.
16641 * @return {Roo.Component} this
16643 enable : function(){
16647 this.disabled = false;
16648 this.fireEvent("enable", this);
16653 onEnable : function(){
16654 this.getActionEl().removeClass(this.disabledClass);
16655 this.el.dom.disabled = false;
16659 * Convenience function for setting disabled/enabled by boolean.
16660 * @param {Boolean} disabled
16662 setDisabled : function(disabled){
16663 this[disabled ? "disable" : "enable"]();
16667 * Show this component.
16668 * @return {Roo.Component} this
16671 if(this.fireEvent("beforeshow", this) !== false){
16672 this.hidden = false;
16676 this.fireEvent("show", this);
16682 onShow : function(){
16683 var ae = this.getActionEl();
16684 if(this.hideMode == 'visibility'){
16685 ae.dom.style.visibility = "visible";
16686 }else if(this.hideMode == 'offsets'){
16687 ae.removeClass('x-hidden');
16689 ae.dom.style.display = "";
16694 * Hide this component.
16695 * @return {Roo.Component} this
16698 if(this.fireEvent("beforehide", this) !== false){
16699 this.hidden = true;
16703 this.fireEvent("hide", this);
16709 onHide : function(){
16710 var ae = this.getActionEl();
16711 if(this.hideMode == 'visibility'){
16712 ae.dom.style.visibility = "hidden";
16713 }else if(this.hideMode == 'offsets'){
16714 ae.addClass('x-hidden');
16716 ae.dom.style.display = "none";
16721 * Convenience function to hide or show this component by boolean.
16722 * @param {Boolean} visible True to show, false to hide
16723 * @return {Roo.Component} this
16725 setVisible: function(visible){
16735 * Returns true if this component is visible.
16737 isVisible : function(){
16738 return this.getActionEl().isVisible();
16741 cloneConfig : function(overrides){
16742 overrides = overrides || {};
16743 var id = overrides.id || Roo.id();
16744 var cfg = Roo.applyIf(overrides, this.initialConfig);
16745 cfg.id = id; // prevent dup id
16746 return new this.constructor(cfg);
16750 * Ext JS Library 1.1.1
16751 * Copyright(c) 2006-2007, Ext JS, LLC.
16753 * Originally Released Under LGPL - original licence link has changed is not relivant.
16756 * <script type="text/javascript">
16760 * @class Roo.BoxComponent
16761 * @extends Roo.Component
16762 * Base class for any visual {@link Roo.Component} that uses a box container. BoxComponent provides automatic box
16763 * model adjustments for sizing and positioning and will work correctly withnin the Component rendering model. All
16764 * container classes should subclass BoxComponent so that they will work consistently when nested within other Roo
16765 * layout containers.
16767 * @param {Roo.Element/String/Object} config The configuration options.
16769 Roo.BoxComponent = function(config){
16770 Roo.Component.call(this, config);
16774 * Fires after the component is resized.
16775 * @param {Roo.Component} this
16776 * @param {Number} adjWidth The box-adjusted width that was set
16777 * @param {Number} adjHeight The box-adjusted height that was set
16778 * @param {Number} rawWidth The width that was originally specified
16779 * @param {Number} rawHeight The height that was originally specified
16784 * Fires after the component is moved.
16785 * @param {Roo.Component} this
16786 * @param {Number} x The new x position
16787 * @param {Number} y The new y position
16793 Roo.extend(Roo.BoxComponent, Roo.Component, {
16794 // private, set in afterRender to signify that the component has been rendered
16796 // private, used to defer height settings to subclasses
16797 deferHeight: false,
16798 /** @cfg {Number} width
16799 * width (optional) size of component
16801 /** @cfg {Number} height
16802 * height (optional) size of component
16806 * Sets the width and height of the component. This method fires the resize event. This method can accept
16807 * either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
16808 * @param {Number/Object} width The new width to set, or a size object in the format {width, height}
16809 * @param {Number} height The new height to set (not required if a size object is passed as the first arg)
16810 * @return {Roo.BoxComponent} this
16812 setSize : function(w, h){
16813 // support for standard size objects
16814 if(typeof w == 'object'){
16819 if(!this.boxReady){
16825 // prevent recalcs when not needed
16826 if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
16829 this.lastSize = {width: w, height: h};
16831 var adj = this.adjustSize(w, h);
16832 var aw = adj.width, ah = adj.height;
16833 if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
16834 var rz = this.getResizeEl();
16835 if(!this.deferHeight && aw !== undefined && ah !== undefined){
16836 rz.setSize(aw, ah);
16837 }else if(!this.deferHeight && ah !== undefined){
16839 }else if(aw !== undefined){
16842 this.onResize(aw, ah, w, h);
16843 this.fireEvent('resize', this, aw, ah, w, h);
16849 * Gets the current size of the component's underlying element.
16850 * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
16852 getSize : function(){
16853 return this.el.getSize();
16857 * Gets the current XY position of the component's underlying element.
16858 * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
16859 * @return {Array} The XY position of the element (e.g., [100, 200])
16861 getPosition : function(local){
16862 if(local === true){
16863 return [this.el.getLeft(true), this.el.getTop(true)];
16865 return this.xy || this.el.getXY();
16869 * Gets the current box measurements of the component's underlying element.
16870 * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
16871 * @returns {Object} box An object in the format {x, y, width, height}
16873 getBox : function(local){
16874 var s = this.el.getSize();
16876 s.x = this.el.getLeft(true);
16877 s.y = this.el.getTop(true);
16879 var xy = this.xy || this.el.getXY();
16887 * Sets the current box measurements of the component's underlying element.
16888 * @param {Object} box An object in the format {x, y, width, height}
16889 * @returns {Roo.BoxComponent} this
16891 updateBox : function(box){
16892 this.setSize(box.width, box.height);
16893 this.setPagePosition(box.x, box.y);
16898 getResizeEl : function(){
16899 return this.resizeEl || this.el;
16903 getPositionEl : function(){
16904 return this.positionEl || this.el;
16908 * Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}.
16909 * This method fires the move event.
16910 * @param {Number} left The new left
16911 * @param {Number} top The new top
16912 * @returns {Roo.BoxComponent} this
16914 setPosition : function(x, y){
16917 if(!this.boxReady){
16920 var adj = this.adjustPosition(x, y);
16921 var ax = adj.x, ay = adj.y;
16923 var el = this.getPositionEl();
16924 if(ax !== undefined || ay !== undefined){
16925 if(ax !== undefined && ay !== undefined){
16926 el.setLeftTop(ax, ay);
16927 }else if(ax !== undefined){
16929 }else if(ay !== undefined){
16932 this.onPosition(ax, ay);
16933 this.fireEvent('move', this, ax, ay);
16939 * Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
16940 * This method fires the move event.
16941 * @param {Number} x The new x position
16942 * @param {Number} y The new y position
16943 * @returns {Roo.BoxComponent} this
16945 setPagePosition : function(x, y){
16948 if(!this.boxReady){
16951 if(x === undefined || y === undefined){ // cannot translate undefined points
16954 var p = this.el.translatePoints(x, y);
16955 this.setPosition(p.left, p.top);
16960 onRender : function(ct, position){
16961 Roo.BoxComponent.superclass.onRender.call(this, ct, position);
16963 this.resizeEl = Roo.get(this.resizeEl);
16965 if(this.positionEl){
16966 this.positionEl = Roo.get(this.positionEl);
16971 afterRender : function(){
16972 Roo.BoxComponent.superclass.afterRender.call(this);
16973 this.boxReady = true;
16974 this.setSize(this.width, this.height);
16975 if(this.x || this.y){
16976 this.setPosition(this.x, this.y);
16978 if(this.pageX || this.pageY){
16979 this.setPagePosition(this.pageX, this.pageY);
16984 * Force the component's size to recalculate based on the underlying element's current height and width.
16985 * @returns {Roo.BoxComponent} this
16987 syncSize : function(){
16988 delete this.lastSize;
16989 this.setSize(this.el.getWidth(), this.el.getHeight());
16994 * Called after the component is resized, this method is empty by default but can be implemented by any
16995 * subclass that needs to perform custom logic after a resize occurs.
16996 * @param {Number} adjWidth The box-adjusted width that was set
16997 * @param {Number} adjHeight The box-adjusted height that was set
16998 * @param {Number} rawWidth The width that was originally specified
16999 * @param {Number} rawHeight The height that was originally specified
17001 onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
17006 * Called after the component is moved, this method is empty by default but can be implemented by any
17007 * subclass that needs to perform custom logic after a move occurs.
17008 * @param {Number} x The new x position
17009 * @param {Number} y The new y position
17011 onPosition : function(x, y){
17016 adjustSize : function(w, h){
17017 if(this.autoWidth){
17020 if(this.autoHeight){
17023 return {width : w, height: h};
17027 adjustPosition : function(x, y){
17028 return {x : x, y: y};
17032 * Ext JS Library 1.1.1
17033 * Copyright(c) 2006-2007, Ext JS, LLC.
17035 * Originally Released Under LGPL - original licence link has changed is not relivant.
17038 * <script type="text/javascript">
17043 * @extends Roo.Element
17044 * An extended {@link Roo.Element} object that supports a shadow and shim, constrain to viewport and
17045 * automatic maintaining of shadow/shim positions.
17046 * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
17047 * @cfg {String/Boolean} shadow True to create a shadow element with default class "x-layer-shadow", or
17048 * you can pass a string with a CSS class name. False turns off the shadow.
17049 * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: "div", cls: "x-layer"}).
17050 * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
17051 * @cfg {String} cls CSS class to add to the element
17052 * @cfg {Number} zindex Starting z-index (defaults to 11000)
17053 * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
17055 * @param {Object} config An object with config options.
17056 * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
17059 Roo.Layer = function(config, existingEl){
17060 config = config || {};
17061 var dh = Roo.DomHelper;
17062 var cp = config.parentEl, pel = cp ? Roo.getDom(cp) : document.body;
17064 this.dom = Roo.getDom(existingEl);
17067 var o = config.dh || {tag: "div", cls: "x-layer"};
17068 this.dom = dh.append(pel, o);
17071 this.addClass(config.cls);
17073 this.constrain = config.constrain !== false;
17074 this.visibilityMode = Roo.Element.VISIBILITY;
17076 this.id = this.dom.id = config.id;
17078 this.id = Roo.id(this.dom);
17080 this.zindex = config.zindex || this.getZIndex();
17081 this.position("absolute", this.zindex);
17083 this.shadowOffset = config.shadowOffset || 4;
17084 this.shadow = new Roo.Shadow({
17085 offset : this.shadowOffset,
17086 mode : config.shadow
17089 this.shadowOffset = 0;
17091 this.useShim = config.shim !== false && Roo.useShims;
17092 this.useDisplay = config.useDisplay;
17096 var supr = Roo.Element.prototype;
17098 // shims are shared among layer to keep from having 100 iframes
17101 Roo.extend(Roo.Layer, Roo.Element, {
17103 getZIndex : function(){
17104 return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
17107 getShim : function(){
17114 var shim = shims.shift();
17116 shim = this.createShim();
17117 shim.enableDisplayMode('block');
17118 shim.dom.style.display = 'none';
17119 shim.dom.style.visibility = 'visible';
17121 var pn = this.dom.parentNode;
17122 if(shim.dom.parentNode != pn){
17123 pn.insertBefore(shim.dom, this.dom);
17125 shim.setStyle('z-index', this.getZIndex()-2);
17130 hideShim : function(){
17132 this.shim.setDisplayed(false);
17133 shims.push(this.shim);
17138 disableShadow : function(){
17140 this.shadowDisabled = true;
17141 this.shadow.hide();
17142 this.lastShadowOffset = this.shadowOffset;
17143 this.shadowOffset = 0;
17147 enableShadow : function(show){
17149 this.shadowDisabled = false;
17150 this.shadowOffset = this.lastShadowOffset;
17151 delete this.lastShadowOffset;
17159 // this code can execute repeatedly in milliseconds (i.e. during a drag) so
17160 // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
17161 sync : function(doShow){
17162 var sw = this.shadow;
17163 if(!this.updating && this.isVisible() && (sw || this.useShim)){
17164 var sh = this.getShim();
17166 var w = this.getWidth(),
17167 h = this.getHeight();
17169 var l = this.getLeft(true),
17170 t = this.getTop(true);
17172 if(sw && !this.shadowDisabled){
17173 if(doShow && !sw.isVisible()){
17176 sw.realign(l, t, w, h);
17182 // fit the shim behind the shadow, so it is shimmed too
17183 var a = sw.adjusts, s = sh.dom.style;
17184 s.left = (Math.min(l, l+a.l))+"px";
17185 s.top = (Math.min(t, t+a.t))+"px";
17186 s.width = (w+a.w)+"px";
17187 s.height = (h+a.h)+"px";
17194 sh.setLeftTop(l, t);
17201 destroy : function(){
17204 this.shadow.hide();
17206 this.removeAllListeners();
17207 var pn = this.dom.parentNode;
17209 pn.removeChild(this.dom);
17211 Roo.Element.uncache(this.id);
17214 remove : function(){
17219 beginUpdate : function(){
17220 this.updating = true;
17224 endUpdate : function(){
17225 this.updating = false;
17230 hideUnders : function(negOffset){
17232 this.shadow.hide();
17238 constrainXY : function(){
17239 if(this.constrain){
17240 var vw = Roo.lib.Dom.getViewWidth(),
17241 vh = Roo.lib.Dom.getViewHeight();
17242 var s = Roo.get(document).getScroll();
17244 var xy = this.getXY();
17245 var x = xy[0], y = xy[1];
17246 var w = this.dom.offsetWidth+this.shadowOffset, h = this.dom.offsetHeight+this.shadowOffset;
17247 // only move it if it needs it
17249 // first validate right/bottom
17250 if((x + w) > vw+s.left){
17251 x = vw - w - this.shadowOffset;
17254 if((y + h) > vh+s.top){
17255 y = vh - h - this.shadowOffset;
17258 // then make sure top/left isn't negative
17269 var ay = this.avoidY;
17270 if(y <= ay && (y+h) >= ay){
17276 supr.setXY.call(this, xy);
17282 isVisible : function(){
17283 return this.visible;
17287 showAction : function(){
17288 this.visible = true; // track visibility to prevent getStyle calls
17289 if(this.useDisplay === true){
17290 this.setDisplayed("");
17291 }else if(this.lastXY){
17292 supr.setXY.call(this, this.lastXY);
17293 }else if(this.lastLT){
17294 supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
17299 hideAction : function(){
17300 this.visible = false;
17301 if(this.useDisplay === true){
17302 this.setDisplayed(false);
17304 this.setLeftTop(-10000,-10000);
17308 // overridden Element method
17309 setVisible : function(v, a, d, c, e){
17314 var cb = function(){
17319 }.createDelegate(this);
17320 supr.setVisible.call(this, true, true, d, cb, e);
17323 this.hideUnders(true);
17332 }.createDelegate(this);
17334 supr.setVisible.call(this, v, a, d, cb, e);
17343 storeXY : function(xy){
17344 delete this.lastLT;
17348 storeLeftTop : function(left, top){
17349 delete this.lastXY;
17350 this.lastLT = [left, top];
17354 beforeFx : function(){
17355 this.beforeAction();
17356 return Roo.Layer.superclass.beforeFx.apply(this, arguments);
17360 afterFx : function(){
17361 Roo.Layer.superclass.afterFx.apply(this, arguments);
17362 this.sync(this.isVisible());
17366 beforeAction : function(){
17367 if(!this.updating && this.shadow){
17368 this.shadow.hide();
17372 // overridden Element method
17373 setLeft : function(left){
17374 this.storeLeftTop(left, this.getTop(true));
17375 supr.setLeft.apply(this, arguments);
17379 setTop : function(top){
17380 this.storeLeftTop(this.getLeft(true), top);
17381 supr.setTop.apply(this, arguments);
17385 setLeftTop : function(left, top){
17386 this.storeLeftTop(left, top);
17387 supr.setLeftTop.apply(this, arguments);
17391 setXY : function(xy, a, d, c, e){
17393 this.beforeAction();
17395 var cb = this.createCB(c);
17396 supr.setXY.call(this, xy, a, d, cb, e);
17403 createCB : function(c){
17414 // overridden Element method
17415 setX : function(x, a, d, c, e){
17416 this.setXY([x, this.getY()], a, d, c, e);
17419 // overridden Element method
17420 setY : function(y, a, d, c, e){
17421 this.setXY([this.getX(), y], a, d, c, e);
17424 // overridden Element method
17425 setSize : function(w, h, a, d, c, e){
17426 this.beforeAction();
17427 var cb = this.createCB(c);
17428 supr.setSize.call(this, w, h, a, d, cb, e);
17434 // overridden Element method
17435 setWidth : function(w, a, d, c, e){
17436 this.beforeAction();
17437 var cb = this.createCB(c);
17438 supr.setWidth.call(this, w, a, d, cb, e);
17444 // overridden Element method
17445 setHeight : function(h, a, d, c, e){
17446 this.beforeAction();
17447 var cb = this.createCB(c);
17448 supr.setHeight.call(this, h, a, d, cb, e);
17454 // overridden Element method
17455 setBounds : function(x, y, w, h, a, d, c, e){
17456 this.beforeAction();
17457 var cb = this.createCB(c);
17459 this.storeXY([x, y]);
17460 supr.setXY.call(this, [x, y]);
17461 supr.setSize.call(this, w, h, a, d, cb, e);
17464 supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
17470 * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
17471 * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
17472 * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
17473 * @param {Number} zindex The new z-index to set
17474 * @return {this} The Layer
17476 setZIndex : function(zindex){
17477 this.zindex = zindex;
17478 this.setStyle("z-index", zindex + 2);
17480 this.shadow.setZIndex(zindex + 1);
17483 this.shim.setStyle("z-index", zindex);
17488 * Original code for Roojs - LGPL
17489 * <script type="text/javascript">
17493 * @class Roo.XComponent
17494 * A delayed Element creator...
17495 * Or a way to group chunks of interface together.
17496 * technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
17497 * used in conjunction with XComponent.build() it will create an instance of each element,
17498 * then call addxtype() to build the User interface.
17500 * Mypart.xyx = new Roo.XComponent({
17502 parent : 'Mypart.xyz', // empty == document.element.!!
17506 disabled : function() {}
17508 tree : function() { // return an tree of xtype declared components
17512 xtype : 'NestedLayoutPanel',
17519 * It can be used to build a big heiracy, with parent etc.
17520 * or you can just use this to render a single compoent to a dom element
17521 * MYPART.render(Roo.Element | String(id) | dom_element )
17528 * Roo is designed primarily as a single page application, so the UI build for a standard interface will
17529 * expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.
17531 * Each sub module is expected to have a parent pointing to the class name of it's parent module.
17533 * When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
17534 * - if mulitple topModules exist, the last one is defined as the top module.
17538 * When the top level or multiple modules are to embedded into a existing HTML page,
17539 * the parent element can container '#id' of the element where the module will be drawn.
17543 * Unlike classic Roo, the bootstrap tends not to be used as a single page.
17544 * it relies more on a include mechanism, where sub modules are included into an outer page.
17545 * This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )
17547 * Bootstrap Roo Included elements
17549 * Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
17550 * hence confusing the component builder as it thinks there are multiple top level elements.
17552 * String Over-ride & Translations
17554 * Our builder application writes all the strings as _strings and _named_strings. This is to enable the translation of elements,
17555 * and also the 'overlaying of string values - needed when different versions of the same application with different text content
17556 * are needed. @see Roo.XComponent.overlayString
17560 * @extends Roo.util.Observable
17562 * @param cfg {Object} configuration of component
17565 Roo.XComponent = function(cfg) {
17566 Roo.apply(this, cfg);
17570 * Fires when this the componnt is built
17571 * @param {Roo.XComponent} c the component
17576 this.region = this.region || 'center'; // default..
17577 Roo.XComponent.register(this);
17578 this.modules = false;
17579 this.el = false; // where the layout goes..
17583 Roo.extend(Roo.XComponent, Roo.util.Observable, {
17586 * The created element (with Roo.factory())
17587 * @type {Roo.Layout}
17593 * for BC - use el in new code
17594 * @type {Roo.Layout}
17600 * for BC - use el in new code
17601 * @type {Roo.Layout}
17606 * @cfg {Function|boolean} disabled
17607 * If this module is disabled by some rule, return true from the funtion
17612 * @cfg {String} parent
17613 * Name of parent element which it get xtype added to..
17618 * @cfg {String} order
17619 * Used to set the order in which elements are created (usefull for multiple tabs)
17624 * @cfg {String} name
17625 * String to display while loading.
17629 * @cfg {String} region
17630 * Region to render component to (defaults to center)
17635 * @cfg {Array} items
17636 * A single item array - the first element is the root of the tree..
17637 * It's done this way to stay compatible with the Xtype system...
17643 * The method that retuns the tree of parts that make up this compoennt
17650 * render element to dom or tree
17651 * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
17654 render : function(el)
17658 var hp = this.parent ? 1 : 0;
17659 Roo.debug && Roo.log(this);
17661 var tree = this._tree ? this._tree() : this.tree();
17664 if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
17665 // if parent is a '#.....' string, then let's use that..
17666 var ename = this.parent.substr(1);
17667 this.parent = false;
17668 Roo.debug && Roo.log(ename);
17670 case 'bootstrap-body':
17671 if (typeof(tree.el) != 'undefined' && tree.el == document.body) {
17672 // this is the BorderLayout standard?
17673 this.parent = { el : true };
17676 if (["Nest", "Content", "Grid", "Tree"].indexOf(tree.xtype) > -1) {
17677 // need to insert stuff...
17679 el : new Roo.bootstrap.layout.Border({
17680 el : document.body,
17686 tabPosition: 'top',
17687 //resizeTabs: true,
17688 alwaysShowTabs: true,
17698 if (typeof(Roo.bootstrap.Body) != 'undefined' ) {
17699 this.parent = { el : new Roo.bootstrap.Body() };
17700 Roo.debug && Roo.log("setting el to doc body");
17703 throw "Container is bootstrap body, but Roo.bootstrap.Body is not defined";
17707 this.parent = { el : true};
17710 el = Roo.get(ename);
17711 if (typeof(Roo.bootstrap) != 'undefined' && tree['|xns'] == 'Roo.bootstrap') {
17712 this.parent = { el : true};
17719 if (!el && !this.parent) {
17720 Roo.debug && Roo.log("Warning - element can not be found :#" + ename );
17725 Roo.debug && Roo.log("EL:");
17726 Roo.debug && Roo.log(el);
17727 Roo.debug && Roo.log("this.parent.el:");
17728 Roo.debug && Roo.log(this.parent.el);
17731 // altertive root elements ??? - we need a better way to indicate these.
17732 var is_alt = Roo.XComponent.is_alt ||
17733 (typeof(tree.el) != 'undefined' && tree.el == document.body) ||
17734 (typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) ||
17735 (typeof(Roo.mailer) != 'undefined' && tree.xns == Roo.mailer) ;
17739 if (!this.parent && is_alt) {
17740 //el = Roo.get(document.body);
17741 this.parent = { el : true };
17746 if (!this.parent) {
17748 Roo.debug && Roo.log("no parent - creating one");
17750 el = el ? Roo.get(el) : false;
17752 if (typeof(Roo.BorderLayout) == 'undefined' ) {
17755 el : new Roo.bootstrap.layout.Border({
17756 el: el || document.body,
17762 tabPosition: 'top',
17763 //resizeTabs: true,
17764 alwaysShowTabs: false,
17767 overflow: 'visible'
17773 // it's a top level one..
17775 el : new Roo.BorderLayout(el || document.body, {
17780 tabPosition: 'top',
17781 //resizeTabs: true,
17782 alwaysShowTabs: el && hp? false : true,
17783 hideTabs: el || !hp ? true : false,
17791 if (!this.parent.el) {
17792 // probably an old style ctor, which has been disabled.
17796 // The 'tree' method is '_tree now'
17798 tree.region = tree.region || this.region;
17799 var is_body = false;
17800 if (this.parent.el === true) {
17801 // bootstrap... - body..
17805 this.parent.el = Roo.factory(tree);
17809 this.el = this.parent.el.addxtype(tree, undefined, is_body);
17810 this.fireEvent('built', this);
17812 this.panel = this.el;
17813 this.layout = this.panel.layout;
17814 this.parentLayout = this.parent.layout || false;
17820 Roo.apply(Roo.XComponent, {
17822 * @property hideProgress
17823 * true to disable the building progress bar.. usefull on single page renders.
17826 hideProgress : false,
17828 * @property buildCompleted
17829 * True when the builder has completed building the interface.
17832 buildCompleted : false,
17835 * @property topModule
17836 * the upper most module - uses document.element as it's constructor.
17843 * @property modules
17844 * array of modules to be created by registration system.
17845 * @type {Array} of Roo.XComponent
17850 * @property elmodules
17851 * array of modules to be created by which use #ID
17852 * @type {Array} of Roo.XComponent
17859 * Is an alternative Root - normally used by bootstrap or other systems,
17860 * where the top element in the tree can wrap 'body'
17861 * @type {boolean} (default false)
17866 * @property build_from_html
17867 * Build elements from html - used by bootstrap HTML stuff
17868 * - this is cleared after build is completed
17869 * @type {boolean} (default false)
17872 build_from_html : false,
17874 * Register components to be built later.
17876 * This solves the following issues
17877 * - Building is not done on page load, but after an authentication process has occured.
17878 * - Interface elements are registered on page load
17879 * - Parent Interface elements may not be loaded before child, so this handles that..
17886 module : 'Pman.Tab.projectMgr',
17888 parent : 'Pman.layout',
17889 disabled : false, // or use a function..
17892 * * @param {Object} details about module
17894 register : function(obj) {
17896 Roo.XComponent.event.fireEvent('register', obj);
17897 switch(typeof(obj.disabled) ) {
17903 if ( obj.disabled() ) {
17909 if (obj.disabled || obj.region == '#disabled') {
17915 this.modules.push(obj);
17919 * convert a string to an object..
17920 * eg. 'AAA.BBB' -> finds AAA.BBB
17924 toObject : function(str)
17926 if (!str || typeof(str) == 'object') {
17929 if (str.substring(0,1) == '#') {
17933 var ar = str.split('.');
17938 eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
17940 throw "Module not found : " + str;
17944 throw "Module not found : " + str;
17946 Roo.each(ar, function(e) {
17947 if (typeof(o[e]) == 'undefined') {
17948 throw "Module not found : " + str;
17959 * move modules into their correct place in the tree..
17962 preBuild : function ()
17965 Roo.each(this.modules , function (obj)
17967 Roo.XComponent.event.fireEvent('beforebuild', obj);
17969 var opar = obj.parent;
17971 obj.parent = this.toObject(opar);
17973 Roo.debug && Roo.log("parent:toObject failed: " + e.toString());
17978 Roo.debug && Roo.log("GOT top level module");
17979 Roo.debug && Roo.log(obj);
17980 obj.modules = new Roo.util.MixedCollection(false,
17981 function(o) { return o.order + '' }
17983 this.topModule = obj;
17986 // parent is a string (usually a dom element name..)
17987 if (typeof(obj.parent) == 'string') {
17988 this.elmodules.push(obj);
17991 if (obj.parent.constructor != Roo.XComponent) {
17992 Roo.debug && Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
17994 if (!obj.parent.modules) {
17995 obj.parent.modules = new Roo.util.MixedCollection(false,
17996 function(o) { return o.order + '' }
17999 if (obj.parent.disabled) {
18000 obj.disabled = true;
18002 obj.parent.modules.add(obj);
18007 * make a list of modules to build.
18008 * @return {Array} list of modules.
18011 buildOrder : function()
18014 var cmp = function(a,b) {
18015 return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
18017 if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
18018 throw "No top level modules to build";
18021 // make a flat list in order of modules to build.
18022 var mods = this.topModule ? [ this.topModule ] : [];
18025 // elmodules (is a list of DOM based modules )
18026 Roo.each(this.elmodules, function(e) {
18028 if (!this.topModule &&
18029 typeof(e.parent) == 'string' &&
18030 e.parent.substring(0,1) == '#' &&
18031 Roo.get(e.parent.substr(1))
18034 _this.topModule = e;
18040 // add modules to their parents..
18041 var addMod = function(m) {
18042 Roo.debug && Roo.log("build Order: add: " + m.name);
18045 if (m.modules && !m.disabled) {
18046 Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules");
18047 m.modules.keySort('ASC', cmp );
18048 Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules (after sort)");
18050 m.modules.each(addMod);
18052 Roo.debug && Roo.log("build Order: no child modules");
18054 // not sure if this is used any more..
18056 m.finalize.name = m.name + " (clean up) ";
18057 mods.push(m.finalize);
18061 if (this.topModule && this.topModule.modules) {
18062 this.topModule.modules.keySort('ASC', cmp );
18063 this.topModule.modules.each(addMod);
18069 * Build the registered modules.
18070 * @param {Object} parent element.
18071 * @param {Function} optional method to call after module has been added.
18075 build : function(opts)
18078 if (typeof(opts) != 'undefined') {
18079 Roo.apply(this,opts);
18083 var mods = this.buildOrder();
18085 //this.allmods = mods;
18086 //Roo.debug && Roo.log(mods);
18088 if (!mods.length) { // should not happen
18089 throw "NO modules!!!";
18093 var msg = "Building Interface...";
18094 // flash it up as modal - so we store the mask!?
18095 if (!this.hideProgress && Roo.MessageBox) {
18096 Roo.MessageBox.show({ title: 'loading' });
18097 Roo.MessageBox.show({
18098 title: "Please wait...",
18108 var total = mods.length;
18111 var progressRun = function() {
18112 if (!mods.length) {
18113 Roo.debug && Roo.log('hide?');
18114 if (!this.hideProgress && Roo.MessageBox) {
18115 Roo.MessageBox.hide();
18117 Roo.XComponent.build_from_html = false; // reset, so dialogs will be build from javascript
18119 Roo.XComponent.event.fireEvent('buildcomplete', _this.topModule);
18125 var m = mods.shift();
18128 Roo.debug && Roo.log(m);
18129 // not sure if this is supported any more.. - modules that are are just function
18130 if (typeof(m) == 'function') {
18132 return progressRun.defer(10, _this);
18136 msg = "Building Interface " + (total - mods.length) +
18138 (m.name ? (' - ' + m.name) : '');
18139 Roo.debug && Roo.log(msg);
18140 if (!_this.hideProgress && Roo.MessageBox) {
18141 Roo.MessageBox.updateProgress( (total - mods.length)/total, msg );
18145 // is the module disabled?
18146 var disabled = (typeof(m.disabled) == 'function') ?
18147 m.disabled.call(m.module.disabled) : m.disabled;
18151 return progressRun(); // we do not update the display!
18159 // it's 10 on top level, and 1 on others??? why...
18160 return progressRun.defer(10, _this);
18163 progressRun.defer(1, _this);
18169 * Overlay a set of modified strings onto a component
18170 * This is dependant on our builder exporting the strings and 'named strings' elements.
18172 * @param {Object} element to overlay on - eg. Pman.Dialog.Login
18173 * @param {Object} associative array of 'named' string and it's new value.
18176 overlayStrings : function( component, strings )
18178 if (typeof(component['_named_strings']) == 'undefined') {
18179 throw "ERROR: component does not have _named_strings";
18181 for ( var k in strings ) {
18182 var md = typeof(component['_named_strings'][k]) == 'undefined' ? false : component['_named_strings'][k];
18183 if (md !== false) {
18184 component['_strings'][md] = strings[k];
18186 Roo.log('could not find named string: ' + k + ' in');
18187 Roo.log(component);
18202 * wrapper for event.on - aliased later..
18203 * Typically use to register a event handler for register:
18205 * eg. Roo.XComponent.on('register', function(comp) { comp.disable = true } );
18214 Roo.XComponent.event = new Roo.util.Observable({
18218 * Fires when an Component is registered,
18219 * set the disable property on the Component to stop registration.
18220 * @param {Roo.XComponent} c the component being registerd.
18225 * @event beforebuild
18226 * Fires before each Component is built
18227 * can be used to apply permissions.
18228 * @param {Roo.XComponent} c the component being registerd.
18231 'beforebuild' : true,
18233 * @event buildcomplete
18234 * Fires on the top level element when all elements have been built
18235 * @param {Roo.XComponent} the top level component.
18237 'buildcomplete' : true
18242 Roo.XComponent.on = Roo.XComponent.event.on.createDelegate(Roo.XComponent.event);
18245 * marked - a markdown parser
18246 * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)
18247 * https://github.com/chjj/marked
18253 * Roo.Markdown - is a very crude wrapper around marked..
18257 * alert( Roo.Markdown.toHtml("Markdown *rocks*.") );
18259 * Note: move the sample code to the bottom of this
18260 * file before uncommenting it.
18265 Roo.Markdown.toHtml = function(text) {
18267 var c = new Roo.Markdown.marked.setOptions({
18268 renderer: new Roo.Markdown.marked.Renderer(),
18279 text = text.replace(/\\\n/g,' ');
18280 return Roo.Markdown.marked(text);
18285 // Wraps all "globals" so that the only thing
18286 // exposed is makeHtml().
18292 * eval:var:unescape
18300 var escape = function (html, encode) {
18302 .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&')
18303 .replace(/</g, '<')
18304 .replace(/>/g, '>')
18305 .replace(/"/g, '"')
18306 .replace(/'/g, ''');
18309 var unescape = function (html) {
18310 // explicitly match decimal, hex, and named HTML entities
18311 return html.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/g, function(_, n) {
18312 n = n.toLowerCase();
18313 if (n === 'colon') { return ':'; }
18314 if (n.charAt(0) === '#') {
18315 return n.charAt(1) === 'x'
18316 ? String.fromCharCode(parseInt(n.substring(2), 16))
18317 : String.fromCharCode(+n.substring(1));
18323 var replace = function (regex, opt) {
18324 regex = regex.source;
18326 return function self(name, val) {
18327 if (!name) { return new RegExp(regex, opt); }
18328 val = val.source || val;
18329 val = val.replace(/(^|[^\[])\^/g, '$1');
18330 regex = regex.replace(name, val);
18339 var noop = function () {}
18345 var merge = function (obj) {
18350 for (; i < arguments.length; i++) {
18351 target = arguments[i];
18352 for (key in target) {
18353 if (Object.prototype.hasOwnProperty.call(target, key)) {
18354 obj[key] = target[key];
18364 * Block-Level Grammar
18372 code: /^( {4}[^\n]+\n*)+/,
18374 hr: /^( *[-*_]){3,} *(?:\n+|$)/,
18375 heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
18377 lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
18378 blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
18379 list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
18380 html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,
18381 def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
18383 paragraph: /^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,
18387 block.bullet = /(?:[*+-]|\d+\.)/;
18388 block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
18389 block.item = replace(block.item, 'gm')
18390 (/bull/g, block.bullet)
18393 block.list = replace(block.list)
18394 (/bull/g, block.bullet)
18395 ('hr', '\\n+(?=\\1?(?:[-*_] *){3,}(?:\\n+|$))')
18396 ('def', '\\n+(?=' + block.def.source + ')')
18399 block.blockquote = replace(block.blockquote)
18403 block._tag = '(?!(?:'
18404 + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
18405 + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'
18406 + '|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|[^\\w\\s@]*@)\\b';
18408 block.html = replace(block.html)
18409 ('comment', /<!--[\s\S]*?-->/)
18410 ('closed', /<(tag)[\s\S]+?<\/\1>/)
18411 ('closing', /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)
18412 (/tag/g, block._tag)
18415 block.paragraph = replace(block.paragraph)
18417 ('heading', block.heading)
18418 ('lheading', block.lheading)
18419 ('blockquote', block.blockquote)
18420 ('tag', '<' + block._tag)
18425 * Normal Block Grammar
18428 block.normal = merge({}, block);
18431 * GFM Block Grammar
18434 block.gfm = merge({}, block.normal, {
18435 fences: /^ *(`{3,}|~{3,})[ \.]*(\S+)? *\n([\s\S]*?)\s*\1 *(?:\n+|$)/,
18437 heading: /^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/
18440 block.gfm.paragraph = replace(block.paragraph)
18442 + block.gfm.fences.source.replace('\\1', '\\2') + '|'
18443 + block.list.source.replace('\\1', '\\3') + '|')
18447 * GFM + Tables Block Grammar
18450 block.tables = merge({}, block.gfm, {
18451 nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
18452 table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/
18459 var Lexer = function (options) {
18461 this.tokens.links = {};
18462 this.options = options || marked.defaults;
18463 this.rules = block.normal;
18465 if (this.options.gfm) {
18466 if (this.options.tables) {
18467 this.rules = block.tables;
18469 this.rules = block.gfm;
18475 * Expose Block Rules
18478 Lexer.rules = block;
18481 * Static Lex Method
18484 Lexer.lex = function(src, options) {
18485 var lexer = new Lexer(options);
18486 return lexer.lex(src);
18493 Lexer.prototype.lex = function(src) {
18495 .replace(/\r\n|\r/g, '\n')
18496 .replace(/\t/g, ' ')
18497 .replace(/\u00a0/g, ' ')
18498 .replace(/\u2424/g, '\n');
18500 return this.token(src, true);
18507 Lexer.prototype.token = function(src, top, bq) {
18508 var src = src.replace(/^ +$/gm, '')
18521 if (cap = this.rules.newline.exec(src)) {
18522 src = src.substring(cap[0].length);
18523 if (cap[0].length > 1) {
18531 if (cap = this.rules.code.exec(src)) {
18532 src = src.substring(cap[0].length);
18533 cap = cap[0].replace(/^ {4}/gm, '');
18536 text: !this.options.pedantic
18537 ? cap.replace(/\n+$/, '')
18544 if (cap = this.rules.fences.exec(src)) {
18545 src = src.substring(cap[0].length);
18555 if (cap = this.rules.heading.exec(src)) {
18556 src = src.substring(cap[0].length);
18559 depth: cap[1].length,
18565 // table no leading pipe (gfm)
18566 if (top && (cap = this.rules.nptable.exec(src))) {
18567 src = src.substring(cap[0].length);
18571 header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
18572 align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
18573 cells: cap[3].replace(/\n$/, '').split('\n')
18576 for (i = 0; i < item.align.length; i++) {
18577 if (/^ *-+: *$/.test(item.align[i])) {
18578 item.align[i] = 'right';
18579 } else if (/^ *:-+: *$/.test(item.align[i])) {
18580 item.align[i] = 'center';
18581 } else if (/^ *:-+ *$/.test(item.align[i])) {
18582 item.align[i] = 'left';
18584 item.align[i] = null;
18588 for (i = 0; i < item.cells.length; i++) {
18589 item.cells[i] = item.cells[i].split(/ *\| */);
18592 this.tokens.push(item);
18598 if (cap = this.rules.lheading.exec(src)) {
18599 src = src.substring(cap[0].length);
18602 depth: cap[2] === '=' ? 1 : 2,
18609 if (cap = this.rules.hr.exec(src)) {
18610 src = src.substring(cap[0].length);
18618 if (cap = this.rules.blockquote.exec(src)) {
18619 src = src.substring(cap[0].length);
18622 type: 'blockquote_start'
18625 cap = cap[0].replace(/^ *> ?/gm, '');
18627 // Pass `top` to keep the current
18628 // "toplevel" state. This is exactly
18629 // how markdown.pl works.
18630 this.token(cap, top, true);
18633 type: 'blockquote_end'
18640 if (cap = this.rules.list.exec(src)) {
18641 src = src.substring(cap[0].length);
18645 type: 'list_start',
18646 ordered: bull.length > 1
18649 // Get each top-level item.
18650 cap = cap[0].match(this.rules.item);
18656 for (; i < l; i++) {
18659 // Remove the list item's bullet
18660 // so it is seen as the next token.
18661 space = item.length;
18662 item = item.replace(/^ *([*+-]|\d+\.) +/, '');
18664 // Outdent whatever the
18665 // list item contains. Hacky.
18666 if (~item.indexOf('\n ')) {
18667 space -= item.length;
18668 item = !this.options.pedantic
18669 ? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '')
18670 : item.replace(/^ {1,4}/gm, '');
18673 // Determine whether the next list item belongs here.
18674 // Backpedal if it does not belong in this list.
18675 if (this.options.smartLists && i !== l - 1) {
18676 b = block.bullet.exec(cap[i + 1])[0];
18677 if (bull !== b && !(bull.length > 1 && b.length > 1)) {
18678 src = cap.slice(i + 1).join('\n') + src;
18683 // Determine whether item is loose or not.
18684 // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
18685 // for discount behavior.
18686 loose = next || /\n\n(?!\s*$)/.test(item);
18688 next = item.charAt(item.length - 1) === '\n';
18689 if (!loose) { loose = next; }
18694 ? 'loose_item_start'
18695 : 'list_item_start'
18699 this.token(item, false, bq);
18702 type: 'list_item_end'
18714 if (cap = this.rules.html.exec(src)) {
18715 src = src.substring(cap[0].length);
18717 type: this.options.sanitize
18720 pre: !this.options.sanitizer
18721 && (cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style'),
18728 if ((!bq && top) && (cap = this.rules.def.exec(src))) {
18729 src = src.substring(cap[0].length);
18730 this.tokens.links[cap[1].toLowerCase()] = {
18738 if (top && (cap = this.rules.table.exec(src))) {
18739 src = src.substring(cap[0].length);
18743 header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
18744 align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
18745 cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
18748 for (i = 0; i < item.align.length; i++) {
18749 if (/^ *-+: *$/.test(item.align[i])) {
18750 item.align[i] = 'right';
18751 } else if (/^ *:-+: *$/.test(item.align[i])) {
18752 item.align[i] = 'center';
18753 } else if (/^ *:-+ *$/.test(item.align[i])) {
18754 item.align[i] = 'left';
18756 item.align[i] = null;
18760 for (i = 0; i < item.cells.length; i++) {
18761 item.cells[i] = item.cells[i]
18762 .replace(/^ *\| *| *\| *$/g, '')
18766 this.tokens.push(item);
18771 // top-level paragraph
18772 if (top && (cap = this.rules.paragraph.exec(src))) {
18773 src = src.substring(cap[0].length);
18776 text: cap[1].charAt(cap[1].length - 1) === '\n'
18777 ? cap[1].slice(0, -1)
18784 if (cap = this.rules.text.exec(src)) {
18785 // Top-level should never reach here.
18786 src = src.substring(cap[0].length);
18796 Error('Infinite loop on byte: ' + src.charCodeAt(0));
18800 return this.tokens;
18804 * Inline-Level Grammar
18808 escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
18809 autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
18811 tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
18812 link: /^!?\[(inside)\]\(href\)/,
18813 reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
18814 nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
18815 strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
18816 em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
18817 code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
18818 br: /^ {2,}\n(?!\s*$)/,
18820 text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
18823 inline._inside = /(?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*/;
18824 inline._href = /\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
18826 inline.link = replace(inline.link)
18827 ('inside', inline._inside)
18828 ('href', inline._href)
18831 inline.reflink = replace(inline.reflink)
18832 ('inside', inline._inside)
18836 * Normal Inline Grammar
18839 inline.normal = merge({}, inline);
18842 * Pedantic Inline Grammar
18845 inline.pedantic = merge({}, inline.normal, {
18846 strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
18847 em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
18851 * GFM Inline Grammar
18854 inline.gfm = merge({}, inline.normal, {
18855 escape: replace(inline.escape)('])', '~|])')(),
18856 url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
18857 del: /^~~(?=\S)([\s\S]*?\S)~~/,
18858 text: replace(inline.text)
18860 ('|', '|https?://|')
18865 * GFM + Line Breaks Inline Grammar
18868 inline.breaks = merge({}, inline.gfm, {
18869 br: replace(inline.br)('{2,}', '*')(),
18870 text: replace(inline.gfm.text)('{2,}', '*')()
18874 * Inline Lexer & Compiler
18877 var InlineLexer = function (links, options) {
18878 this.options = options || marked.defaults;
18879 this.links = links;
18880 this.rules = inline.normal;
18881 this.renderer = this.options.renderer || new Renderer;
18882 this.renderer.options = this.options;
18886 Error('Tokens array requires a `links` property.');
18889 if (this.options.gfm) {
18890 if (this.options.breaks) {
18891 this.rules = inline.breaks;
18893 this.rules = inline.gfm;
18895 } else if (this.options.pedantic) {
18896 this.rules = inline.pedantic;
18901 * Expose Inline Rules
18904 InlineLexer.rules = inline;
18907 * Static Lexing/Compiling Method
18910 InlineLexer.output = function(src, links, options) {
18911 var inline = new InlineLexer(links, options);
18912 return inline.output(src);
18919 InlineLexer.prototype.output = function(src) {
18928 if (cap = this.rules.escape.exec(src)) {
18929 src = src.substring(cap[0].length);
18935 if (cap = this.rules.autolink.exec(src)) {
18936 src = src.substring(cap[0].length);
18937 if (cap[2] === '@') {
18938 text = cap[1].charAt(6) === ':'
18939 ? this.mangle(cap[1].substring(7))
18940 : this.mangle(cap[1]);
18941 href = this.mangle('mailto:') + text;
18943 text = escape(cap[1]);
18946 out += this.renderer.link(href, null, text);
18951 if (!this.inLink && (cap = this.rules.url.exec(src))) {
18952 src = src.substring(cap[0].length);
18953 text = escape(cap[1]);
18955 out += this.renderer.link(href, null, text);
18960 if (cap = this.rules.tag.exec(src)) {
18961 if (!this.inLink && /^<a /i.test(cap[0])) {
18962 this.inLink = true;
18963 } else if (this.inLink && /^<\/a>/i.test(cap[0])) {
18964 this.inLink = false;
18966 src = src.substring(cap[0].length);
18967 out += this.options.sanitize
18968 ? this.options.sanitizer
18969 ? this.options.sanitizer(cap[0])
18976 if (cap = this.rules.link.exec(src)) {
18977 src = src.substring(cap[0].length);
18978 this.inLink = true;
18979 out += this.outputLink(cap, {
18983 this.inLink = false;
18988 if ((cap = this.rules.reflink.exec(src))
18989 || (cap = this.rules.nolink.exec(src))) {
18990 src = src.substring(cap[0].length);
18991 link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
18992 link = this.links[link.toLowerCase()];
18993 if (!link || !link.href) {
18994 out += cap[0].charAt(0);
18995 src = cap[0].substring(1) + src;
18998 this.inLink = true;
18999 out += this.outputLink(cap, link);
19000 this.inLink = false;
19005 if (cap = this.rules.strong.exec(src)) {
19006 src = src.substring(cap[0].length);
19007 out += this.renderer.strong(this.output(cap[2] || cap[1]));
19012 if (cap = this.rules.em.exec(src)) {
19013 src = src.substring(cap[0].length);
19014 out += this.renderer.em(this.output(cap[2] || cap[1]));
19019 if (cap = this.rules.code.exec(src)) {
19020 src = src.substring(cap[0].length);
19021 out += this.renderer.codespan(escape(cap[2], true));
19026 if (cap = this.rules.br.exec(src)) {
19027 src = src.substring(cap[0].length);
19028 out += this.renderer.br();
19033 if (cap = this.rules.del.exec(src)) {
19034 src = src.substring(cap[0].length);
19035 out += this.renderer.del(this.output(cap[1]));
19040 if (cap = this.rules.text.exec(src)) {
19041 src = src.substring(cap[0].length);
19042 out += this.renderer.text(escape(this.smartypants(cap[0])));
19048 Error('Infinite loop on byte: ' + src.charCodeAt(0));
19059 InlineLexer.prototype.outputLink = function(cap, link) {
19060 var href = escape(link.href)
19061 , title = link.title ? escape(link.title) : null;
19063 return cap[0].charAt(0) !== '!'
19064 ? this.renderer.link(href, title, this.output(cap[1]))
19065 : this.renderer.image(href, title, escape(cap[1]));
19069 * Smartypants Transformations
19072 InlineLexer.prototype.smartypants = function(text) {
19073 if (!this.options.smartypants) { return text; }
19076 .replace(/---/g, '\u2014')
19078 .replace(/--/g, '\u2013')
19080 .replace(/(^|[-\u2014/(\[{"\s])'/g, '$1\u2018')
19081 // closing singles & apostrophes
19082 .replace(/'/g, '\u2019')
19084 .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, '$1\u201c')
19086 .replace(/"/g, '\u201d')
19088 .replace(/\.{3}/g, '\u2026');
19095 InlineLexer.prototype.mangle = function(text) {
19096 if (!this.options.mangle) { return text; }
19102 for (; i < l; i++) {
19103 ch = text.charCodeAt(i);
19104 if (Math.random() > 0.5) {
19105 ch = 'x' + ch.toString(16);
19107 out += '&#' + ch + ';';
19118 * eval:var:Renderer
19121 var Renderer = function (options) {
19122 this.options = options || {};
19125 Renderer.prototype.code = function(code, lang, escaped) {
19126 if (this.options.highlight) {
19127 var out = this.options.highlight(code, lang);
19128 if (out != null && out !== code) {
19133 // hack!!! - it's already escapeD?
19138 return '<pre><code>'
19139 + (escaped ? code : escape(code, true))
19140 + '\n</code></pre>';
19143 return '<pre><code class="'
19144 + this.options.langPrefix
19145 + escape(lang, true)
19147 + (escaped ? code : escape(code, true))
19148 + '\n</code></pre>\n';
19151 Renderer.prototype.blockquote = function(quote) {
19152 return '<blockquote>\n' + quote + '</blockquote>\n';
19155 Renderer.prototype.html = function(html) {
19159 Renderer.prototype.heading = function(text, level, raw) {
19163 + this.options.headerPrefix
19164 + raw.toLowerCase().replace(/[^\w]+/g, '-')
19172 Renderer.prototype.hr = function() {
19173 return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
19176 Renderer.prototype.list = function(body, ordered) {
19177 var type = ordered ? 'ol' : 'ul';
19178 return '<' + type + '>\n' + body + '</' + type + '>\n';
19181 Renderer.prototype.listitem = function(text) {
19182 return '<li>' + text + '</li>\n';
19185 Renderer.prototype.paragraph = function(text) {
19186 return '<p>' + text + '</p>\n';
19189 Renderer.prototype.table = function(header, body) {
19190 return '<table class="table table-striped">\n'
19200 Renderer.prototype.tablerow = function(content) {
19201 return '<tr>\n' + content + '</tr>\n';
19204 Renderer.prototype.tablecell = function(content, flags) {
19205 var type = flags.header ? 'th' : 'td';
19206 var tag = flags.align
19207 ? '<' + type + ' style="text-align:' + flags.align + '">'
19208 : '<' + type + '>';
19209 return tag + content + '</' + type + '>\n';
19212 // span level renderer
19213 Renderer.prototype.strong = function(text) {
19214 return '<strong>' + text + '</strong>';
19217 Renderer.prototype.em = function(text) {
19218 return '<em>' + text + '</em>';
19221 Renderer.prototype.codespan = function(text) {
19222 return '<code>' + text + '</code>';
19225 Renderer.prototype.br = function() {
19226 return this.options.xhtml ? '<br/>' : '<br>';
19229 Renderer.prototype.del = function(text) {
19230 return '<del>' + text + '</del>';
19233 Renderer.prototype.link = function(href, title, text) {
19234 if (this.options.sanitize) {
19236 var prot = decodeURIComponent(unescape(href))
19237 .replace(/[^\w:]/g, '')
19242 if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0) {
19246 var out = '<a href="' + href + '"';
19248 out += ' title="' + title + '"';
19250 out += '>' + text + '</a>';
19254 Renderer.prototype.image = function(href, title, text) {
19255 var out = '<img src="' + href + '" alt="' + text + '"';
19257 out += ' title="' + title + '"';
19259 out += this.options.xhtml ? '/>' : '>';
19263 Renderer.prototype.text = function(text) {
19268 * Parsing & Compiling
19274 var Parser= function (options) {
19277 this.options = options || marked.defaults;
19278 this.options.renderer = this.options.renderer || new Renderer;
19279 this.renderer = this.options.renderer;
19280 this.renderer.options = this.options;
19284 * Static Parse Method
19287 Parser.parse = function(src, options, renderer) {
19288 var parser = new Parser(options, renderer);
19289 return parser.parse(src);
19296 Parser.prototype.parse = function(src) {
19297 this.inline = new InlineLexer(src.links, this.options, this.renderer);
19298 this.tokens = src.reverse();
19301 while (this.next()) {
19312 Parser.prototype.next = function() {
19313 return this.token = this.tokens.pop();
19317 * Preview Next Token
19320 Parser.prototype.peek = function() {
19321 return this.tokens[this.tokens.length - 1] || 0;
19325 * Parse Text Tokens
19328 Parser.prototype.parseText = function() {
19329 var body = this.token.text;
19331 while (this.peek().type === 'text') {
19332 body += '\n' + this.next().text;
19335 return this.inline.output(body);
19339 * Parse Current Token
19342 Parser.prototype.tok = function() {
19343 switch (this.token.type) {
19348 return this.renderer.hr();
19351 return this.renderer.heading(
19352 this.inline.output(this.token.text),
19357 return this.renderer.code(this.token.text,
19359 this.token.escaped);
19372 for (i = 0; i < this.token.header.length; i++) {
19373 flags = { header: true, align: this.token.align[i] };
19374 cell += this.renderer.tablecell(
19375 this.inline.output(this.token.header[i]),
19376 { header: true, align: this.token.align[i] }
19379 header += this.renderer.tablerow(cell);
19381 for (i = 0; i < this.token.cells.length; i++) {
19382 row = this.token.cells[i];
19385 for (j = 0; j < row.length; j++) {
19386 cell += this.renderer.tablecell(
19387 this.inline.output(row[j]),
19388 { header: false, align: this.token.align[j] }
19392 body += this.renderer.tablerow(cell);
19394 return this.renderer.table(header, body);
19396 case 'blockquote_start': {
19399 while (this.next().type !== 'blockquote_end') {
19400 body += this.tok();
19403 return this.renderer.blockquote(body);
19405 case 'list_start': {
19407 , ordered = this.token.ordered;
19409 while (this.next().type !== 'list_end') {
19410 body += this.tok();
19413 return this.renderer.list(body, ordered);
19415 case 'list_item_start': {
19418 while (this.next().type !== 'list_item_end') {
19419 body += this.token.type === 'text'
19424 return this.renderer.listitem(body);
19426 case 'loose_item_start': {
19429 while (this.next().type !== 'list_item_end') {
19430 body += this.tok();
19433 return this.renderer.listitem(body);
19436 var html = !this.token.pre && !this.options.pedantic
19437 ? this.inline.output(this.token.text)
19439 return this.renderer.html(html);
19441 case 'paragraph': {
19442 return this.renderer.paragraph(this.inline.output(this.token.text));
19445 return this.renderer.paragraph(this.parseText());
19457 var marked = function (src, opt, callback) {
19458 if (callback || typeof opt === 'function') {
19464 opt = merge({}, marked.defaults, opt || {});
19466 var highlight = opt.highlight
19472 tokens = Lexer.lex(src, opt)
19474 return callback(e);
19477 pending = tokens.length;
19481 var done = function(err) {
19483 opt.highlight = highlight;
19484 return callback(err);
19490 out = Parser.parse(tokens, opt);
19495 opt.highlight = highlight;
19499 : callback(null, out);
19502 if (!highlight || highlight.length < 3) {
19506 delete opt.highlight;
19508 if (!pending) { return done(); }
19510 for (; i < tokens.length; i++) {
19512 if (token.type !== 'code') {
19513 return --pending || done();
19515 return highlight(token.text, token.lang, function(err, code) {
19516 if (err) { return done(err); }
19517 if (code == null || code === token.text) {
19518 return --pending || done();
19521 token.escaped = true;
19522 --pending || done();
19530 if (opt) { opt = merge({}, marked.defaults, opt); }
19531 return Parser.parse(Lexer.lex(src, opt), opt);
19533 e.message += '\nPlease report this to https://github.com/chjj/marked.';
19534 if ((opt || marked.defaults).silent) {
19535 return '<p>An error occured:</p><pre>'
19536 + escape(e.message + '', true)
19548 marked.setOptions = function(opt) {
19549 merge(marked.defaults, opt);
19553 marked.defaults = {
19564 langPrefix: 'lang-',
19565 smartypants: false,
19567 renderer: new Renderer,
19575 marked.Parser = Parser;
19576 marked.parser = Parser.parse;
19578 marked.Renderer = Renderer;
19580 marked.Lexer = Lexer;
19581 marked.lexer = Lexer.lex;
19583 marked.InlineLexer = InlineLexer;
19584 marked.inlineLexer = InlineLexer.output;
19586 marked.parse = marked;
19588 Roo.Markdown.marked = marked;
19592 * Ext JS Library 1.1.1
19593 * Copyright(c) 2006-2007, Ext JS, LLC.
19595 * Originally Released Under LGPL - original licence link has changed is not relivant.
19598 * <script type="text/javascript">
19604 * These classes are derivatives of the similarly named classes in the YUI Library.
19605 * The original license:
19606 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
19607 * Code licensed under the BSD License:
19608 * http://developer.yahoo.net/yui/license.txt
19613 var Event=Roo.EventManager;
19614 var Dom=Roo.lib.Dom;
19617 * @class Roo.dd.DragDrop
19618 * @extends Roo.util.Observable
19619 * Defines the interface and base operation of items that that can be
19620 * dragged or can be drop targets. It was designed to be extended, overriding
19621 * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
19622 * Up to three html elements can be associated with a DragDrop instance:
19624 * <li>linked element: the element that is passed into the constructor.
19625 * This is the element which defines the boundaries for interaction with
19626 * other DragDrop objects.</li>
19627 * <li>handle element(s): The drag operation only occurs if the element that
19628 * was clicked matches a handle element. By default this is the linked
19629 * element, but there are times that you will want only a portion of the
19630 * linked element to initiate the drag operation, and the setHandleElId()
19631 * method provides a way to define this.</li>
19632 * <li>drag element: this represents the element that would be moved along
19633 * with the cursor during a drag operation. By default, this is the linked
19634 * element itself as in {@link Roo.dd.DD}. setDragElId() lets you define
19635 * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
19638 * This class should not be instantiated until the onload event to ensure that
19639 * the associated elements are available.
19640 * The following would define a DragDrop obj that would interact with any
19641 * other DragDrop obj in the "group1" group:
19643 * dd = new Roo.dd.DragDrop("div1", "group1");
19645 * Since none of the event handlers have been implemented, nothing would
19646 * actually happen if you were to run the code above. Normally you would
19647 * override this class or one of the default implementations, but you can
19648 * also override the methods you want on an instance of the class...
19650 * dd.onDragDrop = function(e, id) {
19651 * alert("dd was dropped on " + id);
19655 * @param {String} id of the element that is linked to this instance
19656 * @param {String} sGroup the group of related DragDrop objects
19657 * @param {object} config an object containing configurable attributes
19658 * Valid properties for DragDrop:
19659 * padding, isTarget, maintainOffset, primaryButtonOnly
19661 Roo.dd.DragDrop = function(id, sGroup, config) {
19663 this.init(id, sGroup, config);
19668 Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
19671 * The id of the element associated with this object. This is what we
19672 * refer to as the "linked element" because the size and position of
19673 * this element is used to determine when the drag and drop objects have
19681 * Configuration attributes passed into the constructor
19688 * The id of the element that will be dragged. By default this is same
19689 * as the linked element , but could be changed to another element. Ex:
19691 * @property dragElId
19698 * the id of the element that initiates the drag operation. By default
19699 * this is the linked element, but could be changed to be a child of this
19700 * element. This lets us do things like only starting the drag when the
19701 * header element within the linked html element is clicked.
19702 * @property handleElId
19709 * An associative array of HTML tags that will be ignored if clicked.
19710 * @property invalidHandleTypes
19711 * @type {string: string}
19713 invalidHandleTypes: null,
19716 * An associative array of ids for elements that will be ignored if clicked
19717 * @property invalidHandleIds
19718 * @type {string: string}
19720 invalidHandleIds: null,
19723 * An indexted array of css class names for elements that will be ignored
19725 * @property invalidHandleClasses
19728 invalidHandleClasses: null,
19731 * The linked element's absolute X position at the time the drag was
19733 * @property startPageX
19740 * The linked element's absolute X position at the time the drag was
19742 * @property startPageY
19749 * The group defines a logical collection of DragDrop objects that are
19750 * related. Instances only get events when interacting with other
19751 * DragDrop object in the same group. This lets us define multiple
19752 * groups using a single DragDrop subclass if we want.
19754 * @type {string: string}
19759 * Individual drag/drop instances can be locked. This will prevent
19760 * onmousedown start drag.
19768 * Lock this instance
19771 lock: function() { this.locked = true; },
19774 * Unlock this instace
19777 unlock: function() { this.locked = false; },
19780 * By default, all insances can be a drop target. This can be disabled by
19781 * setting isTarget to false.
19788 * The padding configured for this drag and drop object for calculating
19789 * the drop zone intersection with this object.
19796 * Cached reference to the linked element
19797 * @property _domRef
19803 * Internal typeof flag
19804 * @property __ygDragDrop
19807 __ygDragDrop: true,
19810 * Set to true when horizontal contraints are applied
19811 * @property constrainX
19818 * Set to true when vertical contraints are applied
19819 * @property constrainY
19826 * The left constraint
19834 * The right constraint
19842 * The up constraint
19851 * The down constraint
19859 * Maintain offsets when we resetconstraints. Set to true when you want
19860 * the position of the element relative to its parent to stay the same
19861 * when the page changes
19863 * @property maintainOffset
19866 maintainOffset: false,
19869 * Array of pixel locations the element will snap to if we specified a
19870 * horizontal graduation/interval. This array is generated automatically
19871 * when you define a tick interval.
19878 * Array of pixel locations the element will snap to if we specified a
19879 * vertical graduation/interval. This array is generated automatically
19880 * when you define a tick interval.
19887 * By default the drag and drop instance will only respond to the primary
19888 * button click (left button for a right-handed mouse). Set to true to
19889 * allow drag and drop to start with any mouse click that is propogated
19891 * @property primaryButtonOnly
19894 primaryButtonOnly: true,
19897 * The availabe property is false until the linked dom element is accessible.
19898 * @property available
19904 * By default, drags can only be initiated if the mousedown occurs in the
19905 * region the linked element is. This is done in part to work around a
19906 * bug in some browsers that mis-report the mousedown if the previous
19907 * mouseup happened outside of the window. This property is set to true
19908 * if outer handles are defined.
19910 * @property hasOuterHandles
19914 hasOuterHandles: false,
19917 * Code that executes immediately before the startDrag event
19918 * @method b4StartDrag
19921 b4StartDrag: function(x, y) { },
19924 * Abstract method called after a drag/drop object is clicked
19925 * and the drag or mousedown time thresholds have beeen met.
19926 * @method startDrag
19927 * @param {int} X click location
19928 * @param {int} Y click location
19930 startDrag: function(x, y) { /* override this */ },
19933 * Code that executes immediately before the onDrag event
19937 b4Drag: function(e) { },
19940 * Abstract method called during the onMouseMove event while dragging an
19943 * @param {Event} e the mousemove event
19945 onDrag: function(e) { /* override this */ },
19948 * Abstract method called when this element fist begins hovering over
19949 * another DragDrop obj
19950 * @method onDragEnter
19951 * @param {Event} e the mousemove event
19952 * @param {String|DragDrop[]} id In POINT mode, the element
19953 * id this is hovering over. In INTERSECT mode, an array of one or more
19954 * dragdrop items being hovered over.
19956 onDragEnter: function(e, id) { /* override this */ },
19959 * Code that executes immediately before the onDragOver event
19960 * @method b4DragOver
19963 b4DragOver: function(e) { },
19966 * Abstract method called when this element is hovering over another
19968 * @method onDragOver
19969 * @param {Event} e the mousemove event
19970 * @param {String|DragDrop[]} id In POINT mode, the element
19971 * id this is hovering over. In INTERSECT mode, an array of dd items
19972 * being hovered over.
19974 onDragOver: function(e, id) { /* override this */ },
19977 * Code that executes immediately before the onDragOut event
19978 * @method b4DragOut
19981 b4DragOut: function(e) { },
19984 * Abstract method called when we are no longer hovering over an element
19985 * @method onDragOut
19986 * @param {Event} e the mousemove event
19987 * @param {String|DragDrop[]} id In POINT mode, the element
19988 * id this was hovering over. In INTERSECT mode, an array of dd items
19989 * that the mouse is no longer over.
19991 onDragOut: function(e, id) { /* override this */ },
19994 * Code that executes immediately before the onDragDrop event
19995 * @method b4DragDrop
19998 b4DragDrop: function(e) { },
20001 * Abstract method called when this item is dropped on another DragDrop
20003 * @method onDragDrop
20004 * @param {Event} e the mouseup event
20005 * @param {String|DragDrop[]} id In POINT mode, the element
20006 * id this was dropped on. In INTERSECT mode, an array of dd items this
20009 onDragDrop: function(e, id) { /* override this */ },
20012 * Abstract method called when this item is dropped on an area with no
20014 * @method onInvalidDrop
20015 * @param {Event} e the mouseup event
20017 onInvalidDrop: function(e) { /* override this */ },
20020 * Code that executes immediately before the endDrag event
20021 * @method b4EndDrag
20024 b4EndDrag: function(e) { },
20027 * Fired when we are done dragging the object
20029 * @param {Event} e the mouseup event
20031 endDrag: function(e) { /* override this */ },
20034 * Code executed immediately before the onMouseDown event
20035 * @method b4MouseDown
20036 * @param {Event} e the mousedown event
20039 b4MouseDown: function(e) { },
20042 * Event handler that fires when a drag/drop obj gets a mousedown
20043 * @method onMouseDown
20044 * @param {Event} e the mousedown event
20046 onMouseDown: function(e) { /* override this */ },
20049 * Event handler that fires when a drag/drop obj gets a mouseup
20050 * @method onMouseUp
20051 * @param {Event} e the mouseup event
20053 onMouseUp: function(e) { /* override this */ },
20056 * Override the onAvailable method to do what is needed after the initial
20057 * position was determined.
20058 * @method onAvailable
20060 onAvailable: function () {
20064 * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
20067 defaultPadding : {left:0, right:0, top:0, bottom:0},
20070 * Initializes the drag drop object's constraints to restrict movement to a certain element.
20074 var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
20075 { dragElId: "existingProxyDiv" });
20076 dd.startDrag = function(){
20077 this.constrainTo("parent-id");
20080 * Or you can initalize it using the {@link Roo.Element} object:
20082 Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
20083 startDrag : function(){
20084 this.constrainTo("parent-id");
20088 * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
20089 * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
20090 * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
20091 * an object containing the sides to pad. For example: {right:10, bottom:10}
20092 * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
20094 constrainTo : function(constrainTo, pad, inContent){
20095 if(typeof pad == "number"){
20096 pad = {left: pad, right:pad, top:pad, bottom:pad};
20098 pad = pad || this.defaultPadding;
20099 var b = Roo.get(this.getEl()).getBox();
20100 var ce = Roo.get(constrainTo);
20101 var s = ce.getScroll();
20102 var c, cd = ce.dom;
20103 if(cd == document.body){
20104 c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
20107 c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
20111 var topSpace = b.y - c.y;
20112 var leftSpace = b.x - c.x;
20114 this.resetConstraints();
20115 this.setXConstraint(leftSpace - (pad.left||0), // left
20116 c.width - leftSpace - b.width - (pad.right||0) //right
20118 this.setYConstraint(topSpace - (pad.top||0), //top
20119 c.height - topSpace - b.height - (pad.bottom||0) //bottom
20124 * Returns a reference to the linked element
20126 * @return {HTMLElement} the html element
20128 getEl: function() {
20129 if (!this._domRef) {
20130 this._domRef = Roo.getDom(this.id);
20133 return this._domRef;
20137 * Returns a reference to the actual element to drag. By default this is
20138 * the same as the html element, but it can be assigned to another
20139 * element. An example of this can be found in Roo.dd.DDProxy
20140 * @method getDragEl
20141 * @return {HTMLElement} the html element
20143 getDragEl: function() {
20144 return Roo.getDom(this.dragElId);
20148 * Sets up the DragDrop object. Must be called in the constructor of any
20149 * Roo.dd.DragDrop subclass
20151 * @param id the id of the linked element
20152 * @param {String} sGroup the group of related items
20153 * @param {object} config configuration attributes
20155 init: function(id, sGroup, config) {
20156 this.initTarget(id, sGroup, config);
20157 if (!Roo.isTouch) {
20158 Event.on(this.id, "mousedown", this.handleMouseDown, this);
20160 Event.on(this.id, "touchstart", this.handleMouseDown, this);
20161 // Event.on(this.id, "selectstart", Event.preventDefault);
20165 * Initializes Targeting functionality only... the object does not
20166 * get a mousedown handler.
20167 * @method initTarget
20168 * @param id the id of the linked element
20169 * @param {String} sGroup the group of related items
20170 * @param {object} config configuration attributes
20172 initTarget: function(id, sGroup, config) {
20174 // configuration attributes
20175 this.config = config || {};
20177 // create a local reference to the drag and drop manager
20178 this.DDM = Roo.dd.DDM;
20179 // initialize the groups array
20182 // assume that we have an element reference instead of an id if the
20183 // parameter is not a string
20184 if (typeof id !== "string") {
20191 // add to an interaction group
20192 this.addToGroup((sGroup) ? sGroup : "default");
20194 // We don't want to register this as the handle with the manager
20195 // so we just set the id rather than calling the setter.
20196 this.handleElId = id;
20198 // the linked element is the element that gets dragged by default
20199 this.setDragElId(id);
20201 // by default, clicked anchors will not start drag operations.
20202 this.invalidHandleTypes = { A: "A" };
20203 this.invalidHandleIds = {};
20204 this.invalidHandleClasses = [];
20206 this.applyConfig();
20208 this.handleOnAvailable();
20212 * Applies the configuration parameters that were passed into the constructor.
20213 * This is supposed to happen at each level through the inheritance chain. So
20214 * a DDProxy implentation will execute apply config on DDProxy, DD, and
20215 * DragDrop in order to get all of the parameters that are available in
20217 * @method applyConfig
20219 applyConfig: function() {
20221 // configurable properties:
20222 // padding, isTarget, maintainOffset, primaryButtonOnly
20223 this.padding = this.config.padding || [0, 0, 0, 0];
20224 this.isTarget = (this.config.isTarget !== false);
20225 this.maintainOffset = (this.config.maintainOffset);
20226 this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
20231 * Executed when the linked element is available
20232 * @method handleOnAvailable
20235 handleOnAvailable: function() {
20236 this.available = true;
20237 this.resetConstraints();
20238 this.onAvailable();
20242 * Configures the padding for the target zone in px. Effectively expands
20243 * (or reduces) the virtual object size for targeting calculations.
20244 * Supports css-style shorthand; if only one parameter is passed, all sides
20245 * will have that padding, and if only two are passed, the top and bottom
20246 * will have the first param, the left and right the second.
20247 * @method setPadding
20248 * @param {int} iTop Top pad
20249 * @param {int} iRight Right pad
20250 * @param {int} iBot Bot pad
20251 * @param {int} iLeft Left pad
20253 setPadding: function(iTop, iRight, iBot, iLeft) {
20254 // this.padding = [iLeft, iRight, iTop, iBot];
20255 if (!iRight && 0 !== iRight) {
20256 this.padding = [iTop, iTop, iTop, iTop];
20257 } else if (!iBot && 0 !== iBot) {
20258 this.padding = [iTop, iRight, iTop, iRight];
20260 this.padding = [iTop, iRight, iBot, iLeft];
20265 * Stores the initial placement of the linked element.
20266 * @method setInitialPosition
20267 * @param {int} diffX the X offset, default 0
20268 * @param {int} diffY the Y offset, default 0
20270 setInitPosition: function(diffX, diffY) {
20271 var el = this.getEl();
20273 if (!this.DDM.verifyEl(el)) {
20277 var dx = diffX || 0;
20278 var dy = diffY || 0;
20280 var p = Dom.getXY( el );
20282 this.initPageX = p[0] - dx;
20283 this.initPageY = p[1] - dy;
20285 this.lastPageX = p[0];
20286 this.lastPageY = p[1];
20289 this.setStartPosition(p);
20293 * Sets the start position of the element. This is set when the obj
20294 * is initialized, the reset when a drag is started.
20295 * @method setStartPosition
20296 * @param pos current position (from previous lookup)
20299 setStartPosition: function(pos) {
20300 var p = pos || Dom.getXY( this.getEl() );
20301 this.deltaSetXY = null;
20303 this.startPageX = p[0];
20304 this.startPageY = p[1];
20308 * Add this instance to a group of related drag/drop objects. All
20309 * instances belong to at least one group, and can belong to as many
20310 * groups as needed.
20311 * @method addToGroup
20312 * @param sGroup {string} the name of the group
20314 addToGroup: function(sGroup) {
20315 this.groups[sGroup] = true;
20316 this.DDM.regDragDrop(this, sGroup);
20320 * Remove's this instance from the supplied interaction group
20321 * @method removeFromGroup
20322 * @param {string} sGroup The group to drop
20324 removeFromGroup: function(sGroup) {
20325 if (this.groups[sGroup]) {
20326 delete this.groups[sGroup];
20329 this.DDM.removeDDFromGroup(this, sGroup);
20333 * Allows you to specify that an element other than the linked element
20334 * will be moved with the cursor during a drag
20335 * @method setDragElId
20336 * @param id {string} the id of the element that will be used to initiate the drag
20338 setDragElId: function(id) {
20339 this.dragElId = id;
20343 * Allows you to specify a child of the linked element that should be
20344 * used to initiate the drag operation. An example of this would be if
20345 * you have a content div with text and links. Clicking anywhere in the
20346 * content area would normally start the drag operation. Use this method
20347 * to specify that an element inside of the content div is the element
20348 * that starts the drag operation.
20349 * @method setHandleElId
20350 * @param id {string} the id of the element that will be used to
20351 * initiate the drag.
20353 setHandleElId: function(id) {
20354 if (typeof id !== "string") {
20357 this.handleElId = id;
20358 this.DDM.regHandle(this.id, id);
20362 * Allows you to set an element outside of the linked element as a drag
20364 * @method setOuterHandleElId
20365 * @param id the id of the element that will be used to initiate the drag
20367 setOuterHandleElId: function(id) {
20368 if (typeof id !== "string") {
20371 Event.on(id, "mousedown",
20372 this.handleMouseDown, this);
20373 this.setHandleElId(id);
20375 this.hasOuterHandles = true;
20379 * Remove all drag and drop hooks for this element
20382 unreg: function() {
20383 Event.un(this.id, "mousedown",
20384 this.handleMouseDown);
20385 Event.un(this.id, "touchstart",
20386 this.handleMouseDown);
20387 this._domRef = null;
20388 this.DDM._remove(this);
20391 destroy : function(){
20396 * Returns true if this instance is locked, or the drag drop mgr is locked
20397 * (meaning that all drag/drop is disabled on the page.)
20399 * @return {boolean} true if this obj or all drag/drop is locked, else
20402 isLocked: function() {
20403 return (this.DDM.isLocked() || this.locked);
20407 * Fired when this object is clicked
20408 * @method handleMouseDown
20410 * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
20413 handleMouseDown: function(e, oDD){
20415 if (!Roo.isTouch && this.primaryButtonOnly && e.button != 0) {
20416 //Roo.log('not touch/ button !=0');
20419 if (e.browserEvent.touches && e.browserEvent.touches.length != 1) {
20420 return; // double touch..
20424 if (this.isLocked()) {
20425 //Roo.log('locked');
20429 this.DDM.refreshCache(this.groups);
20430 // Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
20431 var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
20432 if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) {
20433 //Roo.log('no outer handes or not over target');
20436 // Roo.log('check validator');
20437 if (this.clickValidator(e)) {
20438 // Roo.log('validate success');
20439 // set the initial element position
20440 this.setStartPosition();
20443 this.b4MouseDown(e);
20444 this.onMouseDown(e);
20446 this.DDM.handleMouseDown(e, this);
20448 this.DDM.stopEvent(e);
20456 clickValidator: function(e) {
20457 var target = e.getTarget();
20458 return ( this.isValidHandleChild(target) &&
20459 (this.id == this.handleElId ||
20460 this.DDM.handleWasClicked(target, this.id)) );
20464 * Allows you to specify a tag name that should not start a drag operation
20465 * when clicked. This is designed to facilitate embedding links within a
20466 * drag handle that do something other than start the drag.
20467 * @method addInvalidHandleType
20468 * @param {string} tagName the type of element to exclude
20470 addInvalidHandleType: function(tagName) {
20471 var type = tagName.toUpperCase();
20472 this.invalidHandleTypes[type] = type;
20476 * Lets you to specify an element id for a child of a drag handle
20477 * that should not initiate a drag
20478 * @method addInvalidHandleId
20479 * @param {string} id the element id of the element you wish to ignore
20481 addInvalidHandleId: function(id) {
20482 if (typeof id !== "string") {
20485 this.invalidHandleIds[id] = id;
20489 * Lets you specify a css class of elements that will not initiate a drag
20490 * @method addInvalidHandleClass
20491 * @param {string} cssClass the class of the elements you wish to ignore
20493 addInvalidHandleClass: function(cssClass) {
20494 this.invalidHandleClasses.push(cssClass);
20498 * Unsets an excluded tag name set by addInvalidHandleType
20499 * @method removeInvalidHandleType
20500 * @param {string} tagName the type of element to unexclude
20502 removeInvalidHandleType: function(tagName) {
20503 var type = tagName.toUpperCase();
20504 // this.invalidHandleTypes[type] = null;
20505 delete this.invalidHandleTypes[type];
20509 * Unsets an invalid handle id
20510 * @method removeInvalidHandleId
20511 * @param {string} id the id of the element to re-enable
20513 removeInvalidHandleId: function(id) {
20514 if (typeof id !== "string") {
20517 delete this.invalidHandleIds[id];
20521 * Unsets an invalid css class
20522 * @method removeInvalidHandleClass
20523 * @param {string} cssClass the class of the element(s) you wish to
20526 removeInvalidHandleClass: function(cssClass) {
20527 for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
20528 if (this.invalidHandleClasses[i] == cssClass) {
20529 delete this.invalidHandleClasses[i];
20535 * Checks the tag exclusion list to see if this click should be ignored
20536 * @method isValidHandleChild
20537 * @param {HTMLElement} node the HTMLElement to evaluate
20538 * @return {boolean} true if this is a valid tag type, false if not
20540 isValidHandleChild: function(node) {
20543 // var n = (node.nodeName == "#text") ? node.parentNode : node;
20546 nodeName = node.nodeName.toUpperCase();
20548 nodeName = node.nodeName;
20550 valid = valid && !this.invalidHandleTypes[nodeName];
20551 valid = valid && !this.invalidHandleIds[node.id];
20553 for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
20554 valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
20563 * Create the array of horizontal tick marks if an interval was specified
20564 * in setXConstraint().
20565 * @method setXTicks
20568 setXTicks: function(iStartX, iTickSize) {
20570 this.xTickSize = iTickSize;
20574 for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
20576 this.xTicks[this.xTicks.length] = i;
20581 for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
20583 this.xTicks[this.xTicks.length] = i;
20588 this.xTicks.sort(this.DDM.numericSort) ;
20592 * Create the array of vertical tick marks if an interval was specified in
20593 * setYConstraint().
20594 * @method setYTicks
20597 setYTicks: function(iStartY, iTickSize) {
20599 this.yTickSize = iTickSize;
20603 for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
20605 this.yTicks[this.yTicks.length] = i;
20610 for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
20612 this.yTicks[this.yTicks.length] = i;
20617 this.yTicks.sort(this.DDM.numericSort) ;
20621 * By default, the element can be dragged any place on the screen. Use
20622 * this method to limit the horizontal travel of the element. Pass in
20623 * 0,0 for the parameters if you want to lock the drag to the y axis.
20624 * @method setXConstraint
20625 * @param {int} iLeft the number of pixels the element can move to the left
20626 * @param {int} iRight the number of pixels the element can move to the
20628 * @param {int} iTickSize optional parameter for specifying that the
20630 * should move iTickSize pixels at a time.
20632 setXConstraint: function(iLeft, iRight, iTickSize) {
20633 this.leftConstraint = iLeft;
20634 this.rightConstraint = iRight;
20636 this.minX = this.initPageX - iLeft;
20637 this.maxX = this.initPageX + iRight;
20638 if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
20640 this.constrainX = true;
20644 * Clears any constraints applied to this instance. Also clears ticks
20645 * since they can't exist independent of a constraint at this time.
20646 * @method clearConstraints
20648 clearConstraints: function() {
20649 this.constrainX = false;
20650 this.constrainY = false;
20655 * Clears any tick interval defined for this instance
20656 * @method clearTicks
20658 clearTicks: function() {
20659 this.xTicks = null;
20660 this.yTicks = null;
20661 this.xTickSize = 0;
20662 this.yTickSize = 0;
20666 * By default, the element can be dragged any place on the screen. Set
20667 * this to limit the vertical travel of the element. Pass in 0,0 for the
20668 * parameters if you want to lock the drag to the x axis.
20669 * @method setYConstraint
20670 * @param {int} iUp the number of pixels the element can move up
20671 * @param {int} iDown the number of pixels the element can move down
20672 * @param {int} iTickSize optional parameter for specifying that the
20673 * element should move iTickSize pixels at a time.
20675 setYConstraint: function(iUp, iDown, iTickSize) {
20676 this.topConstraint = iUp;
20677 this.bottomConstraint = iDown;
20679 this.minY = this.initPageY - iUp;
20680 this.maxY = this.initPageY + iDown;
20681 if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
20683 this.constrainY = true;
20688 * resetConstraints must be called if you manually reposition a dd element.
20689 * @method resetConstraints
20690 * @param {boolean} maintainOffset
20692 resetConstraints: function() {
20695 // Maintain offsets if necessary
20696 if (this.initPageX || this.initPageX === 0) {
20697 // figure out how much this thing has moved
20698 var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
20699 var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
20701 this.setInitPosition(dx, dy);
20703 // This is the first time we have detected the element's position
20705 this.setInitPosition();
20708 if (this.constrainX) {
20709 this.setXConstraint( this.leftConstraint,
20710 this.rightConstraint,
20714 if (this.constrainY) {
20715 this.setYConstraint( this.topConstraint,
20716 this.bottomConstraint,
20722 * Normally the drag element is moved pixel by pixel, but we can specify
20723 * that it move a number of pixels at a time. This method resolves the
20724 * location when we have it set up like this.
20726 * @param {int} val where we want to place the object
20727 * @param {int[]} tickArray sorted array of valid points
20728 * @return {int} the closest tick
20731 getTick: function(val, tickArray) {
20734 // If tick interval is not defined, it is effectively 1 pixel,
20735 // so we return the value passed to us.
20737 } else if (tickArray[0] >= val) {
20738 // The value is lower than the first tick, so we return the first
20740 return tickArray[0];
20742 for (var i=0, len=tickArray.length; i<len; ++i) {
20744 if (tickArray[next] && tickArray[next] >= val) {
20745 var diff1 = val - tickArray[i];
20746 var diff2 = tickArray[next] - val;
20747 return (diff2 > diff1) ? tickArray[i] : tickArray[next];
20751 // The value is larger than the last tick, so we return the last
20753 return tickArray[tickArray.length - 1];
20760 * @return {string} string representation of the dd obj
20762 toString: function() {
20763 return ("DragDrop " + this.id);
20771 * Ext JS Library 1.1.1
20772 * Copyright(c) 2006-2007, Ext JS, LLC.
20774 * Originally Released Under LGPL - original licence link has changed is not relivant.
20777 * <script type="text/javascript">
20782 * The drag and drop utility provides a framework for building drag and drop
20783 * applications. In addition to enabling drag and drop for specific elements,
20784 * the drag and drop elements are tracked by the manager class, and the
20785 * interactions between the various elements are tracked during the drag and
20786 * the implementing code is notified about these important moments.
20789 // Only load the library once. Rewriting the manager class would orphan
20790 // existing drag and drop instances.
20791 if (!Roo.dd.DragDropMgr) {
20794 * @class Roo.dd.DragDropMgr
20795 * DragDropMgr is a singleton that tracks the element interaction for
20796 * all DragDrop items in the window. Generally, you will not call
20797 * this class directly, but it does have helper methods that could
20798 * be useful in your DragDrop implementations.
20801 Roo.dd.DragDropMgr = function() {
20803 var Event = Roo.EventManager;
20808 * Two dimensional Array of registered DragDrop objects. The first
20809 * dimension is the DragDrop item group, the second the DragDrop
20812 * @type {string: string}
20819 * Array of element ids defined as drag handles. Used to determine
20820 * if the element that generated the mousedown event is actually the
20821 * handle and not the html element itself.
20822 * @property handleIds
20823 * @type {string: string}
20830 * the DragDrop object that is currently being dragged
20831 * @property dragCurrent
20839 * the DragDrop object(s) that are being hovered over
20840 * @property dragOvers
20848 * the X distance between the cursor and the object being dragged
20857 * the Y distance between the cursor and the object being dragged
20866 * Flag to determine if we should prevent the default behavior of the
20867 * events we define. By default this is true, but this can be set to
20868 * false if you need the default behavior (not recommended)
20869 * @property preventDefault
20873 preventDefault: true,
20876 * Flag to determine if we should stop the propagation of the events
20877 * we generate. This is true by default but you may want to set it to
20878 * false if the html element contains other features that require the
20880 * @property stopPropagation
20884 stopPropagation: true,
20887 * Internal flag that is set to true when drag and drop has been
20889 * @property initialized
20896 * All drag and drop can be disabled.
20904 * Called the first time an element is registered.
20910 this.initialized = true;
20914 * In point mode, drag and drop interaction is defined by the
20915 * location of the cursor during the drag/drop
20923 * In intersect mode, drag and drop interactio nis defined by the
20924 * overlap of two or more drag and drop objects.
20925 * @property INTERSECT
20932 * The current drag and drop mode. Default: POINT
20940 * Runs method on all drag and drop objects
20941 * @method _execOnAll
20945 _execOnAll: function(sMethod, args) {
20946 for (var i in this.ids) {
20947 for (var j in this.ids[i]) {
20948 var oDD = this.ids[i][j];
20949 if (! this.isTypeOfDD(oDD)) {
20952 oDD[sMethod].apply(oDD, args);
20958 * Drag and drop initialization. Sets up the global event handlers
20963 _onLoad: function() {
20967 if (!Roo.isTouch) {
20968 Event.on(document, "mouseup", this.handleMouseUp, this, true);
20969 Event.on(document, "mousemove", this.handleMouseMove, this, true);
20971 Event.on(document, "touchend", this.handleMouseUp, this, true);
20972 Event.on(document, "touchmove", this.handleMouseMove, this, true);
20974 Event.on(window, "unload", this._onUnload, this, true);
20975 Event.on(window, "resize", this._onResize, this, true);
20976 // Event.on(window, "mouseout", this._test);
20981 * Reset constraints on all drag and drop objs
20982 * @method _onResize
20986 _onResize: function(e) {
20987 this._execOnAll("resetConstraints", []);
20991 * Lock all drag and drop functionality
20995 lock: function() { this.locked = true; },
20998 * Unlock all drag and drop functionality
21002 unlock: function() { this.locked = false; },
21005 * Is drag and drop locked?
21007 * @return {boolean} True if drag and drop is locked, false otherwise.
21010 isLocked: function() { return this.locked; },
21013 * Location cache that is set for all drag drop objects when a drag is
21014 * initiated, cleared when the drag is finished.
21015 * @property locationCache
21022 * Set useCache to false if you want to force object the lookup of each
21023 * drag and drop linked element constantly during a drag.
21024 * @property useCache
21031 * The number of pixels that the mouse needs to move after the
21032 * mousedown before the drag is initiated. Default=3;
21033 * @property clickPixelThresh
21037 clickPixelThresh: 3,
21040 * The number of milliseconds after the mousedown event to initiate the
21041 * drag if we don't get a mouseup event. Default=1000
21042 * @property clickTimeThresh
21046 clickTimeThresh: 350,
21049 * Flag that indicates that either the drag pixel threshold or the
21050 * mousdown time threshold has been met
21051 * @property dragThreshMet
21056 dragThreshMet: false,
21059 * Timeout used for the click time threshold
21060 * @property clickTimeout
21065 clickTimeout: null,
21068 * The X position of the mousedown event stored for later use when a
21069 * drag threshold is met.
21078 * The Y position of the mousedown event stored for later use when a
21079 * drag threshold is met.
21088 * Each DragDrop instance must be registered with the DragDropMgr.
21089 * This is executed in DragDrop.init()
21090 * @method regDragDrop
21091 * @param {DragDrop} oDD the DragDrop object to register
21092 * @param {String} sGroup the name of the group this element belongs to
21095 regDragDrop: function(oDD, sGroup) {
21096 if (!this.initialized) { this.init(); }
21098 if (!this.ids[sGroup]) {
21099 this.ids[sGroup] = {};
21101 this.ids[sGroup][oDD.id] = oDD;
21105 * Removes the supplied dd instance from the supplied group. Executed
21106 * by DragDrop.removeFromGroup, so don't call this function directly.
21107 * @method removeDDFromGroup
21111 removeDDFromGroup: function(oDD, sGroup) {
21112 if (!this.ids[sGroup]) {
21113 this.ids[sGroup] = {};
21116 var obj = this.ids[sGroup];
21117 if (obj && obj[oDD.id]) {
21118 delete obj[oDD.id];
21123 * Unregisters a drag and drop item. This is executed in
21124 * DragDrop.unreg, use that method instead of calling this directly.
21129 _remove: function(oDD) {
21130 for (var g in oDD.groups) {
21131 if (g && this.ids[g][oDD.id]) {
21132 delete this.ids[g][oDD.id];
21135 delete this.handleIds[oDD.id];
21139 * Each DragDrop handle element must be registered. This is done
21140 * automatically when executing DragDrop.setHandleElId()
21141 * @method regHandle
21142 * @param {String} sDDId the DragDrop id this element is a handle for
21143 * @param {String} sHandleId the id of the element that is the drag
21147 regHandle: function(sDDId, sHandleId) {
21148 if (!this.handleIds[sDDId]) {
21149 this.handleIds[sDDId] = {};
21151 this.handleIds[sDDId][sHandleId] = sHandleId;
21155 * Utility function to determine if a given element has been
21156 * registered as a drag drop item.
21157 * @method isDragDrop
21158 * @param {String} id the element id to check
21159 * @return {boolean} true if this element is a DragDrop item,
21163 isDragDrop: function(id) {
21164 return ( this.getDDById(id) ) ? true : false;
21168 * Returns the drag and drop instances that are in all groups the
21169 * passed in instance belongs to.
21170 * @method getRelated
21171 * @param {DragDrop} p_oDD the obj to get related data for
21172 * @param {boolean} bTargetsOnly if true, only return targetable objs
21173 * @return {DragDrop[]} the related instances
21176 getRelated: function(p_oDD, bTargetsOnly) {
21178 for (var i in p_oDD.groups) {
21179 for (j in this.ids[i]) {
21180 var dd = this.ids[i][j];
21181 if (! this.isTypeOfDD(dd)) {
21184 if (!bTargetsOnly || dd.isTarget) {
21185 oDDs[oDDs.length] = dd;
21194 * Returns true if the specified dd target is a legal target for
21195 * the specifice drag obj
21196 * @method isLegalTarget
21197 * @param {DragDrop} the drag obj
21198 * @param {DragDrop} the target
21199 * @return {boolean} true if the target is a legal target for the
21203 isLegalTarget: function (oDD, oTargetDD) {
21204 var targets = this.getRelated(oDD, true);
21205 for (var i=0, len=targets.length;i<len;++i) {
21206 if (targets[i].id == oTargetDD.id) {
21215 * My goal is to be able to transparently determine if an object is
21216 * typeof DragDrop, and the exact subclass of DragDrop. typeof
21217 * returns "object", oDD.constructor.toString() always returns
21218 * "DragDrop" and not the name of the subclass. So for now it just
21219 * evaluates a well-known variable in DragDrop.
21220 * @method isTypeOfDD
21221 * @param {Object} the object to evaluate
21222 * @return {boolean} true if typeof oDD = DragDrop
21225 isTypeOfDD: function (oDD) {
21226 return (oDD && oDD.__ygDragDrop);
21230 * Utility function to determine if a given element has been
21231 * registered as a drag drop handle for the given Drag Drop object.
21233 * @param {String} id the element id to check
21234 * @return {boolean} true if this element is a DragDrop handle, false
21238 isHandle: function(sDDId, sHandleId) {
21239 return ( this.handleIds[sDDId] &&
21240 this.handleIds[sDDId][sHandleId] );
21244 * Returns the DragDrop instance for a given id
21245 * @method getDDById
21246 * @param {String} id the id of the DragDrop object
21247 * @return {DragDrop} the drag drop object, null if it is not found
21250 getDDById: function(id) {
21251 for (var i in this.ids) {
21252 if (this.ids[i][id]) {
21253 return this.ids[i][id];
21260 * Fired after a registered DragDrop object gets the mousedown event.
21261 * Sets up the events required to track the object being dragged
21262 * @method handleMouseDown
21263 * @param {Event} e the event
21264 * @param oDD the DragDrop object being dragged
21268 handleMouseDown: function(e, oDD) {
21270 Roo.QuickTips.disable();
21272 this.currentTarget = e.getTarget();
21274 this.dragCurrent = oDD;
21276 var el = oDD.getEl();
21278 // track start position
21279 this.startX = e.getPageX();
21280 this.startY = e.getPageY();
21282 this.deltaX = this.startX - el.offsetLeft;
21283 this.deltaY = this.startY - el.offsetTop;
21285 this.dragThreshMet = false;
21287 this.clickTimeout = setTimeout(
21289 var DDM = Roo.dd.DDM;
21290 DDM.startDrag(DDM.startX, DDM.startY);
21292 this.clickTimeThresh );
21296 * Fired when either the drag pixel threshol or the mousedown hold
21297 * time threshold has been met.
21298 * @method startDrag
21299 * @param x {int} the X position of the original mousedown
21300 * @param y {int} the Y position of the original mousedown
21303 startDrag: function(x, y) {
21304 clearTimeout(this.clickTimeout);
21305 if (this.dragCurrent) {
21306 this.dragCurrent.b4StartDrag(x, y);
21307 this.dragCurrent.startDrag(x, y);
21309 this.dragThreshMet = true;
21313 * Internal function to handle the mouseup event. Will be invoked
21314 * from the context of the document.
21315 * @method handleMouseUp
21316 * @param {Event} e the event
21320 handleMouseUp: function(e) {
21323 Roo.QuickTips.enable();
21325 if (! this.dragCurrent) {
21329 clearTimeout(this.clickTimeout);
21331 if (this.dragThreshMet) {
21332 this.fireEvents(e, true);
21342 * Utility to stop event propagation and event default, if these
21343 * features are turned on.
21344 * @method stopEvent
21345 * @param {Event} e the event as returned by this.getEvent()
21348 stopEvent: function(e){
21349 if(this.stopPropagation) {
21350 e.stopPropagation();
21353 if (this.preventDefault) {
21354 e.preventDefault();
21359 * Internal function to clean up event handlers after the drag
21360 * operation is complete
21362 * @param {Event} e the event
21366 stopDrag: function(e) {
21367 // Fire the drag end event for the item that was dragged
21368 if (this.dragCurrent) {
21369 if (this.dragThreshMet) {
21370 this.dragCurrent.b4EndDrag(e);
21371 this.dragCurrent.endDrag(e);
21374 this.dragCurrent.onMouseUp(e);
21377 this.dragCurrent = null;
21378 this.dragOvers = {};
21382 * Internal function to handle the mousemove event. Will be invoked
21383 * from the context of the html element.
21385 * @TODO figure out what we can do about mouse events lost when the
21386 * user drags objects beyond the window boundary. Currently we can
21387 * detect this in internet explorer by verifying that the mouse is
21388 * down during the mousemove event. Firefox doesn't give us the
21389 * button state on the mousemove event.
21390 * @method handleMouseMove
21391 * @param {Event} e the event
21395 handleMouseMove: function(e) {
21396 if (! this.dragCurrent) {
21400 // var button = e.which || e.button;
21402 // check for IE mouseup outside of page boundary
21403 if (Roo.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
21405 return this.handleMouseUp(e);
21408 if (!this.dragThreshMet) {
21409 var diffX = Math.abs(this.startX - e.getPageX());
21410 var diffY = Math.abs(this.startY - e.getPageY());
21411 if (diffX > this.clickPixelThresh ||
21412 diffY > this.clickPixelThresh) {
21413 this.startDrag(this.startX, this.startY);
21417 if (this.dragThreshMet) {
21418 this.dragCurrent.b4Drag(e);
21419 this.dragCurrent.onDrag(e);
21420 if(!this.dragCurrent.moveOnly){
21421 this.fireEvents(e, false);
21431 * Iterates over all of the DragDrop elements to find ones we are
21432 * hovering over or dropping on
21433 * @method fireEvents
21434 * @param {Event} e the event
21435 * @param {boolean} isDrop is this a drop op or a mouseover op?
21439 fireEvents: function(e, isDrop) {
21440 var dc = this.dragCurrent;
21442 // If the user did the mouse up outside of the window, we could
21443 // get here even though we have ended the drag.
21444 if (!dc || dc.isLocked()) {
21448 var pt = e.getPoint();
21450 // cache the previous dragOver array
21456 var enterEvts = [];
21458 // Check to see if the object(s) we were hovering over is no longer
21459 // being hovered over so we can fire the onDragOut event
21460 for (var i in this.dragOvers) {
21462 var ddo = this.dragOvers[i];
21464 if (! this.isTypeOfDD(ddo)) {
21468 if (! this.isOverTarget(pt, ddo, this.mode)) {
21469 outEvts.push( ddo );
21472 oldOvers[i] = true;
21473 delete this.dragOvers[i];
21476 for (var sGroup in dc.groups) {
21478 if ("string" != typeof sGroup) {
21482 for (i in this.ids[sGroup]) {
21483 var oDD = this.ids[sGroup][i];
21484 if (! this.isTypeOfDD(oDD)) {
21488 if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
21489 if (this.isOverTarget(pt, oDD, this.mode)) {
21490 // look for drop interactions
21492 dropEvts.push( oDD );
21493 // look for drag enter and drag over interactions
21496 // initial drag over: dragEnter fires
21497 if (!oldOvers[oDD.id]) {
21498 enterEvts.push( oDD );
21499 // subsequent drag overs: dragOver fires
21501 overEvts.push( oDD );
21504 this.dragOvers[oDD.id] = oDD;
21512 if (outEvts.length) {
21513 dc.b4DragOut(e, outEvts);
21514 dc.onDragOut(e, outEvts);
21517 if (enterEvts.length) {
21518 dc.onDragEnter(e, enterEvts);
21521 if (overEvts.length) {
21522 dc.b4DragOver(e, overEvts);
21523 dc.onDragOver(e, overEvts);
21526 if (dropEvts.length) {
21527 dc.b4DragDrop(e, dropEvts);
21528 dc.onDragDrop(e, dropEvts);
21532 // fire dragout events
21534 for (i=0, len=outEvts.length; i<len; ++i) {
21535 dc.b4DragOut(e, outEvts[i].id);
21536 dc.onDragOut(e, outEvts[i].id);
21539 // fire enter events
21540 for (i=0,len=enterEvts.length; i<len; ++i) {
21541 // dc.b4DragEnter(e, oDD.id);
21542 dc.onDragEnter(e, enterEvts[i].id);
21545 // fire over events
21546 for (i=0,len=overEvts.length; i<len; ++i) {
21547 dc.b4DragOver(e, overEvts[i].id);
21548 dc.onDragOver(e, overEvts[i].id);
21551 // fire drop events
21552 for (i=0, len=dropEvts.length; i<len; ++i) {
21553 dc.b4DragDrop(e, dropEvts[i].id);
21554 dc.onDragDrop(e, dropEvts[i].id);
21559 // notify about a drop that did not find a target
21560 if (isDrop && !dropEvts.length) {
21561 dc.onInvalidDrop(e);
21567 * Helper function for getting the best match from the list of drag
21568 * and drop objects returned by the drag and drop events when we are
21569 * in INTERSECT mode. It returns either the first object that the
21570 * cursor is over, or the object that has the greatest overlap with
21571 * the dragged element.
21572 * @method getBestMatch
21573 * @param {DragDrop[]} dds The array of drag and drop objects
21575 * @return {DragDrop} The best single match
21578 getBestMatch: function(dds) {
21580 // Return null if the input is not what we expect
21581 //if (!dds || !dds.length || dds.length == 0) {
21583 // If there is only one item, it wins
21584 //} else if (dds.length == 1) {
21586 var len = dds.length;
21591 // Loop through the targeted items
21592 for (var i=0; i<len; ++i) {
21594 // If the cursor is over the object, it wins. If the
21595 // cursor is over multiple matches, the first one we come
21597 if (dd.cursorIsOver) {
21600 // Otherwise the object with the most overlap wins
21603 winner.overlap.getArea() < dd.overlap.getArea()) {
21614 * Refreshes the cache of the top-left and bottom-right points of the
21615 * drag and drop objects in the specified group(s). This is in the
21616 * format that is stored in the drag and drop instance, so typical
21619 * Roo.dd.DragDropMgr.refreshCache(ddinstance.groups);
21623 * Roo.dd.DragDropMgr.refreshCache({group1:true, group2:true});
21625 * @TODO this really should be an indexed array. Alternatively this
21626 * method could accept both.
21627 * @method refreshCache
21628 * @param {Object} groups an associative array of groups to refresh
21631 refreshCache: function(groups) {
21632 for (var sGroup in groups) {
21633 if ("string" != typeof sGroup) {
21636 for (var i in this.ids[sGroup]) {
21637 var oDD = this.ids[sGroup][i];
21639 if (this.isTypeOfDD(oDD)) {
21640 // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
21641 var loc = this.getLocation(oDD);
21643 this.locationCache[oDD.id] = loc;
21645 delete this.locationCache[oDD.id];
21646 // this will unregister the drag and drop object if
21647 // the element is not in a usable state
21656 * This checks to make sure an element exists and is in the DOM. The
21657 * main purpose is to handle cases where innerHTML is used to remove
21658 * drag and drop objects from the DOM. IE provides an 'unspecified
21659 * error' when trying to access the offsetParent of such an element
21661 * @param {HTMLElement} el the element to check
21662 * @return {boolean} true if the element looks usable
21665 verifyEl: function(el) {
21670 parent = el.offsetParent;
21673 parent = el.offsetParent;
21684 * Returns a Region object containing the drag and drop element's position
21685 * and size, including the padding configured for it
21686 * @method getLocation
21687 * @param {DragDrop} oDD the drag and drop object to get the
21689 * @return {Roo.lib.Region} a Region object representing the total area
21690 * the element occupies, including any padding
21691 * the instance is configured for.
21694 getLocation: function(oDD) {
21695 if (! this.isTypeOfDD(oDD)) {
21699 var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
21702 pos= Roo.lib.Dom.getXY(el);
21710 x2 = x1 + el.offsetWidth;
21712 y2 = y1 + el.offsetHeight;
21714 t = y1 - oDD.padding[0];
21715 r = x2 + oDD.padding[1];
21716 b = y2 + oDD.padding[2];
21717 l = x1 - oDD.padding[3];
21719 return new Roo.lib.Region( t, r, b, l );
21723 * Checks the cursor location to see if it over the target
21724 * @method isOverTarget
21725 * @param {Roo.lib.Point} pt The point to evaluate
21726 * @param {DragDrop} oTarget the DragDrop object we are inspecting
21727 * @return {boolean} true if the mouse is over the target
21731 isOverTarget: function(pt, oTarget, intersect) {
21732 // use cache if available
21733 var loc = this.locationCache[oTarget.id];
21734 if (!loc || !this.useCache) {
21735 loc = this.getLocation(oTarget);
21736 this.locationCache[oTarget.id] = loc;
21744 oTarget.cursorIsOver = loc.contains( pt );
21746 // DragDrop is using this as a sanity check for the initial mousedown
21747 // in this case we are done. In POINT mode, if the drag obj has no
21748 // contraints, we are also done. Otherwise we need to evaluate the
21749 // location of the target as related to the actual location of the
21750 // dragged element.
21751 var dc = this.dragCurrent;
21752 if (!dc || !dc.getTargetCoord ||
21753 (!intersect && !dc.constrainX && !dc.constrainY)) {
21754 return oTarget.cursorIsOver;
21757 oTarget.overlap = null;
21759 // Get the current location of the drag element, this is the
21760 // location of the mouse event less the delta that represents
21761 // where the original mousedown happened on the element. We
21762 // need to consider constraints and ticks as well.
21763 var pos = dc.getTargetCoord(pt.x, pt.y);
21765 var el = dc.getDragEl();
21766 var curRegion = new Roo.lib.Region( pos.y,
21767 pos.x + el.offsetWidth,
21768 pos.y + el.offsetHeight,
21771 var overlap = curRegion.intersect(loc);
21774 oTarget.overlap = overlap;
21775 return (intersect) ? true : oTarget.cursorIsOver;
21782 * unload event handler
21783 * @method _onUnload
21787 _onUnload: function(e, me) {
21788 Roo.dd.DragDropMgr.unregAll();
21792 * Cleans up the drag and drop events and objects.
21797 unregAll: function() {
21799 if (this.dragCurrent) {
21801 this.dragCurrent = null;
21804 this._execOnAll("unreg", []);
21806 for (i in this.elementCache) {
21807 delete this.elementCache[i];
21810 this.elementCache = {};
21815 * A cache of DOM elements
21816 * @property elementCache
21823 * Get the wrapper for the DOM element specified
21824 * @method getElWrapper
21825 * @param {String} id the id of the element to get
21826 * @return {Roo.dd.DDM.ElementWrapper} the wrapped element
21828 * @deprecated This wrapper isn't that useful
21831 getElWrapper: function(id) {
21832 var oWrapper = this.elementCache[id];
21833 if (!oWrapper || !oWrapper.el) {
21834 oWrapper = this.elementCache[id] =
21835 new this.ElementWrapper(Roo.getDom(id));
21841 * Returns the actual DOM element
21842 * @method getElement
21843 * @param {String} id the id of the elment to get
21844 * @return {Object} The element
21845 * @deprecated use Roo.getDom instead
21848 getElement: function(id) {
21849 return Roo.getDom(id);
21853 * Returns the style property for the DOM element (i.e.,
21854 * document.getElById(id).style)
21856 * @param {String} id the id of the elment to get
21857 * @return {Object} The style property of the element
21858 * @deprecated use Roo.getDom instead
21861 getCss: function(id) {
21862 var el = Roo.getDom(id);
21863 return (el) ? el.style : null;
21867 * Inner class for cached elements
21868 * @class DragDropMgr.ElementWrapper
21873 ElementWrapper: function(el) {
21878 this.el = el || null;
21883 this.id = this.el && el.id;
21885 * A reference to the style property
21888 this.css = this.el && el.style;
21892 * Returns the X position of an html element
21894 * @param el the element for which to get the position
21895 * @return {int} the X coordinate
21897 * @deprecated use Roo.lib.Dom.getX instead
21900 getPosX: function(el) {
21901 return Roo.lib.Dom.getX(el);
21905 * Returns the Y position of an html element
21907 * @param el the element for which to get the position
21908 * @return {int} the Y coordinate
21909 * @deprecated use Roo.lib.Dom.getY instead
21912 getPosY: function(el) {
21913 return Roo.lib.Dom.getY(el);
21917 * Swap two nodes. In IE, we use the native method, for others we
21918 * emulate the IE behavior
21920 * @param n1 the first node to swap
21921 * @param n2 the other node to swap
21924 swapNode: function(n1, n2) {
21928 var p = n2.parentNode;
21929 var s = n2.nextSibling;
21932 p.insertBefore(n1, n2);
21933 } else if (n2 == n1.nextSibling) {
21934 p.insertBefore(n2, n1);
21936 n1.parentNode.replaceChild(n2, n1);
21937 p.insertBefore(n1, s);
21943 * Returns the current scroll position
21944 * @method getScroll
21948 getScroll: function () {
21949 var t, l, dde=document.documentElement, db=document.body;
21950 if (dde && (dde.scrollTop || dde.scrollLeft)) {
21952 l = dde.scrollLeft;
21959 return { top: t, left: l };
21963 * Returns the specified element style property
21965 * @param {HTMLElement} el the element
21966 * @param {string} styleProp the style property
21967 * @return {string} The value of the style property
21968 * @deprecated use Roo.lib.Dom.getStyle
21971 getStyle: function(el, styleProp) {
21972 return Roo.fly(el).getStyle(styleProp);
21976 * Gets the scrollTop
21977 * @method getScrollTop
21978 * @return {int} the document's scrollTop
21981 getScrollTop: function () { return this.getScroll().top; },
21984 * Gets the scrollLeft
21985 * @method getScrollLeft
21986 * @return {int} the document's scrollTop
21989 getScrollLeft: function () { return this.getScroll().left; },
21992 * Sets the x/y position of an element to the location of the
21995 * @param {HTMLElement} moveEl The element to move
21996 * @param {HTMLElement} targetEl The position reference element
21999 moveToEl: function (moveEl, targetEl) {
22000 var aCoord = Roo.lib.Dom.getXY(targetEl);
22001 Roo.lib.Dom.setXY(moveEl, aCoord);
22005 * Numeric array sort function
22006 * @method numericSort
22009 numericSort: function(a, b) { return (a - b); },
22013 * @property _timeoutCount
22020 * Trying to make the load order less important. Without this we get
22021 * an error if this file is loaded before the Event Utility.
22022 * @method _addListeners
22026 _addListeners: function() {
22027 var DDM = Roo.dd.DDM;
22028 if ( Roo.lib.Event && document ) {
22031 if (DDM._timeoutCount > 2000) {
22033 setTimeout(DDM._addListeners, 10);
22034 if (document && document.body) {
22035 DDM._timeoutCount += 1;
22042 * Recursively searches the immediate parent and all child nodes for
22043 * the handle element in order to determine wheter or not it was
22045 * @method handleWasClicked
22046 * @param node the html element to inspect
22049 handleWasClicked: function(node, id) {
22050 if (this.isHandle(id, node.id)) {
22053 // check to see if this is a text node child of the one we want
22054 var p = node.parentNode;
22057 if (this.isHandle(id, p.id)) {
22072 // shorter alias, save a few bytes
22073 Roo.dd.DDM = Roo.dd.DragDropMgr;
22074 Roo.dd.DDM._addListeners();
22078 * Ext JS Library 1.1.1
22079 * Copyright(c) 2006-2007, Ext JS, LLC.
22081 * Originally Released Under LGPL - original licence link has changed is not relivant.
22084 * <script type="text/javascript">
22089 * A DragDrop implementation where the linked element follows the
22090 * mouse cursor during a drag.
22091 * @extends Roo.dd.DragDrop
22093 * @param {String} id the id of the linked element
22094 * @param {String} sGroup the group of related DragDrop items
22095 * @param {object} config an object containing configurable attributes
22096 * Valid properties for DD:
22099 Roo.dd.DD = function(id, sGroup, config) {
22101 this.init(id, sGroup, config);
22105 Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
22108 * When set to true, the utility automatically tries to scroll the browser
22109 * window wehn a drag and drop element is dragged near the viewport boundary.
22110 * Defaults to true.
22117 * Sets the pointer offset to the distance between the linked element's top
22118 * left corner and the location the element was clicked
22119 * @method autoOffset
22120 * @param {int} iPageX the X coordinate of the click
22121 * @param {int} iPageY the Y coordinate of the click
22123 autoOffset: function(iPageX, iPageY) {
22124 var x = iPageX - this.startPageX;
22125 var y = iPageY - this.startPageY;
22126 this.setDelta(x, y);
22130 * Sets the pointer offset. You can call this directly to force the
22131 * offset to be in a particular location (e.g., pass in 0,0 to set it
22132 * to the center of the object)
22134 * @param {int} iDeltaX the distance from the left
22135 * @param {int} iDeltaY the distance from the top
22137 setDelta: function(iDeltaX, iDeltaY) {
22138 this.deltaX = iDeltaX;
22139 this.deltaY = iDeltaY;
22143 * Sets the drag element to the location of the mousedown or click event,
22144 * maintaining the cursor location relative to the location on the element
22145 * that was clicked. Override this if you want to place the element in a
22146 * location other than where the cursor is.
22147 * @method setDragElPos
22148 * @param {int} iPageX the X coordinate of the mousedown or drag event
22149 * @param {int} iPageY the Y coordinate of the mousedown or drag event
22151 setDragElPos: function(iPageX, iPageY) {
22152 // the first time we do this, we are going to check to make sure
22153 // the element has css positioning
22155 var el = this.getDragEl();
22156 this.alignElWithMouse(el, iPageX, iPageY);
22160 * Sets the element to the location of the mousedown or click event,
22161 * maintaining the cursor location relative to the location on the element
22162 * that was clicked. Override this if you want to place the element in a
22163 * location other than where the cursor is.
22164 * @method alignElWithMouse
22165 * @param {HTMLElement} el the element to move
22166 * @param {int} iPageX the X coordinate of the mousedown or drag event
22167 * @param {int} iPageY the Y coordinate of the mousedown or drag event
22169 alignElWithMouse: function(el, iPageX, iPageY) {
22170 var oCoord = this.getTargetCoord(iPageX, iPageY);
22171 var fly = el.dom ? el : Roo.fly(el);
22172 if (!this.deltaSetXY) {
22173 var aCoord = [oCoord.x, oCoord.y];
22175 var newLeft = fly.getLeft(true);
22176 var newTop = fly.getTop(true);
22177 this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
22179 fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]);
22182 this.cachePosition(oCoord.x, oCoord.y);
22183 this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
22188 * Saves the most recent position so that we can reset the constraints and
22189 * tick marks on-demand. We need to know this so that we can calculate the
22190 * number of pixels the element is offset from its original position.
22191 * @method cachePosition
22192 * @param iPageX the current x position (optional, this just makes it so we
22193 * don't have to look it up again)
22194 * @param iPageY the current y position (optional, this just makes it so we
22195 * don't have to look it up again)
22197 cachePosition: function(iPageX, iPageY) {
22199 this.lastPageX = iPageX;
22200 this.lastPageY = iPageY;
22202 var aCoord = Roo.lib.Dom.getXY(this.getEl());
22203 this.lastPageX = aCoord[0];
22204 this.lastPageY = aCoord[1];
22209 * Auto-scroll the window if the dragged object has been moved beyond the
22210 * visible window boundary.
22211 * @method autoScroll
22212 * @param {int} x the drag element's x position
22213 * @param {int} y the drag element's y position
22214 * @param {int} h the height of the drag element
22215 * @param {int} w the width of the drag element
22218 autoScroll: function(x, y, h, w) {
22221 // The client height
22222 var clientH = Roo.lib.Dom.getViewWidth();
22224 // The client width
22225 var clientW = Roo.lib.Dom.getViewHeight();
22227 // The amt scrolled down
22228 var st = this.DDM.getScrollTop();
22230 // The amt scrolled right
22231 var sl = this.DDM.getScrollLeft();
22233 // Location of the bottom of the element
22236 // Location of the right of the element
22239 // The distance from the cursor to the bottom of the visible area,
22240 // adjusted so that we don't scroll if the cursor is beyond the
22241 // element drag constraints
22242 var toBot = (clientH + st - y - this.deltaY);
22244 // The distance from the cursor to the right of the visible area
22245 var toRight = (clientW + sl - x - this.deltaX);
22248 // How close to the edge the cursor must be before we scroll
22249 // var thresh = (document.all) ? 100 : 40;
22252 // How many pixels to scroll per autoscroll op. This helps to reduce
22253 // clunky scrolling. IE is more sensitive about this ... it needs this
22254 // value to be higher.
22255 var scrAmt = (document.all) ? 80 : 30;
22257 // Scroll down if we are near the bottom of the visible page and the
22258 // obj extends below the crease
22259 if ( bot > clientH && toBot < thresh ) {
22260 window.scrollTo(sl, st + scrAmt);
22263 // Scroll up if the window is scrolled down and the top of the object
22264 // goes above the top border
22265 if ( y < st && st > 0 && y - st < thresh ) {
22266 window.scrollTo(sl, st - scrAmt);
22269 // Scroll right if the obj is beyond the right border and the cursor is
22270 // near the border.
22271 if ( right > clientW && toRight < thresh ) {
22272 window.scrollTo(sl + scrAmt, st);
22275 // Scroll left if the window has been scrolled to the right and the obj
22276 // extends past the left border
22277 if ( x < sl && sl > 0 && x - sl < thresh ) {
22278 window.scrollTo(sl - scrAmt, st);
22284 * Finds the location the element should be placed if we want to move
22285 * it to where the mouse location less the click offset would place us.
22286 * @method getTargetCoord
22287 * @param {int} iPageX the X coordinate of the click
22288 * @param {int} iPageY the Y coordinate of the click
22289 * @return an object that contains the coordinates (Object.x and Object.y)
22292 getTargetCoord: function(iPageX, iPageY) {
22295 var x = iPageX - this.deltaX;
22296 var y = iPageY - this.deltaY;
22298 if (this.constrainX) {
22299 if (x < this.minX) { x = this.minX; }
22300 if (x > this.maxX) { x = this.maxX; }
22303 if (this.constrainY) {
22304 if (y < this.minY) { y = this.minY; }
22305 if (y > this.maxY) { y = this.maxY; }
22308 x = this.getTick(x, this.xTicks);
22309 y = this.getTick(y, this.yTicks);
22316 * Sets up config options specific to this class. Overrides
22317 * Roo.dd.DragDrop, but all versions of this method through the
22318 * inheritance chain are called
22320 applyConfig: function() {
22321 Roo.dd.DD.superclass.applyConfig.call(this);
22322 this.scroll = (this.config.scroll !== false);
22326 * Event that fires prior to the onMouseDown event. Overrides
22329 b4MouseDown: function(e) {
22330 // this.resetConstraints();
22331 this.autoOffset(e.getPageX(),
22336 * Event that fires prior to the onDrag event. Overrides
22339 b4Drag: function(e) {
22340 this.setDragElPos(e.getPageX(),
22344 toString: function() {
22345 return ("DD " + this.id);
22348 //////////////////////////////////////////////////////////////////////////
22349 // Debugging ygDragDrop events that can be overridden
22350 //////////////////////////////////////////////////////////////////////////
22352 startDrag: function(x, y) {
22355 onDrag: function(e) {
22358 onDragEnter: function(e, id) {
22361 onDragOver: function(e, id) {
22364 onDragOut: function(e, id) {
22367 onDragDrop: function(e, id) {
22370 endDrag: function(e) {
22377 * Ext JS Library 1.1.1
22378 * Copyright(c) 2006-2007, Ext JS, LLC.
22380 * Originally Released Under LGPL - original licence link has changed is not relivant.
22383 * <script type="text/javascript">
22387 * @class Roo.dd.DDProxy
22388 * A DragDrop implementation that inserts an empty, bordered div into
22389 * the document that follows the cursor during drag operations. At the time of
22390 * the click, the frame div is resized to the dimensions of the linked html
22391 * element, and moved to the exact location of the linked element.
22393 * References to the "frame" element refer to the single proxy element that
22394 * was created to be dragged in place of all DDProxy elements on the
22397 * @extends Roo.dd.DD
22399 * @param {String} id the id of the linked html element
22400 * @param {String} sGroup the group of related DragDrop objects
22401 * @param {object} config an object containing configurable attributes
22402 * Valid properties for DDProxy in addition to those in DragDrop:
22403 * resizeFrame, centerFrame, dragElId
22405 Roo.dd.DDProxy = function(id, sGroup, config) {
22407 this.init(id, sGroup, config);
22413 * The default drag frame div id
22414 * @property Roo.dd.DDProxy.dragElId
22418 Roo.dd.DDProxy.dragElId = "ygddfdiv";
22420 Roo.extend(Roo.dd.DDProxy, Roo.dd.DD, {
22423 * By default we resize the drag frame to be the same size as the element
22424 * we want to drag (this is to get the frame effect). We can turn it off
22425 * if we want a different behavior.
22426 * @property resizeFrame
22432 * By default the frame is positioned exactly where the drag element is, so
22433 * we use the cursor offset provided by Roo.dd.DD. Another option that works only if
22434 * you do not have constraints on the obj is to have the drag frame centered
22435 * around the cursor. Set centerFrame to true for this effect.
22436 * @property centerFrame
22439 centerFrame: false,
22442 * Creates the proxy element if it does not yet exist
22443 * @method createFrame
22445 createFrame: function() {
22447 var body = document.body;
22449 if (!body || !body.firstChild) {
22450 setTimeout( function() { self.createFrame(); }, 50 );
22454 var div = this.getDragEl();
22457 div = document.createElement("div");
22458 div.id = this.dragElId;
22461 s.position = "absolute";
22462 s.visibility = "hidden";
22464 s.border = "2px solid #aaa";
22467 // appendChild can blow up IE if invoked prior to the window load event
22468 // while rendering a table. It is possible there are other scenarios
22469 // that would cause this to happen as well.
22470 body.insertBefore(div, body.firstChild);
22475 * Initialization for the drag frame element. Must be called in the
22476 * constructor of all subclasses
22477 * @method initFrame
22479 initFrame: function() {
22480 this.createFrame();
22483 applyConfig: function() {
22484 Roo.dd.DDProxy.superclass.applyConfig.call(this);
22486 this.resizeFrame = (this.config.resizeFrame !== false);
22487 this.centerFrame = (this.config.centerFrame);
22488 this.setDragElId(this.config.dragElId || Roo.dd.DDProxy.dragElId);
22492 * Resizes the drag frame to the dimensions of the clicked object, positions
22493 * it over the object, and finally displays it
22494 * @method showFrame
22495 * @param {int} iPageX X click position
22496 * @param {int} iPageY Y click position
22499 showFrame: function(iPageX, iPageY) {
22500 var el = this.getEl();
22501 var dragEl = this.getDragEl();
22502 var s = dragEl.style;
22504 this._resizeProxy();
22506 if (this.centerFrame) {
22507 this.setDelta( Math.round(parseInt(s.width, 10)/2),
22508 Math.round(parseInt(s.height, 10)/2) );
22511 this.setDragElPos(iPageX, iPageY);
22513 Roo.fly(dragEl).show();
22517 * The proxy is automatically resized to the dimensions of the linked
22518 * element when a drag is initiated, unless resizeFrame is set to false
22519 * @method _resizeProxy
22522 _resizeProxy: function() {
22523 if (this.resizeFrame) {
22524 var el = this.getEl();
22525 Roo.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
22529 // overrides Roo.dd.DragDrop
22530 b4MouseDown: function(e) {
22531 var x = e.getPageX();
22532 var y = e.getPageY();
22533 this.autoOffset(x, y);
22534 this.setDragElPos(x, y);
22537 // overrides Roo.dd.DragDrop
22538 b4StartDrag: function(x, y) {
22539 // show the drag frame
22540 this.showFrame(x, y);
22543 // overrides Roo.dd.DragDrop
22544 b4EndDrag: function(e) {
22545 Roo.fly(this.getDragEl()).hide();
22548 // overrides Roo.dd.DragDrop
22549 // By default we try to move the element to the last location of the frame.
22550 // This is so that the default behavior mirrors that of Roo.dd.DD.
22551 endDrag: function(e) {
22553 var lel = this.getEl();
22554 var del = this.getDragEl();
22556 // Show the drag frame briefly so we can get its position
22557 del.style.visibility = "";
22560 // Hide the linked element before the move to get around a Safari
22562 lel.style.visibility = "hidden";
22563 Roo.dd.DDM.moveToEl(lel, del);
22564 del.style.visibility = "hidden";
22565 lel.style.visibility = "";
22570 beforeMove : function(){
22574 afterDrag : function(){
22578 toString: function() {
22579 return ("DDProxy " + this.id);
22585 * Ext JS Library 1.1.1
22586 * Copyright(c) 2006-2007, Ext JS, LLC.
22588 * Originally Released Under LGPL - original licence link has changed is not relivant.
22591 * <script type="text/javascript">
22595 * @class Roo.dd.DDTarget
22596 * A DragDrop implementation that does not move, but can be a drop
22597 * target. You would get the same result by simply omitting implementation
22598 * for the event callbacks, but this way we reduce the processing cost of the
22599 * event listener and the callbacks.
22600 * @extends Roo.dd.DragDrop
22602 * @param {String} id the id of the element that is a drop target
22603 * @param {String} sGroup the group of related DragDrop objects
22604 * @param {object} config an object containing configurable attributes
22605 * Valid properties for DDTarget in addition to those in
22609 Roo.dd.DDTarget = function(id, sGroup, config) {
22611 this.initTarget(id, sGroup, config);
22613 if (config && (config.listeners || config.events)) {
22614 Roo.dd.DragDrop.superclass.constructor.call(this, {
22615 listeners : config.listeners || {},
22616 events : config.events || {}
22621 // Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
22622 Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
22623 toString: function() {
22624 return ("DDTarget " + this.id);
22629 * Ext JS Library 1.1.1
22630 * Copyright(c) 2006-2007, Ext JS, LLC.
22632 * Originally Released Under LGPL - original licence link has changed is not relivant.
22635 * <script type="text/javascript">
22640 * @class Roo.dd.ScrollManager
22641 * Provides automatic scrolling of overflow regions in the page during drag operations.<br><br>
22642 * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
22645 Roo.dd.ScrollManager = function(){
22646 var ddm = Roo.dd.DragDropMgr;
22653 var onStop = function(e){
22658 var triggerRefresh = function(){
22659 if(ddm.dragCurrent){
22660 ddm.refreshCache(ddm.dragCurrent.groups);
22664 var doScroll = function(){
22665 if(ddm.dragCurrent){
22666 var dds = Roo.dd.ScrollManager;
22668 if(proc.el.scroll(proc.dir, dds.increment)){
22672 proc.el.scroll(proc.dir, dds.increment, true, dds.animDuration, triggerRefresh);
22677 var clearProc = function(){
22679 clearInterval(proc.id);
22686 var startProc = function(el, dir){
22687 Roo.log('scroll startproc');
22691 proc.id = setInterval(doScroll, Roo.dd.ScrollManager.frequency);
22694 var onFire = function(e, isDrop){
22696 if(isDrop || !ddm.dragCurrent){ return; }
22697 var dds = Roo.dd.ScrollManager;
22698 if(!dragEl || dragEl != ddm.dragCurrent){
22699 dragEl = ddm.dragCurrent;
22700 // refresh regions on drag start
22701 dds.refreshCache();
22704 var xy = Roo.lib.Event.getXY(e);
22705 var pt = new Roo.lib.Point(xy[0], xy[1]);
22706 for(var id in els){
22707 var el = els[id], r = el._region;
22708 if(r && r.contains(pt) && el.isScrollable()){
22709 if(r.bottom - pt.y <= dds.thresh){
22711 startProc(el, "down");
22714 }else if(r.right - pt.x <= dds.thresh){
22716 startProc(el, "left");
22719 }else if(pt.y - r.top <= dds.thresh){
22721 startProc(el, "up");
22724 }else if(pt.x - r.left <= dds.thresh){
22726 startProc(el, "right");
22735 ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
22736 ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
22740 * Registers new overflow element(s) to auto scroll
22741 * @param {String/HTMLElement/Element/Array} el The id of or the element to be scrolled or an array of either
22743 register : function(el){
22744 if(el instanceof Array){
22745 for(var i = 0, len = el.length; i < len; i++) {
22746 this.register(el[i]);
22752 Roo.dd.ScrollManager.els = els;
22756 * Unregisters overflow element(s) so they are no longer scrolled
22757 * @param {String/HTMLElement/Element/Array} el The id of or the element to be removed or an array of either
22759 unregister : function(el){
22760 if(el instanceof Array){
22761 for(var i = 0, len = el.length; i < len; i++) {
22762 this.unregister(el[i]);
22771 * The number of pixels from the edge of a container the pointer needs to be to
22772 * trigger scrolling (defaults to 25)
22778 * The number of pixels to scroll in each scroll increment (defaults to 50)
22784 * The frequency of scrolls in milliseconds (defaults to 500)
22790 * True to animate the scroll (defaults to true)
22796 * The animation duration in seconds -
22797 * MUST BE less than Roo.dd.ScrollManager.frequency! (defaults to .4)
22803 * Manually trigger a cache refresh.
22805 refreshCache : function(){
22806 for(var id in els){
22807 if(typeof els[id] == 'object'){ // for people extending the object prototype
22808 els[id]._region = els[id].getRegion();
22815 * Ext JS Library 1.1.1
22816 * Copyright(c) 2006-2007, Ext JS, LLC.
22818 * Originally Released Under LGPL - original licence link has changed is not relivant.
22821 * <script type="text/javascript">
22826 * @class Roo.dd.Registry
22827 * Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either
22828 * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
22831 Roo.dd.Registry = function(){
22834 var autoIdSeed = 0;
22836 var getId = function(el, autogen){
22837 if(typeof el == "string"){
22841 if(!id && autogen !== false){
22842 id = "roodd-" + (++autoIdSeed);
22850 * Register a drag drop element
22851 * @param {String|HTMLElement} element The id or DOM node to register
22852 * @param {Object} data (optional) A custom data object that will be passed between the elements that are involved
22853 * in drag drop operations. You can populate this object with any arbitrary properties that your own code
22854 * knows how to interpret, plus there are some specific properties known to the Registry that should be
22855 * populated in the data object (if applicable):
22857 Value Description<br />
22858 --------- ------------------------------------------<br />
22859 handles Array of DOM nodes that trigger dragging<br />
22860 for the element being registered<br />
22861 isHandle True if the element passed in triggers<br />
22862 dragging itself, else false
22865 register : function(el, data){
22867 if(typeof el == "string"){
22868 el = document.getElementById(el);
22871 elements[getId(el)] = data;
22872 if(data.isHandle !== false){
22873 handles[data.ddel.id] = data;
22876 var hs = data.handles;
22877 for(var i = 0, len = hs.length; i < len; i++){
22878 handles[getId(hs[i])] = data;
22884 * Unregister a drag drop element
22885 * @param {String|HTMLElement} element The id or DOM node to unregister
22887 unregister : function(el){
22888 var id = getId(el, false);
22889 var data = elements[id];
22891 delete elements[id];
22893 var hs = data.handles;
22894 for(var i = 0, len = hs.length; i < len; i++){
22895 delete handles[getId(hs[i], false)];
22902 * Returns the handle registered for a DOM Node by id
22903 * @param {String|HTMLElement} id The DOM node or id to look up
22904 * @return {Object} handle The custom handle data
22906 getHandle : function(id){
22907 if(typeof id != "string"){ // must be element?
22910 return handles[id];
22914 * Returns the handle that is registered for the DOM node that is the target of the event
22915 * @param {Event} e The event
22916 * @return {Object} handle The custom handle data
22918 getHandleFromEvent : function(e){
22919 var t = Roo.lib.Event.getTarget(e);
22920 return t ? handles[t.id] : null;
22924 * Returns a custom data object that is registered for a DOM node by id
22925 * @param {String|HTMLElement} id The DOM node or id to look up
22926 * @return {Object} data The custom data
22928 getTarget : function(id){
22929 if(typeof id != "string"){ // must be element?
22932 return elements[id];
22936 * Returns a custom data object that is registered for the DOM node that is the target of the event
22937 * @param {Event} e The event
22938 * @return {Object} data The custom data
22940 getTargetFromEvent : function(e){
22941 var t = Roo.lib.Event.getTarget(e);
22942 return t ? elements[t.id] || handles[t.id] : null;
22947 * Ext JS Library 1.1.1
22948 * Copyright(c) 2006-2007, Ext JS, LLC.
22950 * Originally Released Under LGPL - original licence link has changed is not relivant.
22953 * <script type="text/javascript">
22958 * @class Roo.dd.StatusProxy
22959 * A specialized drag proxy that supports a drop status icon, {@link Roo.Layer} styles and auto-repair. This is the
22960 * default drag proxy used by all Roo.dd components.
22962 * @param {Object} config
22964 Roo.dd.StatusProxy = function(config){
22965 Roo.apply(this, config);
22966 this.id = this.id || Roo.id();
22967 this.el = new Roo.Layer({
22969 id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
22970 {tag: "div", cls: "x-dd-drop-icon"},
22971 {tag: "div", cls: "x-dd-drag-ghost"}
22974 shadow: !config || config.shadow !== false
22976 this.ghost = Roo.get(this.el.dom.childNodes[1]);
22977 this.dropStatus = this.dropNotAllowed;
22980 Roo.dd.StatusProxy.prototype = {
22982 * @cfg {String} dropAllowed
22983 * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
22985 dropAllowed : "x-dd-drop-ok",
22987 * @cfg {String} dropNotAllowed
22988 * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
22990 dropNotAllowed : "x-dd-drop-nodrop",
22993 * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
22994 * over the current target element.
22995 * @param {String} cssClass The css class for the new drop status indicator image
22997 setStatus : function(cssClass){
22998 cssClass = cssClass || this.dropNotAllowed;
22999 if(this.dropStatus != cssClass){
23000 this.el.replaceClass(this.dropStatus, cssClass);
23001 this.dropStatus = cssClass;
23006 * Resets the status indicator to the default dropNotAllowed value
23007 * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
23009 reset : function(clearGhost){
23010 this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
23011 this.dropStatus = this.dropNotAllowed;
23013 this.ghost.update("");
23018 * Updates the contents of the ghost element
23019 * @param {String} html The html that will replace the current innerHTML of the ghost element
23021 update : function(html){
23022 if(typeof html == "string"){
23023 this.ghost.update(html);
23025 this.ghost.update("");
23026 html.style.margin = "0";
23027 this.ghost.dom.appendChild(html);
23029 // ensure float = none set?? cant remember why though.
23030 var el = this.ghost.dom.firstChild;
23032 Roo.fly(el).setStyle('float', 'none');
23037 * Returns the underlying proxy {@link Roo.Layer}
23038 * @return {Roo.Layer} el
23040 getEl : function(){
23045 * Returns the ghost element
23046 * @return {Roo.Element} el
23048 getGhost : function(){
23054 * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
23056 hide : function(clear){
23064 * Stops the repair animation if it's currently running
23067 if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
23073 * Displays this proxy
23080 * Force the Layer to sync its shadow and shim positions to the element
23087 * Causes the proxy to return to its position of origin via an animation. Should be called after an
23088 * invalid drop operation by the item being dragged.
23089 * @param {Array} xy The XY position of the element ([x, y])
23090 * @param {Function} callback The function to call after the repair is complete
23091 * @param {Object} scope The scope in which to execute the callback
23093 repair : function(xy, callback, scope){
23094 this.callback = callback;
23095 this.scope = scope;
23096 if(xy && this.animRepair !== false){
23097 this.el.addClass("x-dd-drag-repair");
23098 this.el.hideUnders(true);
23099 this.anim = this.el.shift({
23100 duration: this.repairDuration || .5,
23104 callback: this.afterRepair,
23108 this.afterRepair();
23113 afterRepair : function(){
23115 if(typeof this.callback == "function"){
23116 this.callback.call(this.scope || this);
23118 this.callback = null;
23123 * Ext JS Library 1.1.1
23124 * Copyright(c) 2006-2007, Ext JS, LLC.
23126 * Originally Released Under LGPL - original licence link has changed is not relivant.
23129 * <script type="text/javascript">
23133 * @class Roo.dd.DragSource
23134 * @extends Roo.dd.DDProxy
23135 * A simple class that provides the basic implementation needed to make any element draggable.
23137 * @param {String/HTMLElement/Element} el The container element
23138 * @param {Object} config
23140 Roo.dd.DragSource = function(el, config){
23141 this.el = Roo.get(el);
23142 this.dragData = {};
23144 Roo.apply(this, config);
23147 this.proxy = new Roo.dd.StatusProxy();
23150 Roo.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
23151 {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
23153 this.dragging = false;
23156 Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, {
23158 * @cfg {String} dropAllowed
23159 * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
23161 dropAllowed : "x-dd-drop-ok",
23163 * @cfg {String} dropNotAllowed
23164 * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
23166 dropNotAllowed : "x-dd-drop-nodrop",
23169 * Returns the data object associated with this drag source
23170 * @return {Object} data An object containing arbitrary data
23172 getDragData : function(e){
23173 return this.dragData;
23177 onDragEnter : function(e, id){
23178 var target = Roo.dd.DragDropMgr.getDDById(id);
23179 this.cachedTarget = target;
23180 if(this.beforeDragEnter(target, e, id) !== false){
23181 if(target.isNotifyTarget){
23182 var status = target.notifyEnter(this, e, this.dragData);
23183 this.proxy.setStatus(status);
23185 this.proxy.setStatus(this.dropAllowed);
23188 if(this.afterDragEnter){
23190 * An empty function by default, but provided so that you can perform a custom action
23191 * when the dragged item enters the drop target by providing an implementation.
23192 * @param {Roo.dd.DragDrop} target The drop target
23193 * @param {Event} e The event object
23194 * @param {String} id The id of the dragged element
23195 * @method afterDragEnter
23197 this.afterDragEnter(target, e, id);
23203 * An empty function by default, but provided so that you can perform a custom action
23204 * before the dragged item enters the drop target and optionally cancel the onDragEnter.
23205 * @param {Roo.dd.DragDrop} target The drop target
23206 * @param {Event} e The event object
23207 * @param {String} id The id of the dragged element
23208 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23210 beforeDragEnter : function(target, e, id){
23215 alignElWithMouse: function() {
23216 Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
23221 onDragOver : function(e, id){
23222 var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
23223 if(this.beforeDragOver(target, e, id) !== false){
23224 if(target.isNotifyTarget){
23225 var status = target.notifyOver(this, e, this.dragData);
23226 this.proxy.setStatus(status);
23229 if(this.afterDragOver){
23231 * An empty function by default, but provided so that you can perform a custom action
23232 * while the dragged item is over the drop target by providing an implementation.
23233 * @param {Roo.dd.DragDrop} target The drop target
23234 * @param {Event} e The event object
23235 * @param {String} id The id of the dragged element
23236 * @method afterDragOver
23238 this.afterDragOver(target, e, id);
23244 * An empty function by default, but provided so that you can perform a custom action
23245 * while the dragged item is over the drop target and optionally cancel the onDragOver.
23246 * @param {Roo.dd.DragDrop} target The drop target
23247 * @param {Event} e The event object
23248 * @param {String} id The id of the dragged element
23249 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23251 beforeDragOver : function(target, e, id){
23256 onDragOut : function(e, id){
23257 var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
23258 if(this.beforeDragOut(target, e, id) !== false){
23259 if(target.isNotifyTarget){
23260 target.notifyOut(this, e, this.dragData);
23262 this.proxy.reset();
23263 if(this.afterDragOut){
23265 * An empty function by default, but provided so that you can perform a custom action
23266 * after the dragged item is dragged out of the target without dropping.
23267 * @param {Roo.dd.DragDrop} target The drop target
23268 * @param {Event} e The event object
23269 * @param {String} id The id of the dragged element
23270 * @method afterDragOut
23272 this.afterDragOut(target, e, id);
23275 this.cachedTarget = null;
23279 * An empty function by default, but provided so that you can perform a custom action before the dragged
23280 * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
23281 * @param {Roo.dd.DragDrop} target The drop target
23282 * @param {Event} e The event object
23283 * @param {String} id The id of the dragged element
23284 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23286 beforeDragOut : function(target, e, id){
23291 onDragDrop : function(e, id){
23292 var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
23293 if(this.beforeDragDrop(target, e, id) !== false){
23294 if(target.isNotifyTarget){
23295 if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
23296 this.onValidDrop(target, e, id);
23298 this.onInvalidDrop(target, e, id);
23301 this.onValidDrop(target, e, id);
23304 if(this.afterDragDrop){
23306 * An empty function by default, but provided so that you can perform a custom action
23307 * after a valid drag drop has occurred by providing an implementation.
23308 * @param {Roo.dd.DragDrop} target The drop target
23309 * @param {Event} e The event object
23310 * @param {String} id The id of the dropped element
23311 * @method afterDragDrop
23313 this.afterDragDrop(target, e, id);
23316 delete this.cachedTarget;
23320 * An empty function by default, but provided so that you can perform a custom action before the dragged
23321 * item is dropped onto the target and optionally cancel the onDragDrop.
23322 * @param {Roo.dd.DragDrop} target The drop target
23323 * @param {Event} e The event object
23324 * @param {String} id The id of the dragged element
23325 * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
23327 beforeDragDrop : function(target, e, id){
23332 onValidDrop : function(target, e, id){
23334 if(this.afterValidDrop){
23336 * An empty function by default, but provided so that you can perform a custom action
23337 * after a valid drop has occurred by providing an implementation.
23338 * @param {Object} target The target DD
23339 * @param {Event} e The event object
23340 * @param {String} id The id of the dropped element
23341 * @method afterInvalidDrop
23343 this.afterValidDrop(target, e, id);
23348 getRepairXY : function(e, data){
23349 return this.el.getXY();
23353 onInvalidDrop : function(target, e, id){
23354 this.beforeInvalidDrop(target, e, id);
23355 if(this.cachedTarget){
23356 if(this.cachedTarget.isNotifyTarget){
23357 this.cachedTarget.notifyOut(this, e, this.dragData);
23359 this.cacheTarget = null;
23361 this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
23363 if(this.afterInvalidDrop){
23365 * An empty function by default, but provided so that you can perform a custom action
23366 * after an invalid drop has occurred by providing an implementation.
23367 * @param {Event} e The event object
23368 * @param {String} id The id of the dropped element
23369 * @method afterInvalidDrop
23371 this.afterInvalidDrop(e, id);
23376 afterRepair : function(){
23378 this.el.highlight(this.hlColor || "c3daf9");
23380 this.dragging = false;
23384 * An empty function by default, but provided so that you can perform a custom action after an invalid
23385 * drop has occurred.
23386 * @param {Roo.dd.DragDrop} target The drop target
23387 * @param {Event} e The event object
23388 * @param {String} id The id of the dragged element
23389 * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
23391 beforeInvalidDrop : function(target, e, id){
23396 handleMouseDown : function(e){
23397 if(this.dragging) {
23400 var data = this.getDragData(e);
23401 if(data && this.onBeforeDrag(data, e) !== false){
23402 this.dragData = data;
23404 Roo.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
23409 * An empty function by default, but provided so that you can perform a custom action before the initial
23410 * drag event begins and optionally cancel it.
23411 * @param {Object} data An object containing arbitrary data to be shared with drop targets
23412 * @param {Event} e The event object
23413 * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23415 onBeforeDrag : function(data, e){
23420 * An empty function by default, but provided so that you can perform a custom action once the initial
23421 * drag event has begun. The drag cannot be canceled from this function.
23422 * @param {Number} x The x position of the click on the dragged object
23423 * @param {Number} y The y position of the click on the dragged object
23425 onStartDrag : Roo.emptyFn,
23427 // private - YUI override
23428 startDrag : function(x, y){
23429 this.proxy.reset();
23430 this.dragging = true;
23431 this.proxy.update("");
23432 this.onInitDrag(x, y);
23437 onInitDrag : function(x, y){
23438 var clone = this.el.dom.cloneNode(true);
23439 clone.id = Roo.id(); // prevent duplicate ids
23440 this.proxy.update(clone);
23441 this.onStartDrag(x, y);
23446 * Returns the drag source's underlying {@link Roo.dd.StatusProxy}
23447 * @return {Roo.dd.StatusProxy} proxy The StatusProxy
23449 getProxy : function(){
23454 * Hides the drag source's {@link Roo.dd.StatusProxy}
23456 hideProxy : function(){
23458 this.proxy.reset(true);
23459 this.dragging = false;
23463 triggerCacheRefresh : function(){
23464 Roo.dd.DDM.refreshCache(this.groups);
23467 // private - override to prevent hiding
23468 b4EndDrag: function(e) {
23471 // private - override to prevent moving
23472 endDrag : function(e){
23473 this.onEndDrag(this.dragData, e);
23477 onEndDrag : function(data, e){
23480 // private - pin to cursor
23481 autoOffset : function(x, y) {
23482 this.setDelta(-12, -20);
23486 * Ext JS Library 1.1.1
23487 * Copyright(c) 2006-2007, Ext JS, LLC.
23489 * Originally Released Under LGPL - original licence link has changed is not relivant.
23492 * <script type="text/javascript">
23497 * @class Roo.dd.DropTarget
23498 * @extends Roo.dd.DDTarget
23499 * A simple class that provides the basic implementation needed to make any element a drop target that can have
23500 * draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
23502 * @param {String/HTMLElement/Element} el The container element
23503 * @param {Object} config
23505 Roo.dd.DropTarget = function(el, config){
23506 this.el = Roo.get(el);
23508 var listeners = false; ;
23509 if (config && config.listeners) {
23510 listeners= config.listeners;
23511 delete config.listeners;
23513 Roo.apply(this, config);
23515 if(this.containerScroll){
23516 Roo.dd.ScrollManager.register(this.el);
23520 * @scope Roo.dd.DropTarget
23525 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
23526 * target. This default implementation adds the CSS class specified by overClass (if any) to the drop element
23527 * and returns the dropAllowed config value. This method should be overridden if drop validation is required.
23529 * IMPORTANT : it should set this.valid to true|false
23531 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
23532 * @param {Event} e The event
23533 * @param {Object} data An object containing arbitrary data supplied by the drag source
23539 * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
23540 * This method will be called on every mouse movement while the drag source is over the drop target.
23541 * This default implementation simply returns the dropAllowed config value.
23543 * IMPORTANT : it should set this.valid to true|false
23545 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
23546 * @param {Event} e The event
23547 * @param {Object} data An object containing arbitrary data supplied by the drag source
23553 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
23554 * out of the target without dropping. This default implementation simply removes the CSS class specified by
23555 * overClass (if any) from the drop element.
23558 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
23559 * @param {Event} e The event
23560 * @param {Object} data An object containing arbitrary data supplied by the drag source
23566 * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
23567 * been dropped on it. This method has no default implementation and returns false, so you must provide an
23568 * implementation that does something to process the drop event and returns true so that the drag source's
23569 * repair action does not run.
23571 * IMPORTANT : it should set this.success
23573 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
23574 * @param {Event} e The event
23575 * @param {Object} data An object containing arbitrary data supplied by the drag source
23581 Roo.dd.DropTarget.superclass.constructor.call( this,
23583 this.ddGroup || this.group,
23586 listeners : listeners || {}
23594 Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
23596 * @cfg {String} overClass
23597 * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
23600 * @cfg {String} ddGroup
23601 * The drag drop group to handle drop events for
23605 * @cfg {String} dropAllowed
23606 * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
23608 dropAllowed : "x-dd-drop-ok",
23610 * @cfg {String} dropNotAllowed
23611 * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
23613 dropNotAllowed : "x-dd-drop-nodrop",
23615 * @cfg {boolean} success
23616 * set this after drop listener..
23620 * @cfg {boolean|String} valid true/false or string (ok-add/ok-sub/ok/nodrop)
23621 * if the drop point is valid for over/enter..
23628 isNotifyTarget : true,
23633 notifyEnter : function(dd, e, data)
23636 this.fireEvent('enter', dd, e, data);
23637 if(this.overClass){
23638 this.el.addClass(this.overClass);
23640 return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
23641 this.valid ? this.dropAllowed : this.dropNotAllowed
23648 notifyOver : function(dd, e, data)
23651 this.fireEvent('over', dd, e, data);
23652 return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
23653 this.valid ? this.dropAllowed : this.dropNotAllowed
23660 notifyOut : function(dd, e, data)
23662 this.fireEvent('out', dd, e, data);
23663 if(this.overClass){
23664 this.el.removeClass(this.overClass);
23671 notifyDrop : function(dd, e, data)
23673 this.success = false;
23674 this.fireEvent('drop', dd, e, data);
23675 return this.success;
23679 * Ext JS Library 1.1.1
23680 * Copyright(c) 2006-2007, Ext JS, LLC.
23682 * Originally Released Under LGPL - original licence link has changed is not relivant.
23685 * <script type="text/javascript">
23690 * @class Roo.dd.DragZone
23691 * @extends Roo.dd.DragSource
23692 * This class provides a container DD instance that proxies for multiple child node sources.<br />
23693 * By default, this class requires that draggable child nodes are registered with {@link Roo.dd.Registry}.
23695 * @param {String/HTMLElement/Element} el The container element
23696 * @param {Object} config
23698 Roo.dd.DragZone = function(el, config){
23699 Roo.dd.DragZone.superclass.constructor.call(this, el, config);
23700 if(this.containerScroll){
23701 Roo.dd.ScrollManager.register(this.el);
23705 Roo.extend(Roo.dd.DragZone, Roo.dd.DragSource, {
23707 * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
23708 * for auto scrolling during drag operations.
23711 * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
23712 * method after a failed drop (defaults to "c3daf9" - light blue)
23716 * Called when a mousedown occurs in this container. Looks in {@link Roo.dd.Registry}
23717 * for a valid target to drag based on the mouse down. Override this method
23718 * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
23719 * object has a "ddel" attribute (with an HTML Element) for other functions to work.
23720 * @param {EventObject} e The mouse down event
23721 * @return {Object} The dragData
23723 getDragData : function(e){
23724 return Roo.dd.Registry.getHandleFromEvent(e);
23728 * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
23729 * this.dragData.ddel
23730 * @param {Number} x The x position of the click on the dragged object
23731 * @param {Number} y The y position of the click on the dragged object
23732 * @return {Boolean} true to continue the drag, false to cancel
23734 onInitDrag : function(x, y){
23735 this.proxy.update(this.dragData.ddel.cloneNode(true));
23736 this.onStartDrag(x, y);
23741 * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel
23743 afterRepair : function(){
23745 Roo.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
23747 this.dragging = false;
23751 * Called before a repair of an invalid drop to get the XY to animate to. By default returns
23752 * the XY of this.dragData.ddel
23753 * @param {EventObject} e The mouse up event
23754 * @return {Array} The xy location (e.g. [100, 200])
23756 getRepairXY : function(e){
23757 return Roo.Element.fly(this.dragData.ddel).getXY();
23761 * Ext JS Library 1.1.1
23762 * Copyright(c) 2006-2007, Ext JS, LLC.
23764 * Originally Released Under LGPL - original licence link has changed is not relivant.
23767 * <script type="text/javascript">
23770 * @class Roo.dd.DropZone
23771 * @extends Roo.dd.DropTarget
23772 * This class provides a container DD instance that proxies for multiple child node targets.<br />
23773 * By default, this class requires that child nodes accepting drop are registered with {@link Roo.dd.Registry}.
23775 * @param {String/HTMLElement/Element} el The container element
23776 * @param {Object} config
23778 Roo.dd.DropZone = function(el, config){
23779 Roo.dd.DropZone.superclass.constructor.call(this, el, config);
23782 Roo.extend(Roo.dd.DropZone, Roo.dd.DropTarget, {
23784 * Returns a custom data object associated with the DOM node that is the target of the event. By default
23785 * this looks up the event target in the {@link Roo.dd.Registry}, although you can override this method to
23786 * provide your own custom lookup.
23787 * @param {Event} e The event
23788 * @return {Object} data The custom data
23790 getTargetFromEvent : function(e){
23791 return Roo.dd.Registry.getTargetFromEvent(e);
23795 * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has entered a drop node
23796 * that it has registered. This method has no default implementation and should be overridden to provide
23797 * node-specific processing if necessary.
23798 * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
23799 * {@link #getTargetFromEvent} for this node)
23800 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
23801 * @param {Event} e The event
23802 * @param {Object} data An object containing arbitrary data supplied by the drag source
23804 onNodeEnter : function(n, dd, e, data){
23809 * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is over a drop node
23810 * that it has registered. The default implementation returns this.dropNotAllowed, so it should be
23811 * overridden to provide the proper feedback.
23812 * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
23813 * {@link #getTargetFromEvent} for this node)
23814 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
23815 * @param {Event} e The event
23816 * @param {Object} data An object containing arbitrary data supplied by the drag source
23817 * @return {String} status The CSS class that communicates the drop status back to the source so that the
23818 * underlying {@link Roo.dd.StatusProxy} can be updated
23820 onNodeOver : function(n, dd, e, data){
23821 return this.dropAllowed;
23825 * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dragged out of
23826 * the drop node without dropping. This method has no default implementation and should be overridden to provide
23827 * node-specific processing if necessary.
23828 * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
23829 * {@link #getTargetFromEvent} for this node)
23830 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
23831 * @param {Event} e The event
23832 * @param {Object} data An object containing arbitrary data supplied by the drag source
23834 onNodeOut : function(n, dd, e, data){
23839 * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped onto
23840 * the drop node. The default implementation returns false, so it should be overridden to provide the
23841 * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
23842 * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
23843 * {@link #getTargetFromEvent} for this node)
23844 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
23845 * @param {Event} e The event
23846 * @param {Object} data An object containing arbitrary data supplied by the drag source
23847 * @return {Boolean} True if the drop was valid, else false
23849 onNodeDrop : function(n, dd, e, data){
23854 * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is being dragged over it,
23855 * but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
23856 * it should be overridden to provide the proper feedback if necessary.
23857 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
23858 * @param {Event} e The event
23859 * @param {Object} data An object containing arbitrary data supplied by the drag source
23860 * @return {String} status The CSS class that communicates the drop status back to the source so that the
23861 * underlying {@link Roo.dd.StatusProxy} can be updated
23863 onContainerOver : function(dd, e, data){
23864 return this.dropNotAllowed;
23868 * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped on it,
23869 * but not on any of its registered drop nodes. The default implementation returns false, so it should be
23870 * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
23871 * be able to accept drops. It should return true when valid so that the drag source's repair action does not run.
23872 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
23873 * @param {Event} e The event
23874 * @param {Object} data An object containing arbitrary data supplied by the drag source
23875 * @return {Boolean} True if the drop was valid, else false
23877 onContainerDrop : function(dd, e, data){
23882 * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source is now over
23883 * the zone. The default implementation returns this.dropNotAllowed and expects that only registered drop
23884 * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
23885 * you should override this method and provide a custom implementation.
23886 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
23887 * @param {Event} e The event
23888 * @param {Object} data An object containing arbitrary data supplied by the drag source
23889 * @return {String} status The CSS class that communicates the drop status back to the source so that the
23890 * underlying {@link Roo.dd.StatusProxy} can be updated
23892 notifyEnter : function(dd, e, data){
23893 return this.dropNotAllowed;
23897 * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the drop zone.
23898 * This method will be called on every mouse movement while the drag source is over the drop zone.
23899 * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
23900 * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
23901 * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
23902 * registered node, it will call {@link #onContainerOver}.
23903 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
23904 * @param {Event} e The event
23905 * @param {Object} data An object containing arbitrary data supplied by the drag source
23906 * @return {String} status The CSS class that communicates the drop status back to the source so that the
23907 * underlying {@link Roo.dd.StatusProxy} can be updated
23909 notifyOver : function(dd, e, data){
23910 var n = this.getTargetFromEvent(e);
23911 if(!n){ // not over valid drop target
23912 if(this.lastOverNode){
23913 this.onNodeOut(this.lastOverNode, dd, e, data);
23914 this.lastOverNode = null;
23916 return this.onContainerOver(dd, e, data);
23918 if(this.lastOverNode != n){
23919 if(this.lastOverNode){
23920 this.onNodeOut(this.lastOverNode, dd, e, data);
23922 this.onNodeEnter(n, dd, e, data);
23923 this.lastOverNode = n;
23925 return this.onNodeOver(n, dd, e, data);
23929 * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source has been dragged
23930 * out of the zone without dropping. If the drag source is currently over a registered node, the notification
23931 * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
23932 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
23933 * @param {Event} e The event
23934 * @param {Object} data An object containing arbitrary data supplied by the drag zone
23936 notifyOut : function(dd, e, data){
23937 if(this.lastOverNode){
23938 this.onNodeOut(this.lastOverNode, dd, e, data);
23939 this.lastOverNode = null;
23944 * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the dragged item has
23945 * been dropped on it. The drag zone will look up the target node based on the event passed in, and if there
23946 * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
23947 * otherwise it will call {@link #onContainerDrop}.
23948 * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
23949 * @param {Event} e The event
23950 * @param {Object} data An object containing arbitrary data supplied by the drag source
23951 * @return {Boolean} True if the drop was valid, else false
23953 notifyDrop : function(dd, e, data){
23954 if(this.lastOverNode){
23955 this.onNodeOut(this.lastOverNode, dd, e, data);
23956 this.lastOverNode = null;
23958 var n = this.getTargetFromEvent(e);
23960 this.onNodeDrop(n, dd, e, data) :
23961 this.onContainerDrop(dd, e, data);
23965 triggerCacheRefresh : function(){
23966 Roo.dd.DDM.refreshCache(this.groups);